レスポンシブ画像

Silktide は実際のブラウザーでページを読み込み、各画像の実際のサイズと、表示されているサイズを比較します。画面上での表示よりも大幅に大きい画像がある場合は、余分な解像度によって無駄になっているデータ量とともに報告します。

重要な理由

よくある例として、4000ピクセルの写真をアップロードし、ページ上では幅400ピクセルで表示するケースがあります。訪問者は、はるかに小さいファイルでも同じように表示できる画像を見るために、数メガバイトにもなるフル解像度のファイルをダウンロードすることになります。画面が小さく、通信速度が遅く、通信料金も高くなりがちなスマートフォンでは、無駄が特に大きくなります。ページが速いほど多くの訪問者を維持でき、Core Web Vitals を通じて検索順位の向上にもつながります。

修正方法

1. 各画像を複数のサイズで用意し、ブラウザーがデバイスに適したサイズを選べるようにします。

<!-- ブラウザーは必要なサイズだけをダウンロードします -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="市場の花屋台">

2. サイズ変更を自動化します。多くの CMS はアップロード時に複数のサイズを生成し、CDN は配信時にサイズを変更できます。どちらの方法でも、問題の再発を防げます。
3. 最低限、単発で使用する画像は、アップロード前に表示サイズとおおよそ同じ大きさに変更します。

Silktide によるテスト方法

1. 実際のブラウザーでページを読み込み、最新のデバイスに搭載された高精細な画面を考慮しながら、各画像が表示されるサイズを記録します。
2. そのサイズを、実際にダウンロードされた画像ファイルの寸法と比較します。
3. 余分なサイズが意味のある量になっている画像を、適切なサイズの画像に置き換えた場合に節約できるバイト数とともに、節約量の大きい順に報告します。

トラブルシューティング

他の画像チェックとの違いは何ですか？

このチェックは、ページ上の表示より物理的に大きな画像を配信していないかという、寸法に関するものです。画像の圧縮 と 画像の最適化 は、同じ寸法のままファイルを小さくすることを扱い、最新の画像形式 は WebP や AVIF への変換を扱います。同じ画像が複数の項目に該当することもあります。これらの修正は相互に補完するものです。

高解像度の画面でも画像が鮮明に見えます

最新の画面では、表示サイズから想定されるより多くのピクセルが必要になる場合があります。測定ではその点を考慮しています。高解像度の画面であっても利用できる範囲を超える画像のみが報告されます。

詳細情報

• レスポンシブ画像（MDN）
• 画像を適切なサイズにする（web.dev）
• 画像の最適化