読者が実際に目にする画像から始める
表示サイズ、選ばれたリソース、転送バイト数、ページ内での画像の役割を確認します。小さなラベルのある図は、写真とは違う扱いが必要です。大きな元ファイルを、そのまますべての訪問者に配信する必要はありません。
トレースで実際の Largest Contentful Paint 要素を特定します。画像ではなくテキストのこともあります。ファーストビューより下のサムネイルを最適化しても、無関係な描画ブロックのスタイルシートは直りません。
ファイルごとに形式と品質を選ぶ
実際に使われるサイズで、AVIF と WebP を既存の JPEG や PNG と比較します。輪郭、グラデーション、肌の色、透過、文字を確認しましょう。削減量は内容とエンコーダーの設定によって変わるため、一律の割合は品質の目標として役に立ちません。
適した図やアイコンには SVG を使い、ラベルや線をくっきり保ちます。必要に応じて、共有プラットフォーム向けにラスター版も残しておきます。重要な説明は HTML にも記載しましょう。知覚的な類似度スコアが高いからといって、非可逆圧縮の画像を「可逆」と呼んではいけません。
レイアウトに合ったレスポンシブなマークアップを書く
次の例は、小さな画面で左右に1remの余白がある48rem幅のコンテンツ列に、全幅の画像を置く想定です。sizes は実際のレイアウトに合わせて調整してください。ブラウザは候補の幅、表示領域のサイズ、端末の条件からリソースを選びます。
<picture>
<source type="image/avif"
srcset="/media/diagram-480.avif 480w,
/media/diagram-960.avif 960w,
/media/diagram-1440.avif 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
<img src="/media/diagram-960.webp"
srcset="/media/diagram-480.webp 480w,
/media/diagram-960.webp 960w,
/media/diagram-1440.webp 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
width="1440" height="900"
loading="eager" fetchpriority="high" decoding="async"
alt="Public requests pass through a cache before the origin">
</picture>画面外にある補助的な画像では、遅延読み込みと通常の取得優先度を使います。width と height はアスペクト比を確保するもので、CSS で画像を可変幅にすることもできます。意図的にアートディレクションを行う場合を除き、各サイズの画像は同じアスペクト比にそろえます。
可能な限り WordPress の画像処理を使う
メディアライブラリの画像には、WordPress の添付画像用の関数を使いましょう。そうすれば、利用できるサイズとレスポンシブ属性が添付ファイルのメタデータから生成されます。出力を確認してください。独自のマークアップや、生成されていないサイズがあると、この利点が失われることがあります。テーマのイラストには、明示的でバージョン管理されたサイズのセットを使えます。
代替テキストでは、その画像が加える情報を伝えます。隣の見出しを装飾的に繰り返すだけの画像なら、alt 属性は空にできます。代替テキストを狙いたいキーワードの羅列にしてはいけません。
配信とキャッシュの挙動を検証する
- 高いピクセル密度も含め、狭い画面と広い画面で選ばれる画像 URL を確認します。
- JavaScript を待たずにメイン画像を見つけられるようにします。
- 小さなプレビューだけでなく、実際の表示サイズで画質を確認します。
- 画面外のメディアが初回の転送の大部分を占めていないことを確かめます。
- CDN が形式をネゴシエーションする場合は、キャッシュキーがレスポンスを正しく区別しているか確認します。
- 変更したファイルにはバージョンを付けるか、該当するキャッシュを削除して、読者に更新が届くようにします。
よくある質問
画像用の CDN は必要ですか？
変換機能を持つ CDN は、大規模で頻繁に変わるメディアライブラリの管理を楽にしてくれます。小さなブログなら、生成済みのいくつかのサイズと通常の静的キャッシュで十分なこともあります。サービスを追加する前に、継続的な費用、運用の複雑さ、実際の転送量の削減効果を比較しましょう。
ヒーローのメイン画像は遅延読み込みにすべきですか？
すぐに表示される画像や、ページの LCP 要素である場合は、通常は遅延読み込みにしません。初期 HTML で URL を見つけられるようにし、適切なレスポンシブ候補を用意し、高い取得優先度を選択的に検討します。最初の表示領域より下から始まる補助的な画像は遅延読み込みにします。
AVIF は常に WebP より優れていますか？
すべての画像で勝る形式や品質設定はありません。細かいラベル、グラデーション、透過も含め、実際のファイルでサイズと見た目の品質を比較してください。適切なフォールバックを残し、ブラウザが選ぶファイルを確認しましょう。
レスポンシブなレイアウトなのに、なぜ画像に width と height が必要なのですか？
これらの属性で固有のアスペクト比が決まり、ブラウザは画像が届く前に領域を確保できます。CSS で可変幅にすることもできます。正しいサイズとレスポンシブな画像ソースを指定し、実際のレイアウトでずれがないか確認してください。WordPress 高速化ガイドでは、画像の配信をパフォーマンス改善全体の流れの中で説明しています。
出典と参考資料
あわせて読みたい
続けてCore Web Vitals の診断やパフォーマンス改善の完全チェックリストをお読みください。
Leave a Reply