最新の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属性
以下の画像は、srcとsrcsetの両方の属性を持つimg要素です。 画像サイズを400x400pxに設定するスタイルがあります。 srcsetサポートのないブラウザでは、src値が使用されるため、標準画像がロードされます。
通常の画面では、1x srcset属性オプションがロードされます：
Retinaディスプレイでは、2x srcset属性オプションがロードされます：
HTMLのサンプルコード：
通常の画面では、1x srcset属性オプションがロードされます：
Retinaディスプレイでは、2x srcset属性オプションがロードされます：
HTMLのサンプルコード：
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">
公式の仕様で srcsetの詳細を読むことができます。 現時点では、WebKitのみが「解像度係数」（1x、2x、3x）をサポートしていることに注意してください。 新しい機能と同様に、WebKitにはエラーが含まれている可能性があるため、注意してください。 特に、WebKitがページの最小リソースをロードするようにする必要があります。これは、この機能の目標の1つです。
この機能の開発に重要な貢献（r153624、r153733）を行ったWebKitコミュニティメンバーのRomain PerierとYoav Weissに感謝します。
PS PMで翻訳メモを送信します。