画像最適化ガイド：WebP変換・圧縮・lazy loading | Toolsbase

なぜ画像最適化が重要なのか

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などの不要なメタデータを除去しているか

画像圧縮アルゴリズムの詳細解説

ロスレス（可逆）圧縮の仕組み

ロスレス圧縮は、元の画像データを完全に再現できる形でファイルサイズを削減します。データの冗長性を除去することでサイズを小さくします。

LZW（Lempel-Ziv-Welch）アルゴリズム

GIFが使用するアルゴリズムです。画像データ内の繰り返しパターンを辞書に登録し、繰り返し部分を短い参照コードに置き換えます。均一な色が多い画像で効果が高く、写真のように複雑な画像では圧縮率が低くなります。

DEFLATE（Deflate圧縮）

PNGが使用するアルゴリズムです。LZ77アルゴリズムとハフマン符号化を組み合わせています。

LZ77: スキャン済みデータを参照して繰り返しパターンを見つけ、「N文字前から始まるM文字の繰り返し」という形式で圧縮
ハフマン符号化: 出現頻度の高いデータには短いビット列、低いデータには長いビット列を割り当てることでさらに圧縮

この組み合わせにより、GIFより高い圧縮率と品質を実現しています。

ロッシー（非可逆）圧縮の仕組み

ロッシー圧縮は人間の視覚特性を利用します。人間の目が気づきにくい情報を削除することで大幅にファイルサイズを削減します。

DCT（離散コサイン変換）— JPEGの核心

JPEGが使用する変換です。画像を8×8ピクセルのブロックに分割し、各ブロックをDCTで周波数成分に変換します。

画像を8×8ピクセルブロックに分割
各ブロックをRGBからYCbCr色空間に変換（輝度と色差を分離）
DCTで周波数成分に変換（低周波＝形の輪郭、高周波＝細かいテクスチャ）
人間の目が敏感な低周波成分は精密に保存、鈍感な高周波成分は粗く量子化
ハフマン符号化でさらに圧縮

品質設定が高いほど高周波成分を詳細に保存し、品質設定が低いほど高周波を大きく削除します。品質を下げすぎると、ブロック単位の歪み（ブロックノイズ）が現れます。

クロマサブサンプリングの原理

人間の目は色の変化より明るさの変化に敏感です。この特性を利用して、輝度（Y）は元の解像度を維持しながら、色差情報（Cb、Cr）は解像度を落とします。

4:4:4: 色情報を間引かない（最高品質）
4:2:2: 水平方向に色情報を半分に（バランス型）
4:2:0: 水平・垂直ともに色情報を半分に（最も一般的）

4:2:0を使うと色差情報のデータ量が75%削減され、通常の写真では視覚的な劣化がほとんど感じられません。

WebP / AVIF / JPEG XL の詳細比較

各フォーマットの技術的背景

WebP

Googleが2010年に開発。動画コーデックのVP8をベースにした非可逆圧縮と、Deflateベースの可逆圧縮を組み合わせています。

非可逆モードではJPEGより25〜35%小さいファイルサイズを実現。可逆モードではPNGより26%小さくなります。2024年時点でほぼ全ての主要ブラウザが対応（97%以上）しており、現在の実用上の最適解です。

AVIF

動画コーデックAV1をベースとした次世代フォーマット。2019年にAOM（Alliance for Open Media）が公開しました。

WebPと比較してさらに20〜35%のファイルサイズ削減が可能で、HDRカラーやワイドカラーガモットもサポートしています。ただし、エンコードに時間がかかるという弱点があります。

ブラウザ対応は93%以上（2024年）。Chromeは89以降、Safariは16.0以降で対応しています。

JPEG XL

Googleが開発（Cloudflareも貢献）した最新フォーマットで、2022年に正式リリース。JPEGとの完全な相互変換を特徴とします。

既存のJPEGを再エンコードなしにJPEG XL形式に変換でき、かつ元のJPEGを完全に再現できます。既存のJPEGライブラリ資産を活かしながら移行できる点が評価されています。

非可逆圧縮でAVIFより優れたケースが多いとされますが、Chromeが2022年にサポートを一旦削除したことで普及が遅れており、2024年時点では対応ブラウザが限定的です（Safariは18.2以降でサポート開始）。

フォーマット選択の実践ガイド

