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

Katie Hempenius 氏
Katie Hempenius
X

Lighthouse の実行

この Glitch は小さく、手作業で画像を検査できます。ただし、ほとんどのウェブサイトでは、Lighthouse などのツールを使用して自動化することが不可欠です。

  1. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。
  2. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  3. [Lighthouse] タブをクリックします。
  4. [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
  5. [Generate report] ボタンをクリックします。
  6. [Properly Size Images] の監査結果を確認します。

Lighthouse で画像の適切なサイズ監査が失敗する。

Lighthouse の監査では、このページの画像を両方ともサイズ変更する必要があることがわかりました。

flower_logo.png を修正

ページの上部から開始して、ロゴ画像を修正します。

  • DevTools の [要素] パネルで flower_logo.png を調べます。

DevTools の [Elements] パネル

flower_logo.png の CSS は次のとおりです。

.logo {
  width: 50px;
  height: 50px;
}

この画像の CSS の幅は 50 ピクセルであるため、これに合わせて flower_logo.png のサイズを変更する必要があります。ImageMagick を使用すると、画像が収まるようにサイズを変更できます。ImageMagick は、Codelab 環境にプリインストールされている画像編集用の CLI ツールです。

  1. [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  2. [ターミナル] をクリックします（注: [ターミナル] ボタンが表示されない場合は、全画面表示オプションを使用する必要があります）。
  3. コンソールで次のように入力します。
convert flower_logo.png -resize 50x50 flower_logo.png

flower_photo.jpg を修正する

次に、紫色の花の写真を修正します。

  • DevTools の要素パネルで flower_photo.jpg を調べます。

DevTools の [Elements] パネル

flower_photo.jpg の CSS は次のとおりです。

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw は、flower_photo.jpg の CSS の幅を「ブラウザの半分の幅」に設定します。（1vw はブラウザの幅の 1% に相当します）。

この画像の理想的なサイズは、画像が表示されるデバイスによって異なるため、ほとんどのユーザーに適したサイズにサイズ変更する必要があります。以下の方法で分析データを確認することで、各ユーザーの一般的な画面解像度を確認できます。

画面解像度の Google アナリティクス。

このデータは、このサイトにアクセスしたユーザーの 95%以上が、幅 1,920 ピクセル以下の画面解像度を使用していることを示しています。

この情報を使用して、画像の幅を（1,920 ピクセル幅）×（ブラウザ幅の 50%）= 960 ピクセルとして計算できます。

解像度が 1, 920 ピクセルを超える場合、領域を覆うように画像が引き伸ばされます。サイズ変更後の画像はまだかなり大きいため、影響はそれほど大きくありません。

  • ImageMagick を使用して、画像の幅を 960 ピクセルにサイズ変更します。ターミナル タイプ:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Lighthouse を再実行

  • Lighthouse のパフォーマンス監査を再実行して、画像のサイズが正常に変更されたことを確認します。

Lighthouse での画像のサイズ適正化の監査。

...そして失敗します。なぜでしょうか？

Lighthouse は、Nexus 5x 上でテストを実行します。Nexus 5x の画面は 1080x1920 です。 Nexus 5x の場合、flower_photo.jpg の最適なサイズは幅 540 ピクセル（1, 080 ピクセル * . 5）.これは、サイズ変更された画像よりもはるかに小さくなります。

画像をさらに小さくする必要がありますか？おそらく。ただし、その答えは必ずしも明確ではありません。

この場合のトレードオフは、高解像度デバイスの画質とパフォーマンスのトレードオフです。ユーザーが画像をどの程度正確に検査しているかは過大評価されがちなため、画像を小さくする必要がありますが、画質がより重視されるユースケースも確かに存在します。

レスポンシブ画像を使用して複数の画像サイズを提供することで、このトレードオフを完全に回避できます。詳しくは、レスポンシブ画像ガイドをご覧ください。