srcset と <img> sizes

2023年の画像に関する効率的で偏ったガイド

サイドバーで詳細を確認してください。これは、現代のさまざまなサイズとピクセル密度を持つデバイスを処理するために<img>タグをアップグレードするためのクイックリファレンスです。ピクセルが必ずしもピクセルと等しくないことと、devicePixelRatioは1:1よりも3.875に近いことを知っておくべきです。現代の携帯電話は読みやすさのために320-428pxの幅（CSSピクセルで）として振る舞いますが、CSSピクセルあたりに多くのデバイスポクセルを持っています。

画像のサイズが決して変わらない場合、ブラウザウィンドウをどれだけ狭くしても、密度記述子を使用すべきです。これはロゴ、アイコン、ボタンにしばしば適しています。

あなたのブレークポイントを知っていますか？以下のソリューションを微調整するためにそれらの数値が必要です。最低限、メインコンテンツエリアの成長が止まるビューポート幅のブレークポイントです。

簡単な方法

<img src = "img.jpg?w=480" 
        srcset="img.jpg?format=webp&w=480 480w, 
                img.jpg?format=webp&w=800 800w, 
                img.jpg?format=webp&w=1200 1200w, 
                img.jpg?format=webp&w=1600 1600w, 
                img.jpg?format=webp&w=2000 2000w"

        sizes="(max-width: 700px) 100vw, 800px" alt="自転車に乗る犬" />

<!-- ビューポート幅が700pxのブレークポイントがあると仮定しています。
      このビューポート幅の下では、この画像は幅の100％を占めますが、
      ビューポートが大きくなると、画像は800 CSSピクセルに制限されます -->

<!-- RIAPI準拠の画像サーバー（例えばImageflow）を使用していると仮定しています。
     開発者の精神衛生のために、オンザフライでの画像バリアント製作は不可欠です。 -->