ユースケース	推奨フォーマット	代替フォーマット	理由
写真（一般的なWebサイト）	WebP	JPEG（フォールバック）	広い互換性と十分な圧縮率
写真（品質最優先）	AVIF	WebP	最高の圧縮率と画質
ロゴ・アイコン（単色）	SVG	WebP（ロスレス）	解像度非依存、最小ファイルサイズ
スクリーンショット	WebP（ロスレス）	PNG	テキスト部分の鮮明さを維持
アニメーション	WebP	AVIF / GIF	ファイルサイズと互換性のバランス
メール本文の画像	JPEG / PNG	WebP	一部メールクライアントの非対応

ブラウザ対応と `<picture>` 要素によるフォールバック

最新フォーマットを使いながら古いブラウザへの対応も維持するには、<picture> 要素を使います。

<picture>
  <!-- AVIF対応ブラウザに最優先で配信 -->
  <source srcset="image.avif" type="image/avif">
  <!-- WebP対応ブラウザへのフォールバック -->
  <source srcset="image.webp" type="image/webp">
  <!-- 全ブラウザ向けの最終フォールバック -->
  <img src="image.jpg" alt="商品の写真" width="800" height="600">
</picture>

ブラウザは上から順にサポートするフォーマットを選択するため、常に最適なフォーマットが配信されます。

レスポンシブ画像の高度な実装パターン

アートディレクション

レスポンシブ画像の基本（同じ画像の異なるサイズ配信）に加え、デバイスによって見せる画像の構図や内容を変える「アートディレクション」があります。

<picture>
  <!-- スマートフォン向け: 縦長のポートレート構図 -->
  <source
    media="(max-width: 640px)"
    srcset="hero-portrait.webp"
    width="640"
    height="960"
  >
  <!-- タブレット向け: 正方形に近い構図 -->
  <source
    media="(max-width: 1024px)"
    srcset="hero-square.webp"
    width="1024"
    height="768"
  >
  <!-- デスクトップ向け: ワイドな横長構図 -->
  <img
    src="hero-wide.webp"
    alt="製品のメイン画像"
    width="1920"
    height="800"
  >
</picture>

ECサイトの商品画像やランディングページのヒーローセクションで特に効果的です。

デバイスピクセル比（DPR）対応

Retinaディスプレイ（DPR 2x）や一部のAndroid端末（DPR 3x）では、CSSピクセルの2〜3倍の解像度の画像が必要です。

<!-- DPRに応じて適切な解像度の画像を配信 -->
<img
  src="logo.webp"
  srcset="
    logo.webp 1x,
    logo@2x.webp 2x,
    logo@3x.webp 3x
  "
  alt="サービスロゴ"
  width="200"
  height="60"
>

Next.jsやNuxtでの自動最適化

フレームワークを使っている場合、画像最適化の多くが自動化されます。

Next.js の Image コンポーネント:

import Image from 'next/image'

export default function HeroSection() {
  return (
    <Image
      src="/hero.jpg"
      alt="ヒーロー画像"
      width={1200}
      height={600}
      priority  // LCP要素なのでpriority指定
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  )
}

Next.jsのImageコンポーネントは以下を自動的に処理します。

WebP/AVIFへの自動変換
適切な srcset の自動生成
width/height によるCLS防止
priority 属性による最適化
遅延読み込みの自動適用

CDNでの画像最適化

CDNが画像最適化に果たす役割

CDN（Content Delivery Network）は世界中に分散したサーバーネットワークです。画像を地理的に近いサーバーから配信することで、転送距離による遅延を最小化します。

主要なCDNの画像最適化機能:

CDN	自動フォーマット変換	オンデマンドリサイズ	自動圧縮
Cloudflare Images	対応	対応	対応
Vercel Edge Network	対応	対応（Nextとの統合）	対応
Cloudinary	対応	対応	対応
Imgix	対応	対応	対応
Amazon CloudFront + Lambda	カスタム実装	カスタム実装	設定可能

Cloudflareによる画像最適化の例

Cloudflare Workers + Images を使うと、URLパラメータで動的にリサイズとフォーマット変換ができます。

# 幅800px、WebP形式、品質80で配信
https://your-domain.com/cdn-cgi/image/width=800,format=webp,quality=80/original/photo.jpg

# 幅と高さを指定してクロップ
https://your-domain.com/cdn-cgi/image/width=400,height=300,fit=crop/original/photo.jpg

