Google PageSpeed InsightsでWebサイトを診断すると、「適切なサイズの画像を使用してください」「次世代フォーマットで画像を配信してください」といった指摘が頻繁に出ます。画像の最適化は、プログラムの知識がなくても取り組める速度改善の中で最も効果が高い項目の一つです。

この記事では、Webサイトの画像を最適化する方法を整理します。

画像が表示速度に与える影響

Webページの読み込みデータのうち、画像が占める割合は多くの場合50〜70%以上です。1ページあたりの画像ファイルの合計サイズが大きいと、それだけ読み込みに時間がかかります。

特に、デジタルカメラやスマートフォンで撮影した写真をそのまま（圧縮せずに）Webサイトにアップロードしているケースがあります。スマートフォンの写真は3〜10MB以上になることも多く、圧縮するだけで大幅に改善できます。

画像ファイル形式の選び方

用途に合わせて適切なファイル形式を選ぶことで、品質を保ちつつファイルサイズを小さくできます。

JPEG

写真・グラデーションのある画像に向いています。圧縮率を調整でき、品質を大きく落とさずにファイルサイズを小さくできます。Webサイトの写真素材はJPEGが基本です。

PNG

透過（背景を透明にする）が必要な画像・ロゴ・図表・スクリーンショットに向いています。可逆圧縮のためJPEGより品質が落ちませんが、写真をPNGで保存すると不必要に大きなファイルになります。

WebP

GoogleがWebサイト用に開発した次世代フォーマットです。JPEGやPNGに比べてファイルサイズが25〜35%程度小さくなります。現代のすべての主要ブラウザ（Chrome・Firefox・Safari・Edge）が対応しています。新規で作成する画像はWebPを検討する価値があります。

SVG

ロゴ・アイコン・シンプルな図形に向いています。ベクターデータのため、どんなサイズに拡大しても品質が劣化しません。ファイルサイズも小さく、Webサイトのアイコン類に適しています。

画像の圧縮方法

アップロード前に画像を圧縮することで、ファイルサイズを大幅に削減できます。

ブラウザ上で圧縮するツール

次のツールはブラウザ上でファイルをアップロードするだけで圧縮できます。インストール不要で手軽に使えます。

WordPressのプラグインで自動化する

WordPressでは、アップロード時に自動で圧縮・WebP変換するプラグインを使うと手間が省けます。

画像サイズ（解像度）の最適化

ファイルサイズの圧縮だけでなく、画像の表示サイズに合わせた解像度の最適化も重要です。

実際の表示サイズに合わせる

1920px幅で撮影した写真を、サイトで400px幅で表示している場合、4〜5倍のデータを余分にダウンロードしていることになります。画像を実際の表示サイズに近いサイズにリサイズしてからアップロードすることで、ファイルサイズを大幅に削減できます。

Windowsなら「ペイント」、Macなら「プレビュー」でリサイズできます。バッチ処理が必要な場合はIrfanView（Windows）やImageOptim（Mac）などのツールが便利です。

Retinaディスプレイへの対応

高解像度ディスプレイ（RetinaやHiDPiなど）では、通常の2倍の解像度の画像を使うとシャープに表示されます。WordPressはメディアを複数サイズで保存しており、ブラウザの解像度に応じて適切なサイズを配信するsrcset属性が自動で付与されます。

遅延読み込み（Lazy Load）の設定

遅延読み込みは、画面に表示されていない画像の読み込みを後回しにする技術です。最初に表示される部分（ファーストビュー）に必要な画像だけを先読みし、スクロールして画面内に入ったときに残りの画像を読み込みます。

WordPressの標準機能

WordPress 5.5以降、画像のloading="lazy"属性が標準でサポートされています。追加の設定なしに、主要な画像で遅延読み込みが有効になっています。

プラグインでの設定

WordPressのデフォルト設定では対応しきれない画像（iframeの動画埋め込みなど）には、「Lazy Load by WP Rocket」などのプラグインで対応できます。

定期的な画像の見直し

サイトを長期間運用していると、使われなくなった画像が大量にメディアライブラリに蓄積することがあります。「Media Cleaner」などのプラグインを使って未使用のメディアファイルを定期的に整理することで、サーバーのディスク使用量を抑えられます。

まとめ

画像の最適化は、サーバーの変更なしにできる表示速度改善の中で最も効果が高い施策の一つです。ファイル形式の選択・アップロード前の圧縮・実際の表示サイズへのリサイズという3つを実施するだけで、多くのサイトで大幅な改善が見込めます。

WordPressを使っている場合は、EWWW Image Optimizerなどのプラグインで自動化すると、以後の画像アップロードのたびに最適化が行われます。