画像最適化は、表示に必要な寸法、画質、容量、対応形式を同じ画像で比べます。WebPやAVIFへ変えたことだけを合格にせず、細かな文字や透明部分が保たれるかを確認してください。
元画像の寸法と、表示される寸法を確認する
記事本文、一覧カード、アイキャッチで必要なサイズが違います。巨大な元画像を、小さな表示へ毎回そのまま配信していないかをネットワーク記録で確認します。テーマが生成・選択する画像サイズと、実際のリクエストを照合してください。
写真、図、画面キャプチャでは、許容できる圧縮も違います。操作画面の文字が読めなくなるほど圧縮すると、容量は小さくても記事の役割を失います。
JPEG、PNG、WebP、AVIFを、同じ用途で試す
| 画像 | 比較する点 |
|---|---|
| 写真 | 細部、暗部、容量、表示の対応 |
| 画面キャプチャ | 小さな文字、境界、拡大時の見え方 |
| 透過画像 | 透明部分と背景色が変わった場合 |
| 図・グラフ | 線、文字、数値、読み取りやすさ |
WordPressにはAVIF等への対応がありますが、サーバー側の画像処理が対応しているかも必要です。前提は公式AVIF案内で確認できます。使う環境でアップロードと各サイズの生成を試してください。
自動変換の前に、元画像と戻す方法を残す
プラグインや配信サービスで一括変換する場合は、元画像の保管、生成ファイルの場所、変換後のURL、停止後の表示を確認します。既存記事が元画像を参照している場合も点検します。
画像一枚の比較票
用途と表示先：
元の寸法・容量：
候補の形式・寸法・容量：
文字や透明部分の変化：
表示するURL：
停止・復元したときの表示：記事全体の表示と操作で、改善を確かめる
画像だけでなく、読み始めるまでの表示、スクロール時のレイアウト、リンクやボタンも確認します。必要な画像の表示を遅らせすぎたり、寸法が分からず本文が動いたりしていないかを見ます。
まず代表的な三枚で条件を比べ、必要な設定だけを広げます。画像以外が遅い場合は、WordPressの速度の切り分けへ戻ってください。