Guide 22 Feb 2026 11分で読めます

Web画像最適化：フォーマット、圧縮、パフォーマンスの完全ガイド

Web画像最適化のすべてを学びましょう：フォーマット（JPEG、PNG、WebP、AVIF、SVG）の比較、圧縮タイプの理解、Core Web Vitalsの改善、ウェブサイトの高速化。

Image Optimization for the Web - Complete Guide

画像最適化が重要な理由

画像は通常、Webページの総重量の40〜60%を占めます。HTTP Archiveによると、中央値のWebページは900KB以上の画像を読み込みます。これは、画像がページ読み込み速度を改善するための最大の機会であることを意味し、ページ速度はユーザーエクスペリエンス、検索エンジンのランキング、コンバージョン率の3つの重要な結果に直接影響します。

Googleは2010年からデスクトップ、2018年からモバイルでページ速度をランキング要因としています。Core Web Vitalsの指標、特にLargest Contentful Paint（LCP）は、画像の読み込みパフォーマンスに大きく影響されます。最適化されていないヒーロー画像は、それだけでLCPをGoogleが「良好」と見なす2.5秒の閾値を超えて押し上げ、検索ランキングの低下につながる可能性があります。

SEO以外にも、ユーザー行動に関する数値は明確です：モバイル訪問者の53%が読み込みに3秒以上かかるページを離脱します（Google調査）。読み込み時間が100ミリ秒増えるごとに、コンバージョン率は最大7%低下する可能性があります（Akamai）。最適化されていない画像のためにサイトの読み込みが遅い場合、文字通り訪問者と収益を失っています。

画像フォーマット比較：正しいフォーマットの選択

正しい画像フォーマットを選択することは、最も影響力のある最適化の決定です。各フォーマットには特定の強みと理想的なユースケースがあります。詳細な分析を以下に示します：

JPEG（Joint Photographic Experts Group）

JPEGは1990年代からWeb画像の主力フォーマットです。非可逆圧縮を使用し、より小さいファイルサイズを実現するために一部の画像データを永久に破棄します。

  • 最適な用途： 写真、多くの色とグラデーションを含む複雑な画像、ヒーロー画像、商品写真
  • 不向き： テキスト、線画、ロゴ、透明性が必要な画像、鮮明なエッジのあるスクリーンショット
  • 圧縮： 非可逆のみ。品質は0〜100で調整可能。75〜85の品質設定は通常、視覚品質とファイルサイズの良いバランスを提供します。
  • 透明性： 非対応
  • アニメーション： 非対応（MJPEGは存在しますがWebではほとんど使用されません）
  • ブラウザサポート： ユニバーサル、すべてのブラウザがJPEGをサポート

実用的なヒント：カメラやデザインツールからエクスポートされたほとんどのJPEGは品質90〜100で、不必要に大きなファイルを生成します。品質を80に下げると、通常、人間の目に知覚できる品質の違いなく、ファイルサイズの40〜60%を節約できます。当社の画像圧縮ツールで即座に行えます。

PNG（Portable Network Graphics）

PNGはGIFの特許フリーの代替として作成され、可逆圧縮を使用して、すべてのピクセルをそのまま保存します。

  • 最適な用途： ロゴ、アイコン、スクリーンショット、テキストを含む画像、図表、透明性が必要なもの
  • 不向き： 写真（同じ画像でJPEGの5〜10倍のファイルサイズになります）
  • 圧縮： 可逆。ファイルサイズは画像の複雑さとユニークな色の数に依存します。
  • 透明性： フルアルファチャンネルサポート（256レベルの透明度）
  • アニメーション： APNGがモダンブラウザでサポートされています
  • ブラウザサポート： ユニバーサル

PNG-8（インデックスカラー、最大256色）はPNG-24（トゥルーカラー）よりもはるかに小さいファイルを生成します。シンプルなロゴやアイコンなど限られたカラーパレットを使用する画像の場合、PNG-8への変換でファイルサイズを60〜80%削減できます。

