表示速度を左右する画像サイズの指定

画像をWebPへ変換しても、表示領域に合わない大きな画像やwidth・heightのない画像は、表示速度やレイアウトの安定性を損ねます。画像最適化で確認したい実務ポイントを解説します。

画像形式と画像サイズは別の問題

WebPやAVIFへ変換すると、同じ見た目でもファイル容量を減らせる場合があります。しかし、横400ピクセルで表示する場所に横3000ピクセルの画像を配信すれば、必要以上のデータを読み込む問題は残ります。

画像最適化では、形式、圧縮率、実際の寸法、表示領域、読み込み順を分けて確認します。形式だけを変えて完了にしないことが大切です。

画像タグにwidthとheightがあると、ブラウザは画像を読み込む前に縦横比を計算し、必要な場所を確保できます。読み込み後に文章やボタンが押し下げられるレイアウトシフトを減らせます。

CSSで横幅を100％にするレスポンシブ画像でも、元の縦横比を示すwidthとheightは有効です。web.devも、画像や動画に寸法を指定することをCLS対策として案内しています。

<img src="photo.webp" width="1200" height="800" alt="店内の受付">

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>

PCとスマートフォンで同じ巨大画像を配信する必要がない場合は、複数サイズを用意し、srcsetやsizesからブラウザが選べるようにします。WordPressのメディア機能は、登録時に複数サイズを生成し、テーマが適切に出力すればレスポンシブ画像として利用できます。

テーマ側で常にフルサイズを指定したり、CSS背景画像として一種類だけ読み込んだりすると、自動生成した画像が活かされないことがあります。

ページ上部の主要画像は、表示に必要なため遅延読み込みが逆効果になる場合があります。一方、画面の下にある記事中画像は、必要になるまで読み込みを遅らせることで初期通信量を抑えられます。

すべての画像へ同じ設定を一括適用するのではなく、表示位置と役割で分けます。

記事カードや制作事例で縦横比がばらばらだと、画像が読み込まれた後にカードの高さが変わることがあります。表示枠の比率を決め、object-fitを使って見せ方を統一します。

ただし人物や商品の重要部分が切れないよう、機械的な中央トリミングだけに頼らず、登録画像も確認します。

Lighthouseなどで、適切なサイズの画像が配信されているか、寸法のない画像が残っていないかを確認します。さらにスマートフォンの通信環境で、画像が後から飛び出さないか、文章を読み始めた後に位置がずれないかを見ます。

容量が小さくなったという数字だけでなく、必要な画像が適切なタイミングとサイズで表示されていることを確認します。

画像最適化はWebPへの変換だけでは完了しません。表示場所に合う画像寸法、widthとheight、レスポンシブ画像、読み込み順を整えることで、通信量とレイアウトの安定性を一緒に改善できます。