画像最適化ガイド — WebPへの変換でページ速度を改善
なぜ画像最適化が重要なのか
Webページの総転送量のうち、画像が占める割合は平均して40〜60%に達します。画像の最適化は、ページの読み込み速度を改善する最も効果的な手段の一つです。
Googleが提供するPageSpeed Insights（PSI）では、最適化されていない画像が「改善の機会」として頻繁に指摘されます。Core Web Vitals のうち、LCP（Largest Contentful Paint）は最大コンテンツの表示速度を測定する指標であり、ヒーロー画像の最適化が直接スコアに影響します。
表示速度の改善は、ユーザー体験の向上だけでなく、SEOランキングにも好影響を与えます。
画像フォーマットの比較
Web で使用される主要な画像フォーマットの特徴を比較します。
| フォーマット | 圧縮方式 | 透過 | アニメーション | ブラウザ対応 | 主な用途 |
|---|---|---|---|---|---|
| JPEG | 非可逆 | 不可 | 不可 | 全て | 写真 |
| PNG | 可逆 | 対応 | 不可 | 全て | ロゴ、スクリーンショット |
| GIF | 可逆 | 対応 | 対応 | 全て | 簡易アニメーション |
| WebP | 両対応 | 対応 | 対応 | 97%以上 | 汎用（推奨） |
| AVIF | 非可逆 | 対応 | 対応 | 93%以上 | 高圧縮が必要な場面 |
| SVG | ベクター | 対応 | 対応 | 全て | アイコン、図形 |
JPEGの特徴
最も広く使われている写真向けフォーマットです。非可逆圧縮により高い圧縮率を実現しますが、圧縮と再保存を繰り返すと画質が劣化します。透過（透明度）には対応していません。
PNGの特徴
可逆圧縮のため画質劣化がなく、透過にも対応しています。ロゴやスクリーンショット、テキストを含む画像に適していますが、写真ではファイルサイズが大きくなりがちです。
WebPの特徴
Googleが開発したフォーマットで、JPEGとPNGの両方の長所を兼ね備えています。非可逆圧縮と可逆圧縮の両方をサポートし、透過やアニメーションにも対応しています。
WebPへの変換によるメリット
WebPはJPEGと比較して25〜35%、PNGと比較して最大80%のファイルサイズ削減が期待できます。
実際の圧縮効果の例
| 元画像 | JPEG（品質85） | WebP（品質80） | 削減率 |
|---|---|---|---|
| 風景写真（4000x3000） | 2.1 MB | 1.4 MB | 33% |
| 商品写真（1200x800） | 450 KB | 290 KB | 36% |
| スクリーンショット（1920x1080） | 680 KB | 180 KB | 74% |
特にスクリーンショットのような均一な色面が多い画像では、WebPの圧縮効率が際立ちます。
WebPの品質設定
WebPの品質パラメータは0〜100の範囲で指定します。用途に応じた推奨値は以下の通りです。
| 用途 | 推奨品質 | 理由 |
|---|---|---|
| サムネイル | 60〜70 | 小さい表示サイズでは劣化が目立たない |
| 一般的な画像 | 75〜85 | 品質とファイルサイズのバランスが良い |
| 高品質な写真 | 85〜95 | 視覚的な劣化を最小限に抑える |
| ロスレス | 100 | ファイルサイズは大きいが劣化なし |
圧縮テクニック
非可逆圧縮のポイント
非可逆圧縮では、人間の目に知覚されにくい情報を削除することでファイルサイズを削減します。
- 適切な品質レベル: 品質80前後で保存すれば、ほとんどの用途で視覚的な劣化は感じられない
- クロマサブサンプリング: 色差情報を間引く手法。4:2:0が一般的で、ファイルサイズを大幅に削減
- プログレッシブ表示: 全体の概要を先に表示し、徐々に鮮明にする方式。体感速度が向上
可逆圧縮のポイント
画質を一切劣化させずにファイルサイズを削減する手法です。
- メタデータの除去: EXIF情報（撮影日時、GPS座標、カメラ情報）を削除する。プライバシー保護の観点からも推奨
- カラーパレットの最適化: 使用色数が少ない画像では、パレットサイズを最適化
- PNG最適化ツール: pngquant、optipng などの専用ツールで圧縮
レスポンシブ画像の実装
デバイスの画面サイズに応じて適切な画像を配信することで、モバイルでの無駄なデータ転送を防ぎます。
srcset と sizes を活用する
<img
src="image-800.webp"
srcset="
image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w,
image-1600.webp 1600w
"
sizes="
(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
33vw
"
alt="商品の写真"
width="800"
height="600"
>
この指定により、ブラウザは画面サイズとデバイスピクセル比に基づいて、最適な画像を自動的に選択します。
picture 要素でフォーマットを出し分ける
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="風景写真" width="800" height="600">
</picture>
AVIF対応ブラウザにはAVIF、WebP対応ブラウザにはWebP、どちらも非対応の場合はJPEGを配信します。
遅延読み込み（Lazy Loading）
ビューポート外の画像を後から読み込むことで、初期表示速度を大幅に改善できます。
ネイティブ Lazy Loading
<!-- ファーストビュー外の画像に loading="lazy" を指定 -->
<img src="below-fold.webp" loading="lazy" alt="説明文" width="800" height="600">
<!-- ファーストビューの画像には指定しない（LCPに影響） -->
<img src="hero.webp" alt="メイン画像" width="1200" height="600">
重要な注意点として、LCP要素（ページ上部のメイン画像）には loading="lazy" を指定してはいけません。遅延読み込みによりLCPスコアが悪化します。
fetchpriority によるプライオリティ制御
<!-- ヒーロー画像を高優先で読み込み -->
<img src="hero.webp" fetchpriority="high" alt="メイン画像" width="1200" height="600">
<!-- 装飾画像を低優先で読み込み -->
<img src="decoration.webp" fetchpriority="low" loading="lazy" alt="" width="200" height="200">
CLS（レイアウトシフト）の防止
画像の読み込みによるレイアウトシフトは、Core Web Vitals の CLS スコアに悪影響を与えます。
必ず width と height を指定する
<!-- width と height を指定すれば、ブラウザが事前にスペースを確保 -->
<img src="photo.webp" width="800" height="600" alt="写真">
aspect-ratio を活用する
.responsive-image {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
最適化チェックリスト
Webサイトの画像を最適化する際の確認項目をまとめます。
フォーマット選択
- 写真はWebP（またはAVIF）に変換しているか
- ロゴやアイコンはSVGを使用しているか
- 非対応ブラウザ向けのフォールバックを用意しているか
サイズの最適化
- 表示サイズに対して過剰に大きい画像を配信していないか
- Retinaディスプレイ向けに2x画像を用意しているか
- srcset で複数のサイズを提供しているか
配信の最適化
- ファーストビュー外の画像に
loading="lazy"を設定しているか - ヒーロー画像に
fetchpriority="high"を設定しているか - CDN（Content Delivery Network）を経由して配信しているか
品質とCLSの確認
- 適切な圧縮品質を設定しているか（品質75〜85が目安）
- 全ての画像に
widthとheightを指定しているか - EXIFなどの不要なメタデータを除去しているか
まとめ
画像最適化はWebサイトのパフォーマンスを改善する最も効果対コストの高い施策です。WebPへの変換、適切なサイズ設定、遅延読み込みの実装という3つの基本施策を行うだけで、多くのサイトで劇的な改善が見られます。オンラインの画像変換ツールや圧縮ツールを活用すれば、専門知識がなくても手軽に最適化を始められます。