Lighthouse を実行する
このグリッチは小さく、画像を手作業で検査できる程度です。ただし、ほとんどのウェブサイトでは、Lighthouse などのツールを使用してこれを自動化することが不可欠です。
- サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
- Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
- [レポートを生成] ボタンをクリックします。
- [適切なサイズの画像を使用] の監査結果を確認します。
Lighthouse 監査によると、このページの画像はどちらもサイズを変更する必要があります。
flower_logo.png
を修正
ページ上部からロゴ画像を修正します。
- DevTools の [要素] パネルで
flower_logo.png
を検証します。
flower_logo.png
の CSS は次のとおりです。
.logo {
width: 50px;
height: 50px;
}
この画像の CSS 幅は 50 ピクセルであるため、flower_logo.png
はそれに応じてサイズ変更する必要があります。ImageMagick を使用して、画像を収まるようにサイズを変更できます。ImageMagick は、Codelab 環境にプリインストールされている画像編集用の CLI ツールです。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
- [ターミナル] をクリックします(注: ターミナル ボタンが表示されない場合は、全画面表示オプションを使用する必要がある場合があります)。
- コンソールで、次のように入力します。
convert flower_logo.png -resize 50x50 flower_logo.png
flower_photo.jpg を修正
次に、紫色の花の写真の色を補正します。
- DevTools の要素パネルで
flower_photo.jpg
を検証します。
flower_photo.jpg
の CSS は次のとおりです。
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
は、flower_photo.jpg
の CSS 幅を「ブラウザの幅の半分」に設定します。(1vw はブラウザの幅の 1% に相当します)。
この画像の理想的なサイズは、表示されるデバイスによって異なるため、ほとんどのユーザーに適したサイズに変更する必要があります。アナリティクス データで、ユーザーの間で一般的な画面解像度を確認できます。
このデータは、このサイトの訪問者の 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 は Nexus 5x でテストを実行します。Nexus 5X の画面は 1,080 x 1,920 です。Nexus 5x の場合、flower_photo.jpg
の最適なサイズは 540 ピクセル幅(1, 080 ピクセル x .5)。これは、サイズ変更した画像よりもはるかに小さいサイズです。
画像をさらに小さくする必要がありますか?おそらく。ただし、この答えは必ずしも明確ではありません。
ここでのトレードオフは、高解像度デバイスの画質とパフォーマンスです。ユーザーが画像をどれくらい詳しく調べるかを過大評価しがちなので、画像は小さくすることをおすすめします。ただし、画像品質がより重要なユースケースもあります。
レスポンシブ画像を使用して複数の画像サイズを配信することで、このトレードオフを回避できます。詳しくは、レスポンシブ画像ガイドをご覧ください。