誰しも同じような経験をしたことがあるでしょう。追加する前に、画像をスケールダウンし忘れたことがあるでしょう。 できます。イメージは正常に見えますが、ユーザーのデータと損害のページ 向上します
サイズが適切でない画像を特定する
Lighthouse では、サイズが適切でない画像を簡単に特定できます。次のコマンドを実行します。 Performance Audit（[Lighthouse] > [Options] > [Performance]）に移動して、 [Properly size images] 監査の結果が表示されます。監査では、アクセスされたイメージが サイズ変更が必要だとします。
正しい画像サイズを特定する
画像のサイズは複雑になることがあります。そのため、2 つの アプローチ: 「良い」向上しますどちらもパフォーマンスは向上しますが、 「もっと良い」理解と実装に少し時間がかかることがあります。ただし、 パフォーマンスも大幅に向上します最適な選択は 安心して実装できるものを選択してください。
CSS ユニットに関する注意事項
HTML 要素のサイズを指定する CSS ユニットには、2 種類あります。 画像を含む:
- 絶対単位: 絶対単位を使用してスタイルが設定された要素は常に どのデバイスでも同じサイズで表示されます。有効な例: CSS の絶対単位: px、cm、mm、in
- 相対単位: 相対単位を使用してスタイル設定された要素は、 さまざまなサイズで表示できます。例 有効な相対 CSS 単位: %、vw（1vw = ビューポートの幅の 1%） em（1.5 em = フォントサイズの 1.5 倍）。
「良い」アプローチ
画像のサイズ設定の基準
- 相対単位: すべてのデバイスで機能するサイズに画像のサイズを変更します。
アナリティクス データ（例: Google ユーザーがよく使用している表示サイズを確認することをおすすめします。 または、screensiz.es では、多くの一般的なデバイスのディスプレイに関する情報を確認できます。 - 絶対単位: 表示時のサイズに一致するように画像のサイズを変更します。
DevTools の [Elements] パネルを使用して、画像のサイズを決定できる 表示されます。
「良い点」アプローチ
画像に絶対サイズと相対サイズの両方がある場合は、srcset を使用します。
および sizes
属性を使用して、異なる表示密度に応じた異なる画像を提供できます。
レスポンシブ画像に関するガイドをご覧ください。
[表示間隔]ディスプレイごとに表示方法が異なる ピクセル密度に応じて異なります。他の条件がすべて同じならば、ピクセル密度が高いと ディスプレイは、低ピクセル密度のディスプレイよりも鮮明に見えます。
そのため、ユーザーに複数のバージョンのイメージを作成してアップロードする場合は、 解像度やピクセル密度に関係なく、可能な限り鮮明な画像に できます。
これを可能にするのがレスポンシブ画像テクニックです。 複数のイメージ バージョンを設定し、デバイスで適切なイメージが 最適です。
あらゆるデバイスで機能する画像は、 小型化したデバイスですレスポンシブ画像の手法（特に srcset） sizes を指定することで、複数のイメージ バージョンを指定でき、 最適なサイズを選択します
画像のサイズ変更
どのようなアプローチを選んだ場合でも、 ImageMagick で画像のサイズを変更します。 ImageMagick は、 作成、編集するためのコマンドライン ツールです。ほとんどのユーザーは画像のサイズを変更できます CLI の方が GUI ベースの画像エディタよりもはるかに迅速に使用できます。
画像を元のサイズの 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
多数の画像のサイズを変更する場合は、 使用してプロセスを自動化できます。詳しくは、 レスポンシブ画像に関するガイドをご覧ください。
ディメンションを指定してレイアウト シフトを回避する
このガイドでは、ダウンロードされる不要なバイト数を減らすという観点から画像のサイズについて説明しますが、レイアウト内の画像に適切なスペースを確保することも、ページの Cumulative Layout Shift 指標を最小限に抑えるうえで重要な要素です。HTML で画像を提供する場合は、適切な width 属性と height 属性を使用して、画像用のレイアウトに割り当てるスペースをブラウザが認識できるようにしてください。
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
これらの属性や同等の CSS サイズを指定しなかった場合、ブラウザは画像が読み込まれるまでどのくらいのスペースを使用しているのかを把握できません。その結果、ドキュメントにレイアウト シフトが生じ、ユーザーが使い始めた後にコンテンツが移動すると、ユーザーは不満を感じる可能性があります。その結果、ユーザーは読書中に見失ったり、見逃したりするページの読み込み中に意図しない要素をクリックしてしまったのです。
幅と高さを明示的に指定する代わりに、画像で CSS の aspect-ratio プロパティを使用することもできます。これは、コンテナのアスペクト比が一定になるという意味で、width 属性や height 属性と同様に要素のサイズに効果があります。ただし、この方法では、指定された画像とは異なるアスペクト比が使用される可能性があります。そのため、この 16/9 の明示的な表示では画像が歪まないように、object-fit 設定を使用することをおすすめします。
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
確認
すべての画像のサイズを変更したら、Lighthouse を再実行し、サイズを変更していないことを確認します。 見落とすことはありません。