ページに追加する前に画像を縮小し忘れたという経験は誰にでもあるでしょう。このイメージは問題ないように見えますが、ユーザーのデータが浪費され、ページのパフォーマンスが損なわれています。
サイズの不適切な画像を特定する
Lighthouse を使用すると、サイズの不適切な画像を簡単に特定できます。パフォーマンス監査（[Lighthouse] > [Options] > [Performance]）を実行して、[Properly size images] の監査結果を確認します。監査では、サイズ変更が必要なイメージが一覧表示されます。
正しい画像サイズを特定する
画像のサイズ設定は一見すると複雑になることがあります。そのため Google では「良い方法」と「良い方法」の 2 つのアプローチを用意しました。どちらもパフォーマンスは向上しますが、「より良い」アプローチでは理解と実装に時間がかかることがあります。ただし、その一方で、パフォーマンスも大きく向上します。最適な選択は、問題なく実装できるものです。
CSS ユニットに関する注意事項
画像を含む HTML 要素のサイズを指定するための CSS ユニットには、次の 2 種類があります。
- 絶対単位: 絶対単位を使用してスタイル設定された要素は、デバイスに関係なく常に同じサイズで表示されます。有効な絶対 CSS 単位の例: px、cm、mm、in
- 相対単位: 相対単位を使用してスタイル設定された要素は、指定された相対的な長さに応じてさまざまなサイズで表示されます。有効な相対 CSS 単位の例: %、vw（1vw = ビューポートの幅の 1%）、em（1.5 em = フォントサイズの 1.5 倍）。
「良い」アプローチ
以下に基づいてサイズ調整された画像の場合...
- 相対単位: すべてのデバイスで表示されるサイズに画像のサイズを変更します。
アナリティクス データ（Google アナリティクスなど）で、ユーザーがよく使用しているディスプレイ サイズを確認することをおすすめします。また、screensiz.es は多くの一般的なデバイスのディスプレイに関する情報を提供します。- 絶対単位: 表示されたサイズに合わせて画像のサイズを変更します。
DevTools の [要素] パネルを使用して、画像を表示するサイズを決定できます。
「より良い」アプローチ
絶対サイズと相対サイズの両方がある画像では、srcset 属性と sizes 属性を使用して、表示密度ごとに異なる画像を提供します。レスポンシブ画像に関するガイドを読む。
「ディスプレイ密度」とは、ディスプレイごとにピクセル密度が異なることを指します。他の条件がすべて同じであれば、高ピクセル密度ディスプレイは低ピクセル密度ディスプレイよりも鮮明に見えます。
そのため、デバイスのピクセル密度に関係なく、ユーザーが可能な限り鮮明な画像を使用できるようにするには、複数の画像バージョンが必要になります。
レスポンシブ画像技術では、複数の画像バージョンをリスト表示し、デバイスが最適な画像を選択できるようにすることで、これを実現します。
すべてのデバイスで機能するイメージは、小さいデバイスでは不必要に大きくなります。レスポンシブ画像技術（特に srcset と sizes）を使用すると、複数の画像バージョンを指定し、デバイスに最適なサイズを選択できます。
画像のサイズを変更
どの方法を選択した場合でも、ImageMagick を使用して画像のサイズを変更することをおすすめします。ImageMagick は、画像の作成と編集用の最も一般的なコマンドライン ツールです。ほとんどの場合、CLI を使用すると GUI ベースの画像エディタよりも迅速に画像のサイズを変更できます。
画像を元のサイズの 25% に変更します。
convert flower.jpg -resize 25% flower_small.jpg
「幅 200 ピクセル、高さ 100 ピクセル」に収まるように画像を拡大縮小します。
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
多数の画像のサイズを変更する場合は、スクリプトやサービスを使用してプロセスを自動化すると便利です。詳しくは、レスポンシブ画像ガイドをご覧ください。
ディメンションを指定してレイアウトの移動を回避する
このガイドでは、ダウンロードされる不要なバイト数を減らすという観点から画像のサイズについて説明しますが、レイアウト内に画像用の適切なスペースを確保することも、ページの Cumulative Layout Shift 指標を最小限に抑えるための重要な要素であることに注意してください。HTML で画像を表示する場合は、適切な width 属性と height 属性を使用して、画像用のレイアウトに割り当てるスペースをブラウザが認識できるようにしてください。
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
これらの属性や同等の CSS サイズ設定がないと、ブラウザは画像が読み込まれるまでどのくらいのスペースを消費するかを把握できません。その結果、ドキュメント内でレイアウトがずれてしまい、使い始めた後にコンテンツを移動するとユーザーに不便を感じさせる可能性があります。その結果、ユーザーは読書中に読み手にたどり着けなかったり、意図したヒット ターゲットを逃して、ページの読み込み中に意図せず他のコンテンツをクリックしてしまったりする可能性があります。
幅と高さを明示的に指定する代わりに、画像で CSS の aspect-ratio プロパティを使用することもできます。これにより、コンテナのアスペクト比が一定に保たれるという点で、width 属性や height 属性と同様に要素のサイズに効果があります。ただし、画像で指定されているものとは異なるアスペクト比が使用される可能性があるため、object-fit 設定を使用して、この明示的な 16/9 のビューでは画像が歪まないようにすることをおすすめします。
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
確認
すべての画像のサイズを変更したら、Lighthouse を再実行して、異常がないことを確認します。