srcset を使用すると、適切な画像サイズが自動的に選択されます。
HTTP Archive によると、一般的なモバイル ウェブページの重さは 2.6 MB を超え、その 3 分の 2 以上が画像です。これは、最適化を行う絶好の機会です。
まとめ
- 表示サイズを超える画像は保存しないでください。
- 画像ごとに複数のサイズを保存し、
srcset属性を使用して、ブラウザが最小のサイズを選択できるようにします。w値は、各バージョンの幅をブラウザに伝えます。
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
画像を適切なサイズで保存する
表示サイズと一致するサイズの画像を使用すると、ウェブサイトを高速化し、データ量を減らすことができます。言い換えれば、画像を保存するときに 適切な幅と高さを指定します
下の画像をご覧ください。
どちらもほぼ同じに見えますが、一方のファイルサイズは他方の 10 倍以上です。
最初の画像は、表示サイズよりもはるかに大きいサイズで保存されているため、ファイルサイズははるかに大きくなっています。どちらの画像も 300 ピクセルの固定幅で表示されるため、同じサイズで保存した画像を使用するのが合理的です。
固定幅の場合は、表示サイズと同じサイズで保存された画像を使用します。
しかし、ディスプレイ サイズが異なる場合はどうすればよいでしょうか。
マルチデバイスの世界では、画像が単一の固定サイズで表示されるとは限りません。
画像要素の幅はパーセンテージであったり、画面サイズに合わせて画像表示サイズが変化するレスポンシブ レイアウトの一部であったりします。
...Retina ディスプレイのような、多くのピクセルを必要とするデバイスではどうすればよいでしょうか？
ブラウザで適切な画像サイズを選択できるようにする
各画像をさまざまなサイズで提供し、ブラウザがデバイスと表示サイズに最適なサイズを選択できるようにできたら便利だと思いませんか？残念ながら、どの画像が最適かを判断するには、catch-22 があります。ブラウザは、可能な限り小さい画像を使用する必要がありますが、画像の幅を確認するには、画像をダウンロードして確認する必要があります。
このような場合に役立つのが srcset です。画像をさまざまなサイズで保存し、各バージョンの幅をブラウザに通知します。
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 値は、各画像の幅をピクセル単位で示します。たとえば、small.jpg 500w は small.jpg が 500 ピクセル幅であることをブラウザに伝えます。これにより、ブラウザは画面サイズとビューポートのサイズに応じて、可能な限り小さい画像を選択できるようになります。サイズを確認するために画像をダウンロードする必要はありません。
下の画像で srcset の実際の動作を確認できます。ノートパソコンやデスクトップ パソコンを使用している場合は、ブラウザのウィンドウ サイズを変更して、このページを再度開いてください。次に、ブラウザ ツールの [Network] パネルを使用して、使用された画像を確認します。
（この操作はシークレット ウィンドウまたはプライベート ウィンドウで行う必要があります。それ以外の場合は、元の画像ファイルがキャッシュに保存されます）。
複数の画像サイズを作成するにはどうすればよいですか？
srcset で使用する画像ごとに複数のサイズを使用できるようにする必要があります。
ヒーロー画像などの 1 回限りの画像の場合は、さまざまなサイズを手動で保存できます。商品の写真など、画像が多数ある場合は、自動化する必要があります。そのためのアプローチは 2 つあります。
ビルドプロセスに画像処理を組み込む
ビルドプロセスの一環として、さまざまなサイズの画像を作成するステップを追加できます。詳しくは、Imagemin を使用して画像を圧縮するをご覧ください。
画像サービスを使用する
イメージの作成と配信は、Cloudinary などの商用サービス、または自分でインストールして実行する Thumbor などのオープンソースの同等の機能を使用して自動化できます。
高解像度の画像をアップロードすると、画像サービスにより、URL パラメータに応じてさまざまな画像形式とサイズが自動的に作成され、配信されます。たとえば、Cloudinary のサンプル画像を開き、URL バーの w 値やファイル拡張子を変更してみてください。
画像サービスには、さまざまな画像サイズの「スマート トリミング」を自動化し、ファイル拡張子を変更せずに JPEG の代わりにその形式をサポートするブラウザに WebP 画像を自動的に配信する機能など、より高度な機能もあります。
画像のサイズが異なると正しく表示されない場合
その場合は、「アート ディレクション」に <picture> 要素を使用して、異なるサイズの画像または画像の切り抜きを指定する必要があります。詳しくは、アート ディレクションの Codelab をご覧ください。
ピクセル密度についてはどうですか？
ハイエンド デバイスの物理ピクセルは小さい（高密度）です。たとえば、ハイエンド スマートフォンでは、安価なデバイスの各行のピクセル数が 2 ～ 3 倍になっていることがあります。
これにより、画像を保存する際に必要なサイズが変わる可能性があります。ここでは詳細な説明は行いませんが、詳細については、Codelab の密度記述子を使用するをご覧ください。
画像の表示サイズはどうでしょうか。
sizes を使用すると、srcset の利便性が向上します。
この属性を指定しなかった場合、ブラウザは srcset から画像を選択する際にビューポートの全幅を使用します。sizes 属性は、画像要素を表示する幅をブラウザに伝えるため、ブラウザはレイアウトの計算前に、できるだけ小さい画像ファイルを選択できます。
以下の例では、sizes="50vw" は、この画像がビューポートの幅の 50% で表示されることをブラウザに伝えます。
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
実際の動作については、simpl.info/sizes と 複数のスロット幅の指定 Codelab をご覧ください。
ブラウザ サポートについてはどうですか？
srcset と sizes は世界の 90% 以上のブラウザでサポートされています。
ブラウザで srcset または sizes がサポートされていない場合は、代わりに src 属性を使用します。
これにより、srcset と sizes が大幅に拡張されます。
詳細
画像の最適化について詳しくは、web.dev の画像を最適化するセクションをご覧ください。ガイドに沿って操作するには、Udacity が提供する無料の "レスポンシブ イメージ"コースを お試しください。