レスポンシブ画像の作成
srcset HTMLの機能 ↗は、ブラウザがユーザーの画面解像度に最適な画像を自動的に選択できるようにします。
srcsetを使用するには、すべての画像の複数のリサイズされたバージョンを提供する必要があり、Cloudflareの画像変換を使用すれば、これは簡単に実現できます。
srcsetを使用するのに便利な2つの異なるシナリオがあります：
- CSSピクセルで固定サイズの画像ですが、高DPIスクリーン（Retinaディスプレイとも呼ばれる）に適応します。これらの画像は、画面サイズに関係なくページ上で同じスペースを占めますが、高解像度ディスプレイではよりシャープに表示されます。これは、アイコン、サムネイル、および固定幅レイアウトのページ上のほとんどの画像に適しています。
- 画面の特定の割合（通常は全幅）を埋めるレスポンシブ画像。これは、ヒーロー画像や流動的なレイアウトのページ、さまざまな画面サイズに適応するためにメディアクエリを使用するページに最適です。
高DPIディスプレイ用には、すべての画像の2つのバージョンが必要です。1つは1x密度用で、典型的なデスクトップディスプレイ（HD/1080pモニターや低価格のノートパソコンなど）に適しています。もう1つは、ほぼすべてのモバイルフォン、高価格のノートパソコン、4Kデスクトップディスプレイで使用される2x高密度ディスプレイ用です。一部のモバイルフォンは非常に高いDPIディスプレイを持ち、3x解像度を使用することもあります。ただし、1xから2xへのジャンプは明確な改善ですが、解像度をさらに上げることには限界があります。2xと3xの違いは視覚的には無視できるほど小さいですが、3xファイルは2xファイルの2倍のサイズです。
assetsフォルダーにproduct.jpgという画像があり、サイズを960pxで表示したい場合、コードは次のようになります：
<img src="/cdn-cgi/image/fit=contain,width=960/assets/product.jpg" srcset="/cdn-cgi/image/fit=contain,width=1920/assets/product.jpg 2x"/>この例で使用されているURLパスでは、src属性は通常の「1x」密度の画像用です。/cdn-cgi/image/は画像をリサイズするための特別なパスです。次にwidth=960が続き、画像の幅を960ピクセルにリサイズします。/assets/product.jpgはサーバー上のソース画像へのURLです。
srcset属性は、もう1つの高DPI画像を追加します。ブラウザはsrcとsrcsetの画像の間で自動的に選択します。この場合、width=1920（960ピクセルの2倍）を指定し、最後に2xを追加することで、ブラウザにこれはダブル密度の画像であることを知らせます。これは960ピクセルの画像と同じサイズで表示されますが、ピクセル数が2倍になるため、高DPIディスプレイでは2倍シャープに見えます。
srcsetで使用するために画像を拡大することは意味がありません。それはファイルサイズを増加させるだけで、視覚的な品質を向上させることはありません。srcsetで使用するソース画像は高解像度である必要があり、1xディスプレイ用にのみ縮小され、2xディスプレイ用にはそのまま表示されるか、または縮小される必要があります。
ウィンドウまたは画面の幅の特定の割合を占める画像を表示したい場合、画像は訪問者の画面サイズに適した寸法を持っている必要があります。画面サイズは320ピクセルから3840ピクセルまでさまざまであり、すべてのケースに適した単一の画像サイズはありません。<img srcset>を使用すると、ブラウザに複数の可能なサイズを提供し、最も適切なサイズを自動的に選択させることができます。
デフォルトでは、ブラウザは画像が画面の全幅に引き伸ばされると仮定し、訪問者の画面サイズに最も近いサイズを選択します。src属性では、ブラウザはsrcsetを理解しない古いブラウザのための良いフォールバックとなるサイズを選択します。
<img width="100%" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w, /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w " src="/cdn-cgi/image/width=960/assets/hero.jpg"/>前のケースでは、xの後に続く数字はスクリーン密度を示していました。この場合、wの後に続く数字は画像サイズを示します。ここでスクリーン密度（2xなど）を指定する必要はありません。ブラウザは自動的にそれを考慮し、必要に応じて高解像度の画像を選択します。
画像が画面（またはブラウザウィンドウ）の全幅で表示されない場合、2つのオプションがあります：
- 画像が固定幅のカラムの全幅で表示される場合は、特定の画像サイズを使用する最初の技術を使用します。
- 画面の特定の割合を占める場合、またはCSSメディアクエリを使用して時々全幅に引き伸ばされる場合は、以下に説明する
sizes属性を追加します。
画像が画面（またはウィンドウ）の幅の50%を占める場合：
<img style="width: 50vw" srcset="<SAME_AS_BEFORE>" sizes="50vw" />vw単位はビューポート（画面またはウィンドウ）幅のパーセンテージです。画像がメディアクエリやmax-widthなどの他のCSSプロパティに応じて異なるサイズを持つ場合は、sizes属性にすべての条件を指定します：
<img style="max-width: 640px" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=480/assets/hero.jpg 480w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w " sizes="(max-width: 640px) 100vw, 640px"/>この例では、sizesは640ピクセル未満の画面では画像がビューポートの全幅で表示され、すべての大きな画面では画像が640pxのままであることを示しています。srcsetのオプションの1つに1280ピクセルが含まれていることに注意してください。なぜなら、640 CSSピクセルで表示される画像は、高DPI（2x）ディスプレイでは2倍の画像ピクセルを必要とする可能性があるからです。
srcsetはPNG、JPEG、WebPなどのピクセルベースのフォーマットに便利です。ベクターベースのSVG画像には必要ありません。
HTMLは、WebP形式の画像をオプションで要求できる<picture>要素もサポートしています ↗が、必ずしも必要ではありません。Cloudflareは、srcまたはsrcsetのURLで/cdn-cgi/image/format=autoを使用する際にWebP画像を自動的に提供できます。
WebP画像を使用したいがリサイズは必要ない場合、2つのオプションがあります：
- 自動的にPolishでWebP変換を有効にすることができます。これにより、サイト上のすべての画像が変換されます。
- あるいは、サイト上の特定の画像パスを
/cdn-cgi/image/format=auto/で始まるように変更できます。たとえば、https://example.com/assets/hero.jpgをhttps://example.com/cdn-cgi/image/format=auto/assets/hero.jpgに変更します。