正しいサイズの画像を配信する

Katie Hempenius

ページに追加する前に画像を縮小するのを忘れた、という経験は誰にでもあるでしょう。画像は問題なく表示されますが、ユーザーのデータが無駄になり、ページのパフォーマンスが低下します。

サイズが正しくない画像を特定する

Lighthouse を使用すると、サイズが正しくない画像を簡単に特定できます。パフォーマンス監査（Lighthouse > [オプション] > [パフォーマンス]）を実行し、[画像を適切なサイズに調整する] 監査の結果を確認します。監査では、サイズ変更が必要な画像が一覧表示されます。

適切な画像サイズを決定する

画像サイズは、一見すると簡単そうに見えても、実際には複雑になることがあります。そのため、Google は「良い」方法と「より良い」方法の 2 つのアプローチを提供しています。どちらもパフォーマンスを向上させますが、「より良い」アプローチは理解と実装に少し時間がかかる場合があります。ただし、パフォーマンスの向上も大きくなります。最適な選択肢は、実装しやすいと感じるものです。

CSS 単位に関する簡単なメモ

画像を含む HTML 要素のサイズを指定する CSS 単位には、次の 2 種類があります。

• 絶対単位: 絶対単位を使用してスタイル設定された要素は、デバイスに関係なく常に同じサイズで表示されます。有効な絶対 CSS 単位の例: px、cm、mm、in。
• 相対単位: 相対単位を使用してスタイル設定された要素は、指定された相対長に応じてさまざまなサイズで表示されます。有効な相対 CSS 単位の例: %、vw（1vw = ビューポートの幅の 1%）、em（1.5 em = フォントサイズの 1.5 倍）。

「Good」なアプローチ

サイズが以下に基づく画像の場合:

• 相対単位: すべてのデバイスで適切に表示されるように画像のサイズを変更します。

アナリティクス データ（Google アナリティクスなど）をチェックして、ユーザーが一般的に使用しているディスプレイ サイズを確認するとよいでしょう。また、screensiz.es では、一般的なデバイスのディスプレイに関する情報を提供しています。- 絶対単位: 画像のサイズを、表示されるサイズに合わせて変更します。

DevTools の [要素] パネルを使用すると、画像が表示されるサイズを確認できます。

「Better」アプローチ

絶対サイズと相対サイズの両方を持つ画像の場合は、srcset 属性と sizes 属性を使用して、さまざまなディスプレイ密度にさまざまな画像を提供します。レスポンシブ画像に関するガイドをご覧ください。

「ディスプレイ密度」とは、ディスプレイによってピクセル密度が異なることを指します。他の条件が同じであれば、ピクセル密度の高いディスプレイはピクセル密度の低いディスプレイよりも鮮明に見えます。

そのため、デバイスのピクセル密度に関係なく、ユーザーに可能な限り鮮明な画像を表示するには、複数の画像バージョンが必要になります。

レスポンシブ画像技術では、複数の画像バージョンをリストに登録し、デバイスが最適な画像を選択できるようにすることで、この問題を解決しています。

すべてのデバイスで動作する画像は、小さいデバイスでは不必要に大きくなります。レスポンシブ画像の手法（特に srcset と sizes）を使用すると、複数の画像バージョンを指定し、デバイスが最適なサイズを選択できるようになります。

画像のサイズを変更する

どちらのアプローチを選択する場合でも、ImageMagick を使用して画像のサイズを変更すると便利です。ImageMagick は、画像の作成と編集に最もよく使用されるコマンドライン ツールです。ほとんどの場合、GUI ベースの画像エディタよりも CLI を使用する方が、画像をはるかに迅速にサイズ変更できます。

画像を元のサイズの 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

多くの画像のサイズを変更する場合は、スクリプトやサービスを使用してプロセスを自動化すると便利です。詳しくは、レスポンシブ画像ガイドをご覧ください。

寸法を指定してレイアウトのずれを回避する

このガイドでは、ダウンロードされる不要なバイト数を減らすという観点から画像のサイズについて説明していますが、レイアウト内で画像用に正しいスペースを確保することも、ページの累積レイアウト シフトの指標を最小限に抑えるための重要な要素です。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 を再度実行して、見落としがないことを確認します。