画像は、平均的なウェブページのデータ転送量の約50～60%を占めています。適切な画像フォーマットを選択することは、ウェブパフォーマンスを向上させる上で最も効果的な最適化の一つです。ここでは、各フォーマットとその使用場面について、実用的な解説をします。
知っておくべきフォーマット
JPG (JPEG)
ベテラン。JPGは1990年代からウェブ上の写真の標準形式となっています。自然な色のグラデーション、質感、複雑なシーンなど、写真に最適化された非可逆圧縮方式を採用しています。
最適な用途: WebPやAVIFが適さない写真、または旧バージョンとの互換性が必要な場合。
弱点: 最新のフォーマットよりもサイズが大きく、透明度がなく、圧縮によるアーティファクトが発生し、画質が低下します。
PNG
PNGは、フラットな色、シャープなエッジ、透明な背景を持つグラフィックに最適な、非可逆圧縮形式です。
最適な用途: ロゴ、アイコン、スクリーンショット、UI要素、透明度が必要な画像。
弱点: 写真の場合、JPGよりもはるかにサイズが大きく、読み込みが遅い。
WebP
GoogleのWebPフォーマットは、非可逆圧縮と可逆圧縮の両方に対応し、透明度をサポートしており、JPGとPNGの両方を凌駕する性能を発揮します。現在、Web画像の推奨デフォルトフォーマットとなっています。
最適な用途: ほぼすべてのもの - 写真 (JPG の置き換え)、ロゴ/グラフィック (PNG の置き換え)、一般的な Web 画像。
ファイルサイズの利点: 同等の画質であれば、JPGよりも25～35%小さくなります。PNGと似ていますが、多くの場合、ファイルサイズは小さくなります。
ブラウザサポート: 97%以上（Chrome、Firefox、Safari、Edgeなど、すべての最新ブラウザ）。
AVIF
AV1ビデオコーデックから派生したAVIFは、最新の主流画像フォーマットです。WebPよりも優れた圧縮率を実現し、同等の画質であれば20～50%もファイルサイズを小さくできます。
最適な用途: 最大限の圧縮が優先され、サーバー/ビルドプロセスを制御できる静的画像。
弱点: エンコードが遅い（リアルタイム生成には適さない）、古いブラウザバージョンではサポートされていない可能性がある。
ブラウザサポート: Chrome 85以降、Firefox 93以降、Safari 16以降、Edge 121以降。
SVG
SVGはベクター形式であり、画像はピクセルではなく数学的なパスで記述されます。SVGファイルは解像度に依存せず、ロゴやアイコンなどに使用される場合は通常非常に小さくなります。
最適な用途: ロゴ、アイコン、イラスト、グラフ、さまざまなサイズに拡大縮小する必要のあるあらゆるグラフィック。
以下の用途には適していません: 写真、または複雑なグラデーションやテクスチャを含む画像。
フォーマットとユースケースのマトリックス
| コンテンツタイプ | 最適なフォーマット | フォールバック |
|---|---|---|
| 写真 | AVIF | WebP → JPG |
| 商品写真 | WebP | JPG |
| ロゴ | SVG | PNG |
| アイコン | SVG | PNG |
| スクリーンショット | WebP | PNG |
| イラスト | SVG または WebP | PNG |
| 背景パターン | WebP | JPG |
| アニメーション | WebP | GIF |
パフォーマンスへの影響：実際の数値
一般的な商品写真を最新のフォーマットに変換する：
| フォーマット | ファイルサイズ | 品質 |
|---|---|---|
| JPG (品質 85) | 340 KB | ベースライン |
| PNG | 1.2 MB | ロスレス |
| WebP (品質 80) | 210 KB | ≈ JPG 85 |
| AVIF (品質 60) | 155 KB | ≈ JPG 85 |
JPGからWebPに切り替えることで、画像1枚あたりのデータ容量を約38%削減できます。商品画像が20枚掲載されているページの場合、ページ読み込みごとに数メガバイトの容量削減につながる可能性があります。
プログレッシブエンハンスメント用の <picture> 要素
WebPをフォールバックとして、JPGを最終フォールバックとしてAVIFを配信したい場合：
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Product photo" />
</picture>
これにより、最新のブラウザはAVIFを、旧型の最新ブラウザはWebPを、そして旧式のブラウザはJPGを使用できるようになり、JavaScriptは一切不要です。
Core Web Vitals はどうでしょうか？
**Largest Contentful Paint (LCP)**は、GoogleのコアWeb Vitals指標の一つであり、画像の読み込み時間に大きく影響されます。ヒーロー画像や商品写真にWebPまたはAVIFを使用することで、GoogleのランキングシグナルであるLCPスコアを直接向上させることができます。
ウェブ画像に関する追加のヒント：
- レイアウトのずれ (CLS) を回避するために、
width、 、 、height属性を追加します。 - 折り目より下の画像には、
loading="lazy"を使用してください。 - LCPイメージ（通常はヒーローイメージ）に
fetchpriority="high"、 を使用してください。
画像の変換
PicsSizerの画像コンバーターを使えば、どんな画像でもWebP、AVIF、PNG、JPG形式に変換できます。一括最適化には画像圧縮ツールを使用すると、画質設定を調整して、画質劣化を最小限に抑えつつファイルサイズを最小化できます。
要約：2026年に推奨されるデフォルト設定
- ウェブ上の写真 → WebP (
<picture>を介して JPG にフォールバック) - ロゴとアイコン → SVG（ラスター形式の代替：PNG）
- スクリーンショットと図 → WebP（PNGによるフォールバックあり）
- 最大圧縮、静的アセット → AVIF（WebPフォールバック付き）
- 従来のメールテンプレート → JPGまたはPNG（メールクライアントで最新のフォーマットがサポートされていないため）
よくある質問
- 2026年におけるウェブサイトに最適な画像フォーマットは何ですか？
- WebPは2026年時点でウェブサイトに最適な汎用フォーマットです。同等の画質でJPGよりもファイルサイズが25～35%小さく、PNGと同様に透明度をサポートし、最新のブラウザすべてで完全にサポートされています。AVIFはさらに効率的ですが、ブラウザのサポート状況はやや劣ります。アイコンやロゴにはSVGを使用してください。
- ウェブサイトの画像をWebP形式に変換すべきでしょうか？
- はい。JPGやPNG画像をWebPに変換することで、画質を損なうことなく画像サイズを25～50%削減できます。画像サイズが小さくなれば、ページの読み込み速度が向上し、Core Web Vitalsスコアも改善され、SEO効果も高まります。現在、主要なブラウザはすべてWebPをサポートしています。
- AVIFとは何ですか？また、WebPよりも優れていますか？
- AVIFは、AV1ビデオコーデックから派生した次世代画像フォーマットです。同じ画質でWebPよりも20～50%優れた圧縮率を実現します。ブラウザのサポート状況も非常に良好です（Chrome、Firefox、Safari 16以降、Edge）。ただし、エンコードに時間がかかるため、事前に生成された静止画像に最適です。
- SVG形式をラスター形式の代わりに使うべきなのはどのような場合ですか？
- ロゴ、アイコン、イラスト、および幾何学的形状で構成されるあらゆるグラフィックには、必ずSVGを使用してください。SVGは解像度に依存せず（あらゆる画面サイズで鮮明に表示されます）、シンプルなグラフィックであればファイルサイズが非常に小さく、あらゆる寸法に完璧に拡大縮小できます。ただし、写真にはSVGは適していません。
- 画像フォーマットはSEOに影響しますか？
- はい、間接的に影響します。ページの読み込み速度はGoogleのランキング要因の一つであり、画像フォーマットはページの容量に直接影響します。JPGやPNGではなくWebPやAVIFといった最新のフォーマットを使用することで、Core Web Vitals（特にLCP）の指標が向上し、検索ランキングに良い影響を与えます。