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

Katie Hempenius
Katie Hempenius

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

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

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)。これは、サイズ変更した画像よりもはるかに小さいサイズです。

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

ここでのトレードオフは、高解像度デバイスの画質とパフォーマンスです。ユーザーが画像をどの程度厳密に検査するかは過大評価されがちです。そのため、画像のサイズを小さくするとよいでしょう。ただし、画像の品質がより重要なユースケースもあります。

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