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

Katie Hempenius
Katie Hempenius

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

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

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

Lighthouse 監査によると、このページの画像はどちらもサイズを変更する必要があります。

flower_logo.png を修正

ページ上部からロゴ画像を修正します。

  • DevTools の [要素] パネルで flower_logo.png を検証します。

DevTools の [要素] パネル

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 の [要素] パネル

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 の画面は 1,080 x 1,920 です。Nexus 5x の場合、flower_photo.jpg の最適なサイズは 540 ピクセル幅(1, 080 ピクセル x .5)。これは、サイズ変更した画像よりもはるかに小さいサイズです。

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

ここでのトレードオフは、高解像度デバイスの画質とパフォーマンスです。ユーザーが画像をどれくらい詳しく調べるかを過大評価しがちなので、画像は小さくすることをおすすめします。ただし、画像品質がより重要なユースケースもあります。

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