WebP

Googleが開発したWebPは、非可逆と可逆の両方の圧縮をサポートし、JPEGやPNGよりも一貫して小さいファイルを生成するモダンなフォーマットです。

  • 最適な用途： ほぼすべて。WebPはモダンWebに最適な汎用フォーマットです。
  • 圧縮： 非可逆と可逆の両方。非可逆WebPは同等の視覚品質でJPEGよりも25〜34%小さいファイルを生成します。可逆WebPはPNGよりも26%小さいファイルを生成します。
  • 透明性： 非可逆と可逆の両モードでサポート
  • アニメーション： サポート、GIFよりもはるかに小さいファイルを生成
  • ブラウザサポート： Chrome、Firefox、Safari、Edge、Operaでサポート。世界中のユーザーの97%以上がWebP画像を表示できます。

WebPは現在、ほとんどのWeb画像に推奨されるデフォルトフォーマットです。既存のJPEGおよびPNGファイルを当社の画像フォーマットコンバーターでWebPに変換し、ファイルサイズの節約をご自身で確認してください。

AVIF（AV1 Image File Format）

AVIFはAV1ビデオコーデックに基づく最新のフォーマットです。WebPよりもさらに優れた圧縮を提供しますが、いくつかのトレードオフがあります。

  • 最適な用途： 最大の圧縮が必要な写真や複雑な画像
  • 圧縮： 非可逆と可逆の両方。非可逆AVIFは同等の視覚品質でWebPよりも20〜50%小さいファイルを生成します。
  • 透明性： サポート
  • アニメーション： サポート
  • 欠点： WebPやJPEGよりもエンコード・デコードが遅い。ブラウザサポートは成長中ですがまだユニバーサルではありません（2026年初頭時点で約92%のグローバルサポート）。一部の実装では最大画像サイズの制限があります。
  • ブラウザサポート： Chrome、Firefox、Safari 16.4以降、Edge、Opera

SVG（Scalable Vector Graphics）

SVGは上記のフォーマットとは根本的に異なります。ピクセルデータを保存する代わりに、形状の数学的記述を保存するため、解像度に依存しません。

  • 最適な用途： アイコン、ロゴ、イラスト、チャート、シンプルなグラフィック、品質を損なわずに拡大縮小が必要なもの
  • 不向き： 写真や多くの色を含む複雑な画像
  • 圧縮： テキストベース（XML）であるため、SVGはWebサーバーによるgzip/brotli圧縮が可能で、60〜80%のサイズ削減を達成することが多い
  • スケーラビリティ： 無限。モバイルから8Kディスプレイまで、あらゆる画面サイズや解像度で鮮明に表示
  • アニメーション： CSSおよびJavaScriptアニメーションをサポート
  • ブラウザサポート： ユニバーサル

不要なメタデータの削除、パスの簡素化、非表示レイヤーの削除によってSVGファイルを最適化できます。当社のSVGオプティマイザーはこれを自動的に行い、SVGファイルサイズを30〜60%削減できます。

フォーマット比較まとめ

フォーマットタイプ透明性最適な用途オリジナルとの典型的な節約率
JPEG非可逆なし写真基準フォーマット
PNG可逆ありグラフィック、スクリーンショット基準フォーマット
WebP両方あり汎用JPEGと比較して25-34%
AVIF両方あり写真WebPと比較して20-50%
SVGベクターありアイコン、ロゴN/A（異なる用途）

非可逆圧縮と可逆圧縮の解説

非可逆圧縮と可逆圧縮の違いを理解することは、情報に基づいた最適化の決定を行うために不可欠です。

可逆圧縮

可逆圧縮は、データを失うことなくファイルサイズを削減します。解凍された画像はオリジナルとビット単位で同一です。データ内のパターンと冗長性を見つけ、より効率的にエンコードすることで機能し、ZIPファイルの仕組みに似ています。

  • フォーマット： PNG、可逆WebP、可逆AVIF、GIF
  • 典型的な削減率： 画像内容に応じて20〜50%
  • 使用する場合： ピクセルパーフェクトな精度が必要な場合（スクリーンショット、技術図面、医療画像、画像内のテキスト）

