Webサイトの画像最適化：ファイル形式・圧縮・遅延読み込みの基礎

画像最適化は、すべての画像を同じ形式へ変換する作業ではありません。ページ内の役割と実際の表示寸法を確認し、見た目を保てる範囲で不要なデータを減らします。先に重要な画像を決めると、遅延読み込みでかえって表示を遅くする誤りも避けられます。

画像の役割と表示寸法から着手する

最初にPageSpeed Insightsを使い、改善候補と利用者環境での表示を確認します。大きなファイルから機械的に直すのではなく、最初に見える主画像や繰り返し表示される画像を優先します。装飾だけの画像は、削除やCSSへの置き換えが可能かも検討します。

元画像のピクセル数と、画面上で表示される幅を比べます。小さな枠へ極端に大きい写真を配信しても、ブラウザ側で縮小されるだけです。ただし高密度画面向けの余裕は必要なので、一つの固定幅へ縮めるのではなく複数候補を用意します。

写真や階調の多い画像はJPEG・WebP・AVIFなどの候補を比較します。透過が必要な画像や文字を含む図は、PNGを含めて輪郭の崩れを確認します。ロゴや単純な図形はSVGが適する場合がありますが、外部から受け取ったSVGは安全性も確認します。

新しい形式が常に最小になるとは限らず、画像内容と変換設定で結果が変わります。形式名だけで採用せず、実ファイルの容量と表示品質を見ます。対応環境に幅があるサイトではpicture要素などで代替形式を用意し、配信後の応答形式も確認します。

圧縮率は一律の数値にせず、写真・商品画像・スクリーンショットごとに見本を作ります。人物の髪や商品の境界、細い文字など劣化が見えやすい箇所を等倍で確認します。元データは公開ファイルと分けて保管し、再編集のたびに圧縮を重ねません。

ブラウザ上の変換サービスを使う場合は、機密情報や位置情報を含む画像を外部へ送ってよいか確認します。自動化ツールでは変換後の上書き条件と除外対象を決めます。容量が減ったという結果だけで終えず、色・透過・向きが維持されたかを検収します。

srcsetには幅の異なる画像候補を示し、sizesにはレイアウト上の表示幅を伝えます。ブラウザは画面や解像度に応じて候補を選びます。候補だけ増やしてもsizesが実際のレイアウトと違えば、必要以上に大きい画像が選ばれる場合があります。

WordPressは登録された画像サイズを生成し、本文画像へ候補を付ける仕組みを持ちます。テーマが原寸URLを直接出している箇所や、独自ブロックの背景画像は別確認が必要です。画像サイズを追加した場合は既存画像にも必要な派生サイズがあるかを確認します。

遅延読み込みは、最初の画面に不要な画像の取得を後へ回す方法です。記事下部の画像には役立ちますが、主画像まで遅らせるとLargest Contentful Paintを悪化させる場合があります。画面内の重要画像には遅延指定を使わず、必要に応じて優先度を調整します。

画像の幅と高さをHTMLへ示すと、読み込み前に表示領域を確保できます。遅延読み込みだけを追加しても、画像表示時にレイアウトが動けば読みやすさを損ねます。PCとスマートフォンでスクロールし、表示直前に画像が間に合うかも確認します。

担当者向けに用途別の推奨寸法と形式を決めます。元画像の保管先とファイル名の付け方も入稿ルールへ加えます。WordPressの自動圧縮を使う場合も、過去画像へ適用する前にバックアップと見本確認を行います。未使用に見える画像は外部ページやCSSから参照されることがあるため、確認せず削除しません。

変更後は同じURLと条件でPageSpeed Insightsを使い、転送量と表示指標を再確認します。数値だけでなく画像の鮮明さや表示抜けも端末で見ます。画像を追加するたびにこの流れを通せる入稿ルールが、単発の一括変換より長く効果を保ちます。