The state of responsive images in 2015
The Web is a visual medium. The vast majority of that visual landscape is thanks to image files. Whilst plenty can be achieved with CSS, and inline SVG, most sites still need image files. On average, images accounted for more than half of page size last year, and year on year image sizes increase; there was a 21% growth in image size in 2014 alone. At the same time, the number, and diversity, of d
Responsive Images in Practice
A note from the editors: The responsive images spec has changed and sizes are now required. Eric Portis shares more details on the blog. The devil has put a penalty on all things we enjoy in life. Albert Einstein Sixty-two percent of the weight of the web is images, and we’re serving more image bytes every day. That would be peachy if all of those bytes were being put to good use. But on small or
Responsive Images Done Right: A Guide To And srcset — Smashing Magazine
A few days ago, we published an article on Picturefill 2.0, a perfect polyfill for responsive images. Today’s article complements Tim Wright’s article and explains exactly how we can use the upcoming <picture> element and srcset, with simple fallbacks for legacy browsers. There is no reason to wait for responsive images; we can actually have them very soon. Images are some of the most important pi
Leaner Responsive Images With Client Hints — Smashing Magazine
Developers have no reason not to explore Client Hints. The key benefits are more maintainable responsive image tags, fewer image bytes transferred and, ultimately, happier end users. In this article, Jon Arne Sæterås will focus on how to address responsive images issues, with a little help from the web server and Client Hints, the new way for the browser to request images with specific properties.
Chrome Beta for Android で Client Hints を試す - ぼちぼち日記
この記事は、HTML5 Advent Calendar 2013の17日目の記事です。 1. デバイスピクセル比の悩み 最近 Retina を始めとした高解像度ディスプレイの普及と進歩は凄いものがあります。私はデザインの才能が無いのでフロントエンドの設計をする機会はほぼないでしょうが、Webデザイナーの方は次々販売される様々なクライアントの高解像度ディスプレイ対応を気にしないといけないのは本当に大変だと思います。 今回初めて知ったのですが、この高解像度ディスプレイの対応をするにあたり「デバイスピクセル比」という値が重要な意味を持つようです。詳しくは、こちらのブログ、「いまさら聞けないRetina対応のための「ピクセル」の話」 を参照していただくか、「デバイスピクセル比」で検索するといっぱい記事が出てきます。 このデバイスピクセル比の対応で大変なのは、 デバイスピクセル比は機種によって違う(
<picture>まわり雑感 その1 - fragmentary
Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Rocksのは<picture>の簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんは<picture>と<img srcset>, <img sizes>を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitで<picture>とかを実装しているYoavなので。 以下いろいろ。 だいたい<im
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
