PageSpeed Insightsの画像の効率的エンコードを修正する方法

画像の効率的エンコードは圧縮の検査であり、レイアウトの検査ではありません。PageSpeed Insightsはページ上の各JPEG、PNG、WebPを見て、同程度の見た目の品質で再エンコードした場合に削減できるキロバイト数を見積もります。写真の形式が違うと言っているわけでも、ピクセルが大きすぎると言っているわけでもありません。それらは別の監査です（次世代フォーマットで画像を配信と画像を適切にサイズ設定）。

レポートはファイル名を示します。それでもサイトまたはCMSから原本を取得し、再エンコードし、小さいコピーを戻す必要があります。EditItAllはURLをクロールせず、PageSpeed Insightsとも通信しません。ブラウザ内で再エンコードするだけです。

JPEG圧縮ツールを開きます（レポートがPNG / WebPを挙げていれば、対応するツールを使います）。重い原本をドロップしてください：

• 写真は画質を80付近にします。画面上では通常区別がつかず、JPEG画質ガイドが推奨する帯域と同じです。
• 写真が数千ピクセル幅でも表示はそのごく一部なら、最大辺を1920または1280に設定します。圧縮ツールで選べるのは実際にこの値です。過大なピクセルはページ重量のもう半分です。ウェブ向けJPEG圧縮を参照してください。
• 結果リストのin → outサイズを読みます。まだ大きい？画質をおよそ十点下げて再実行します。「N KBに圧縮」欄はありません。サイズは出力です。

書き出してダウンロードし、サーバーまたはCMSのファイルを差し替えたら、PageSpeed Insightsを再実行します。すべては端末上に留まります。ページ読み込み後はオフラインでも使えます。書き出し時にEXIFは削除されます。

JPEGの再エンコード後に削減量が小さく見えるなら、PageSpeed Insightsはモダンな形式も求めているかもしれません。WebPとAVIFは同じ見た目の品質でJPEGを上回ることが普通です。JPGをWebPにまたはWebP圧縮ツールでコピーを変換し、表示サイズを比較してください。古いブラウザにも配信するなら、JPEGフォールバックを残します。

PNG写真はウェブページにほぼ不要です。JPGまたはWebPに変換してください。可逆PNGの再圧縮では写真はほとんど小さくなりません。画像圧縮のまとめで形式の選び方をより詳しく扱っています。

再エンコードでは、4000ピクセルのヒーローを800ピクセルの枠に収めることはできません。それは画像を適切にサイズ設定であり、より小さいピクセルサイズが必要です。折りたたみ以下の画像を遅延読み込みすることも、srcsetを書いてくれることもありません。EditItAllはキロバイト目標を自動で当てることも、ファイルに既にあるJPEGアーティファクトを消すこともできません。原本から一度圧縮したら、そこで止めてください。