非可逆圧縮

非可逆圧縮は、人間の視覚システムが感知しにくいデータを永久に削除することで、はるかに大きなサイズ削減を達成します。非可逆画像圧縮の背後にある重要な知見は、人間は色の変化（クロマサブサンプリング）よりも明るさの変化に敏感であり、高周波の詳細（量子化）には鈍感であることです。

  • フォーマット： JPEG、非可逆WebP、非可逆AVIF
  • 典型的な削減率： 品質設定に応じて60〜90%
  • 使用する場合： 完全なピクセル再現が不要な写真や複雑な画像

実用的なアプローチ：品質設定80から始め、視覚的な結果を確認します。オリジナルと同じに見える場合は70に下げてみてください。アーティファクトが見える場合は85に上げてください。当社の画像圧縮ツールでは品質をリアルタイムで調整し、結果をオリジナルと並べて比較できます。また、画像比較ツールを使用して、オリジナルと圧縮版の違いを確認できます。

レスポンシブ画像：適切なサイズの提供

最も一般的で無駄な間違いの1つは、375px幅のビューポートを持つモバイルデバイスに3000x2000ピクセルの画像を提供することです。ブラウザは数メガバイトのデータをダウンロードし、元のサイズの一部にリサイズするだけです。レスポンシブ画像はこの問題を解決します。

srcsetとsizes属性

HTMLはsrcsetとsizes属性を通じてレスポンシブ画像の組み込みサポートを提供しています：

<img
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  src="hero-800.webp"
  alt="ヒーロー画像"
  width="800"
  height="450"
>

ブラウザはビューポートの幅とデバイスのピクセル比に基づいて、最も適切な画像サイズを自動的に選択します。これにより、モバイルユーザーは完全な1600px版（200KB以上）の代わりに400px幅の画像（おそらく30KB）をダウンロードします。

フォーマット切り替えのためのpicture要素

<picture>要素を使用して、フォールバック付きのモダンフォーマットを提供します：

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="説明" width="800" height="450">
</picture>

AVIFをサポートするブラウザは最小のファイルをダウンロードします。サポートしないブラウザはWebPにフォールバックし、古いブラウザはJPEGを取得します。これはすべてのユーザーに利益をもたらすプログレッシブエンハンスメント戦略です。

レスポンシブ画像セットを作成する前に、画像を複数のサイズにリサイズする必要があります。当社の画像リサイズツールがこれを簡単にし、その後画像フォーマットコンバーターで各サイズを複数のフォーマットに変換できます。

遅延読み込み：必要なときだけ画像を読み込む

遅延読み込みは、ユーザーがスクロールして近づくまで画面外の画像の読み込みを延期します。実装できる最もシンプルで最も効果的なパフォーマンス最適化の1つです。

ブラウザネイティブの遅延読み込み

モダンブラウザは単一のHTML属性でネイティブに遅延読み込みをサポートしています：

<img src="photo.webp" alt="説明"
     loading="lazy" width="800" height="450">

これはChrome、Firefox、Safari、Edgeでサポートされています。ブラウザがすべてのインターセクション検出と読み込みロジックを自動的に処理します。JavaScriptライブラリは不要です。

遅延読み込みのベストプラクティス

  • ファーストビューの画像に遅延読み込みを適用しないでください： ヒーロー画像、ロゴ、スクロールなしで見えるコンテンツはすぐに読み込む必要があります。これらに遅延読み込みを適用するとLCPスコアが悪化します。
  • 常に幅と高さを指定してください： これにより、ブラウザが画像読み込み前にスペースを確保でき、レイアウトシフト（CLS）を防ぎます。
  • 軽量なプレースホルダーを使用してください： フル画像の読み込み中に、低品質画像プレースホルダー（LQIP）、ドミナントカラー、またはSVGプレースホルダーを表示します。
  • 重要な画像にfetchpriorityを設定してください： LCP画像にfetchpriority="high"を使用して、ブラウザに優先するよう信号を送ります。

