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 倍以上です。
1 枚目の画像は、ディスプレイ サイズよりもはるかに大きいサイズで保存されているため、ファイルサイズがはるかに大きくなっています。どちらの画像も幅 300 ピクセルで表示されるため、同じサイズで保存された画像を使用するのが妥当です。
幅を固定する場合は、ディスプレイ サイズと同じサイズで保存された画像を使用します。
しかし、ディスプレイ サイズが異なる場合はどうなるでしょうか？
マルチデバイスの世界では、画像が常に 1 つの固定サイズで表示されるとは限りません。
画像要素の幅がパーセントで指定されている場合や、レスポンシブ レイアウトの一部として、画面サイズに合わせて画像表示サイズが変更される場合があります。
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 の動作を確認できます。ノートパソコンまたはデスクトップ パソコンをご利用の場合は、ブラウザ ウィンドウのサイズを変更して、このページを再度開いてください。次に、ブラウザツールの [ネットワーク] パネルを使用して、どの画像が使用されたかを確認します。（シークレット ウィンドウまたはプライベート ウィンドウで行う必要があります。そうしないと、元の画像ファイルがキャッシュに保存されます）。
複数の画像サイズを作成するにはどうすればよいですか？
srcset で使用するすべての画像について、複数のサイズを用意する必要があります。
ヒーロー画像などの単発の画像については、さまざまなサイズを手動で保存できます。商品写真など、大量の画像がある場合は、自動化する必要があります。これには 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 が提供する無料の「レスポンシブ画像」コースをお試しください。