HTTPキャッシュの設定

CDNを最大限活用するには、適切なキャッシュ設定が不可欠です。

# 変更がほとんどない静的画像（長期キャッシュ）
Cache-Control: public, max-age=31536000, immutable

# コンテンツが更新される可能性がある画像
Cache-Control: public, max-age=86400, stale-while-revalidate=604800

ファイル名にコンテンツハッシュを含める（例: hero.abc123.webp）ことで、コンテンツが変わった際に新しいURLとして扱われ、キャッシュの問題を回避できます。

Core Web Vitals と画像の関係

LCP（Largest Contentful Paint）

LCPはページの表示速度を評価するCore Web Vitalsの指標です。「最も大きなコンテンツ要素が表示されるまでの時間」を測定します。

良好な目安: 2.5秒以内 改善が必要: 4.0秒以上

ページの最も大きなコンテンツは多くの場合、ヒーロー画像です。LCPスコアを改善するには以下の対策が効果的です。

画像の事前読み込み（preload）

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

fetchpriority="high" の指定

<img src="hero.webp" fetchpriority="high" alt="メイン画像" width="1200" height="600">

サーバーサイドレンダリングでimgタグを最初から含める

クライアントサイドJavaScriptで画像を挿入すると、スクリプトのロードが完了するまで画像のダウンロードが始まりません。SSRやSSGで最初のHTMLにimgタグを含めることが重要です。

適切なサイズの画像を配信する

LCP要素に1920px幅の画像を配信しているのに、実際の表示が400px幅であれば無駄です。デバイスに応じた適切なサイズの画像を配信します。

CLS（Cumulative Layout Shift）

CLSはページの視覚的な安定性を評価する指標です。コンテンツの読み込み後に要素が突然移動することをレイアウトシフトといいます。

良好な目安: 0.1以下 改善が必要: 0.25以上

画像によるCLSの主な原因と対策。

原因1: 画像の寸法未指定

<!-- NG: widthとheightがないのでブラウザが事前スペース確保できない -->
<img src="photo.webp" alt="写真">

<!-- OK: widthとheightを指定してブラウザがスペースを確保 -->
<img src="photo.webp" alt="写真" width="800" height="600">

原因2: CSSのaspect-ratioを使わないレスポンシブ画像

/* NG: heightをautoにするだけでは読み込み前のスペースが確保されない場合がある */
img {
  width: 100%;
  height: auto;
}

/* OK: aspect-ratioを明示して事前スペース確保 */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

INP（Interaction to Next Paint）と画像

INP（Interaction to Next Paint）は2024年3月にFIDに代わってCore Web Vitalsの指標となりました。ユーザー操作に対する応答性を測定します。

大きな画像ファイルのデコードはメインスレッドをブロックし、INPスコアを悪化させる場合があります。

対策: decoding="async" を指定すると、画像のデコードを非同期で行いメインスレッドをブロックしません。

<img src="photo.webp" decoding="async" alt="写真" width="800" height="600">

ただしLCP対象の画像には decoding="async" と loading="lazy" を同時に使わないよう注意してください。

画像最適化に役立つツール

Webサイトの画像を最適化するためのツールを活用すれば、専門知識がなくても手軽に始められます。

画像圧縮ツール: アップロードするだけで画像を最適な設定で圧縮します。WebP変換も対応。画像圧縮ツールを使う →
画像フォーマット変換ツール: JPEG、PNG、WebP、AVIF等のフォーマット間で変換できます。ブラウザ上で処理するため画像データが外部に送信されません。画像フォーマット変換ツールを使う →
画像リサイズツール: 表示サイズに合わせて画像をリサイズします。srcsetで複数サイズを用意する際にも便利です。画像リサイズツールを使う →

まとめ

画像最適化はWebサイトのパフォーマンスを改善する最も効果対コストの高い施策です。WebPへの変換、適切なサイズ設定、遅延読み込みの実装という3つの基本施策を行うだけで、多くのサイトで劇的な改善が見られます。

さらに一歩進めるには、AVIFへの対応、CDNの活用、Core Web Vitalsの各指標（LCP・CLS・INP）を意識した実装を行うことで、より高いPageSpeed Insightsスコアとユーザー体験の向上が実現できます。

フレームワークのImage最適化機能やCDNの自動変換機能を積極的に活用し、開発コストを抑えながら高いパフォーマンスを維持しましょう。