これは朗報！ レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

2023/12/05 160 users img sizes CSS 遅延 auto

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> こ... 続きを読む

img の srcset 指定時に選択される画像 | blog.jxck.io

2020/08/15 22 users img INTRO picture jxck.io 挙動

Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラ... 続きを読む

Microsoft Edge、レスポンシブイメージ対応の「srcset」に対応。夏以降は主要ブラウザすべてでsrcsetサポート － Publickey

2015/06/11 45 users Publickey Opera Firefox IMGタグ

マイクロソフトはWindows 10に搭載予定の新ブラウザ「Microsoft Edge」で、imgタグの中で表示デバイスの解像度によって表示すべきイメージを複数指定できる「srcset」に対応することを明らかにしました。 srcsetはすでにChromeでは約1年前のChrome 34から、Firefoxは先月リリースされたFirefox 38から、Operaも先々月リリースのOpera 29か... 続きを読む

srcset と sizes

2014/09/09 147 users sizes 属性 レイアウト ハード ウェブサイト

レスポンシブ画像のための新しい手法、secset と sizes 属性を紹介エリック・ポーティス 文と絵 鈴木丈 訳 パート 1: メディア・クエリのどこがまずいのか? そう、もし君がウェブサイトを作っている時代が 1993 年 2 月 23 日 から 2010 年 5 月 25 日 の間だったら、画像の扱いなんてチョロかったね! それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつ... 続きを読む

HTML5 仕様 （WHATWG） に picture 要素が追加される | WWW WATCH

2014/06/18 44 users WHATWG picture Source Media 属性

Simon Pieters 氏 （Opera Software） のツイート経由ですが、WHATWG 版の HTML5 仕様に、picture 要素が追加されたそうです。 picture 要素は、所謂レスポンシブ・イメージ （Responsive images） を実現するための要素で、picture 要素内に内包された img 要素と source 要素に srcset 属性、media 属性、... 続きを読む