画像メタデータ：削除すべき理由

デジタル写真にはEXIF（Exchangeable Image File Format）データと呼ばれる隠れたメタデータが含まれています。これにはカメラモデル、露出設定、GPS座標、日時、さらには画像の編集に使用されたソフトウェアが含まれることがあります。

Web上で画像を公開する前にこのメタデータを削除すべき2つの重要な理由があります：

  • ファイルサイズ： EXIFデータは各画像に10〜50KBを追加できます。20枚の画像があるページでは、200KBから1MBの不要なデータです。
  • プライバシー： 写真のGPS座標は自宅住所、職場、または写真が撮影された正確な場所を明らかにする可能性があります。これは特に人物やプライベートな場所の画像にとって深刻なプライバシーの問題です。

ほとんどの画像圧縮ツールはメタデータを自動的に削除します。当社の画像メタデータビューアーで画像に含まれるメタデータを確認してから、何を削除するか決めることができます。

Core Web Vitalsと画像

GoogleのCore Web Vitalsは、実際のユーザーエクスペリエンスを測定する3つの特定の指標です。画像はそのうち2つに直接影響します：

Largest Contentful Paint（LCP）

LCPは、最大の可視コンテンツ要素の読み込み完了までの時間を測定します。ほとんどの場合、これは画像です。「良好」なLCP（2.5秒未満）を達成するには：

  • LCP画像を積極的に最適化する（圧縮、モダンフォーマットの使用、適切なサイズの提供）
  • LCP画像をプリロードする：<link rel="preload" as="image" href="hero.webp">
  • LCP画像に遅延読み込みを適用しない
  • LCP画像要素にfetchpriority="high"を使用する
  • 画像がCDNまたは高速サーバーから配信されるようにする

Cumulative Layout Shift（CLS）

CLSは視覚的安定性を測定します。明示的なwidthとheight属性のない画像は、読み込み時にレイアウトシフトを引き起こし、ページ上のコンテンツを押し動かします。「良好」なCLS（0.1未満）を達成するには：

  • <img>タグには常にwidthとheight属性を指定する
  • レスポンシブ画像にはCSS aspect-ratioを使用する
  • CSSで画像の読み込み前にスペースを確保する

画像配信におけるCDNの利点

コンテンツ配信ネットワーク（CDN）は、ユーザーに地理的に近いサーバーから画像を配信します。これが重要な理由は：

  • 遅延の削減： 東京のユーザーがニューヨークのサーバーから画像を読み込む場合、往復あたり約200msのネットワーク遅延が発生します。東京のCDNエッジサーバーはこれを約10msに削減します。
  • 自動フォーマットネゴシエーション： 多くのCDN（Cloudflare、Cloudinary、imgix）は、サポートするブラウザに自動的にWebPまたはAVIFを配信し、古いブラウザにはJPEG/PNGにフォールバックできます。
  • オンザフライリサイズ： CDN画像サービスはURLパラメータに基づいて画像をリサイズでき、複数のサイズを事前生成する必要がなくなります。
  • キャッシュ： CDNエッジサーバーは画像をグローバルにキャッシュし、オリジンサーバーの負荷を軽減します。
  • 帯域幅の節約： オリジンサーバーから転送されるデータが減り、ホスティングコストが下がります。

実用的な画像最適化ワークフロー

