Web画像最適化：完全フォーマットガイド

画像は平均的なWebページの総重量の約50%を占めます。最適化されていない画像は、ページ読み込みの遅延、Core Web Vitalsスコアの低下、ユーザーの不満の最大の原因です。良いニュースは、最新の最適化技術により、目に見える品質の劣化なしに画像サイズを50-80%削減できることです。

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

Googleはページ速度をランキング要素として使用しています。2秒で読み込まれるページの直帰率は9%ですが、5秒では38%に跳ね上がります。画像は通常、ツールとテクニックが確立されているため、最も簡単なパフォーマンス改善策です。

その効果は測定可能です：

ページ読み込みの高速化によりSEOランキングが向上
帯域幅の削減によりホスティングコストを節約
より良いモバイル体験（Webトラフィックの60%以上に重要）
Core Web Vitalsの改善（LCP、CLS）

画像フォーマット比較

JPEG (JPG)

写真や色数の多い複雑な画像に最適です。JPEGは非可逆圧縮を使用し、品質と引き換えに劇的に小さなファイルを実現します。

メリット：ユニバーサルサポート、写真の優れた圧縮、プログレッシブ読み込み
デメリット：透過なし、非可逆（再保存で品質が劣化）
用途：商品写真、ヒーロー画像、背景
品質設定：Web用途では75-85%がスイートスポット

PNG

透過が必要な画像や、ロゴやスクリーンショットのようなシャープなエッジを持つ画像に最適です。PNGは可逆圧縮を使用します。

メリット：透過サポート、ロスレス品質、シャープなテキスト/エッジ
デメリット：写真の場合ファイルサイズが大きい、アニメーションなし（APNGを使用）
用途：ロゴ、アイコン、スクリーンショット、UI要素
ヒント：シンプルなグラフィック（256色）にはPNG-8、複雑な画像にはPNG-24を使用

WebP

GoogleのモダンフォーマットでJPEGとPNGの長所を兼ね備えています。非可逆圧縮と可逆圧縮の両方を透過付きでサポートします。

メリット：同等品質でJPEGより25-35%小さい、透過サポート
デメリット：非常に古いブラウザ（IE11）では非サポート
用途：すべて — 現在最も優れた汎用Webフォーマット
ブラウザサポート：2024年時点でグローバルで97%以上

AVIF

AV1ビデオコーデックに基づく最新の候補。WebPをさらに上回る圧縮を提供します。

メリット：JPEGより50%小さい、HDRサポート、優れた品質
デメリット：エンコーディングが遅い、ブラウザサポート92%、ツールサポートが限定的
用途：最大限の圧縮が重要な高優先度の画像

SVG

品質を損なうことなく任意のサイズにスケーリングできるグラフィック用のベクターフォーマット。

メリット：無限にスケーラブル、非常に小さいファイルサイズ、CSS/JSでアニメーション可能
デメリット：写真には不向き
用途：アイコン、ロゴ、イラスト、シンプルなグラフィック

当サイトの画像オプティマイザーでフォーマット間の圧縮と変換ができます。

圧縮テクニック

非可逆圧縮

人間の目に知覚されにくいデータを永久に削除します。写真に最適です。

重要なのは、圧縮アーティファクトが目に見えるようになる品質の閾値を見つけることです。ほとんどのJPEG画像では、品質80は品質100と視覚的に区別がつきませんが、60-70%小さくできます。

可逆圧縮

データを一切削除せずにファイルサイズを削減します。解凍された画像はオリジナルとビット単位で同一です。

OptiPNGやpngquantなどのツールは、1ピクセルも失うことなく、より良い圧縮アルゴリズムによりPNGファイルを20-50%削減できます。

レスポンシブ画像

400pxのビューポートを持つモバイルフォンに2000pxの画像を配信するのは帯域幅の無駄です。レスポンシブ画像を使用して適切なサイズを配信しましょう：

<img
  srcset="image-400w.webp 400w,
          image-800w.webp 800w,
          image-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-800w.webp"
  alt="説明"
  loading="lazy"
/>

遅延読み込み

遅延読み込みは、ビューポートに表示されていない画像の読み込みを後回しにします。現在はブラウザにネイティブサポートされています：

<img src="photo.webp" alt="説明" loading="lazy" />

ファーストビューの画像（ヒーロー画像、ロゴ）には遅延読み込みを使用しないでください — 最高のLCPスコアのためにすぐに読み込まれるべきです。

画像CDNとトランスフォーメーション

Cloudinary、imgix、Cloudflare Imagesなどの画像CDNはオンザフライで最適化できます：

自動フォーマットネゴシエーション（サポートされている場合WebP/AVIFを配信）
デバイスに基づく動的リサイズ
品質の自動チューニング
グローバルエッジキャッシング

サードパーティサービスを使用したくない場合は、当サイトの画像コンプレッサーでアップロード前にブラウザ内でローカルに画像を最適化できます。

最適化チェックリスト

適切なフォーマットを選択：ほとんどにWebP、透過なしの写真にJPEG、透過付きのシャープなグラフィックにPNG、ベクターにSVG
表示サイズにリサイズ：表示サイズより大きな画像を配信しない
適切に圧縮：JPEG/WebPは品質75-85、PNGにはロスレスツールを使用
レスポンシブ画像を実装：srcset と sizes 属性を使用
フォールド下の画像を遅延読み込み：loading="lazy" を使用
widthとheight属性を追加：累積レイアウトシフト（CLS）を防止
説明的なaltテキストを追加：アクセシビリティとSEOの恩恵
CDNから配信：エッジキャッシングでレイテンシを削減

結果の測定

Google PageSpeed InsightsまたはLighthouseを使用して画像最適化を測定してください。注目すべき主要指標：

Largest Contentful Paint (LCP)：2.5秒未満であるべき
画像の総重量：最適化前後を比較
適切にサイズ調整された画像：Lighthouseが表示サイズより大きく配信されている画像をフラグ

FAQ

2025年のWebに最適な画像フォーマットは何ですか？

WebPが97%以上のブラウザサポートを持つ最高の汎用フォーマットです。写真（非可逆）とグラフィック（可逆）の両方で透過サポート付きの優れた圧縮を提供します。AVIFはさらに優れた圧縮を提供しますが、ブラウザサポートがやや低く、エンコーディングが遅いです。

画像圧縮でどの程度の品質低下が許容されますか？

Web用途では、ほとんどの画像を品質75-85（100中）に圧縮しても目に見える品質低下はありません。人間の目は圧縮アーティファクトに対して驚くほど寛容で、特に写真ではそうです。常にオリジナルと圧縮版を、ズームインではなく実際の表示サイズで比較してください。