imgタグのSrcset webkit属性ガイド

無料のWebKitエンジンは、画像のsrcset属性、IMG要素（ W3Cの公式仕様 ）をサポートするようになりました。 これにより、開発者は、Retinaディスプレイを使用しているユーザーに他のユーザーに害を与えることなく高解像度の画像を使用できます。 この機能をまだサポートしていないブラウザ向けのエレガントなソリューションの存在に注意することも重要です。

最新のWebKitナイトリービルドを使用する必要があることに注意してください。


WebKitが-webkit-image-set CSS関数を1年以上サポートしていることをご存知かもしれません（バージョン6以降のSafariおよびバージョン21以降のGoogle Chrome）。 この機能を使用すると、画面または他の再生デバイスの解像度に応じて、それぞれが1x、2x修飾子を持つcssプロパティで画像を設定できるようになりました。

.class { /*   ,     image-set */ background-image: url(image-set-not-supported.png); /*   ,    */ background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x); } 

これにより、ブラウザはユーザーのデバイスに最適なオプションを選択できます。 以前は、大きな画像をサポートするために、いくつかの開発パスがあり、それぞれに欠点がありました。 CSSコードを複製できます。 JavaScriptを使用して、ピクセルあたりのドット数を照会（window.devicePixelRatio）できます。 （デバイスのピクセル比）とページの読み込み後に画像を更新します。 または、常に大きな画像を提供して、一部のユーザーに負荷をかけすぎることもできます。 また、異なる解像度の画像が必要な場合は、border-imageの一部としてbackground-sizeなどの関連するCSSプロパティを調整する必要がありました。 迷惑だった。

幸いなことに、-webkit-image-setを使用すると、1つの単純なルールを記述できます。これにより、ブラウザーに最適な画像を決定させ、その結果、それをロードします。

srcset属性は-webkit-image-setと非常に似ています。 実際、属性は同等のCSS関数と考えるかもしれません。 -webkit-image-setの画像のリストと同様に、グラフィック要素に新しいsrcset属性を追加します。 下位互換性がサポートされており、srcsetをサポートしないブラウザーはそれを無視し、srcの使用を継続します。 そして、全体の魅力は、ブラウザエンジンがsrcsetを見て、ダウンロードするのに最適な画像を決定することです。 ほとんどの場合、次のように書く必要があります。

 <img src="normal-image.jpg" srcset="better-image.jpg 2x"> 

「better-image.jpg」の後の「2x」に注目してください。 これは、devicePixelRatio = 2以上のデバイス画面では、normal-image.jpgの代わりにbetter-image.jpgを使用する必要があることをブラウザに伝えます。 デバイスの画面が「網膜」でない場合、ブラウザはsrc属性にアクセスします。 次の例のように、srcset属性の値1xを設定することもできます。



公式の仕様で srcsetの詳細を読むことができます。 現時点では、WebKitのみが「解像度係数」（1x、2x、3x）をサポートしていることに注意してください。 新しい機能と同様に、WebKitにはエラーが含まれている可能性があるため、注意してください。 特に、WebKitがページの最小リソースをロードするようにする必要があります。これは、この機能の目標の1つです。

この機能の開発に重要な貢献（r153624、r153733）を行ったWebKitコミュニティメンバーのRomain PerierとYoav Weissに感謝します。

PS PMで翻訳メモを送信します。