ウェブサイトに追加するすべての画像に対して従うことができるステップバイステップのワークフローは次の通りです：

  1. 正しいサイズから始める： 1200px以上で表示されない画像に4000px幅の画像をアップロードしないでください。まず画像をリサイズして最大表示サイズにします。
  2. 正しいフォーマットを選ぶ： デフォルトとしてWebPを使用。アイコンとロゴにはSVG。最大圧縮にはAVIF。当社の画像フォーマットコンバーターでフォーマットを切り替えます。
  3. 圧縮を適用する： 写真には品質75〜85の非可逆圧縮を使用。グラフィックには可逆圧縮を使用。当社の画像圧縮ツールで最適なポイントを見つけてください。
  4. メタデータを削除する： ファイルサイズの削減とプライバシー保護のためにEXIFデータを削除。まず画像メタデータビューアーで確認してください。
  5. レスポンシブサイズを作成する： 画像リサイズツールで各画像に3〜5のサイズ（400w、800w、1200w、1600w）を生成します。
  6. 遅延読み込みを実装する： フォールド以下のすべての画像にloading="lazy"を追加します。
  7. サイズを指定する： CLSを防ぐために常にwidthとheight属性を含めます。
  8. 検証する： Google PageSpeed Insightsを使用して画像最適化スコアを確認し、残りの問題を特定します。

避けるべき一般的な間違い

  • 写真にPNGを使用する： PNGで保存された写真は、同じ写真のJPEGやWebPの5〜10倍のサイズになることがあります。PNGはグラフィック用であり、写真用ではありません。
  • 画像のサイズを指定しない： レイアウトシフト（CLS）を引き起こし、Core Web Vitalsスコアに悪影響を与えます。
  • ヒーロー画像に遅延読み込みを適用する： ファーストビューの画像はできるだけ速く読み込む必要があります。遅延読み込みはLCPを遅延させます。
  • モダンフォーマットを無視する： 2026年にまだJPEGとPNGだけを提供している場合、大幅なファイルサイズの節約を逃しています。WebPとAVIFは広くサポートされています。
  • 過度の圧縮： JPEGを品質20で圧縮すると、目に見えるアーティファクトが生じ、プロフェッショナルに見えません。ファイルサイズと視覚品質のバランスを見つけてください。
  • すべてのデバイスに同じ画像を提供する： 1600px幅の画像は375pxのモバイル画面では帯域幅の無駄です。レスポンシブ画像を使用してください。
  • altテキストを忘れる： 圧縮の問題ではありませんが、空または欠落したalt属性はアクセシビリティと画像SEOに悪影響を与えます。すべての画像に説明的なaltテキストを設定してください。

まとめ：重要なポイント

画像最適化は一度きりのタスクではなく、継続的な実践です。以下が重要なポイントです：

  • 画像はページ重量の最大の要因です。最適化することで最大のパフォーマンスリターンが得られます。
  • WebPをデフォルトフォーマットにすべきです。最大圧縮にはAVIF、グラフィックの透明性にはPNG、ベクターコンテンツにはSVG、ユニバーサルフォールバックにはJPEGを使用してください。
  • 品質75〜85の非可逆圧縮は、ほとんどの写真でオリジナルと視覚的に区別がつきません。
  • 小さな画面にオーバーサイズの画像を送信しないよう、常にsrcsetとsizesを使用してレスポンシブ画像を提供してください。
  • フォールド以下の画像に遅延読み込みを適用しますが、LCP画像には決して適用しないでください。
  • ファイルサイズの節約とユーザープライバシーの保護のためにメタデータを削除してください。
  • レイアウトシフトを防ぐためにすべての画像にwidthとheightを指定してください。
  • より高速なグローバル配信と自動フォーマットネゴシエーションのためにCDNを使用してください。
ヒント： 最適化ワークフロー用に画像ツールをブックマークしてください：画像圧縮、画像リサイズ、フォーマットコンバーター、SVGオプティマイザー。すべてのツールはブラウザで完全に動作し、サーバーへのアップロードはゼロです。
パフォーマンス目標： ページあたりの合計画像重量を500KB未満にすることを目指してください。適切な最適化により、ほとんどのページは視覚的に豊かでプロフェッショナルな外観を維持しながらこれを達成できます。
今すぐ画像を圧縮

目に見える品質低下なく画像ファイルサイズを削減。すべてブラウザで実行され、サーバーへのアップロードは不要です。

画像圧縮ツールを開く