WebP のメリットと対応状況 - 次世代画像フォーマットの実力
WebP とは - Google が Web のために設計した画像フォーマット
WebP は Google が 2010 年に発表した画像フォーマットです。VP8 動画コーデックの技術をベースに、静止画向けに最適化されています。非可逆圧縮と可逆圧縮の両方に対応し、アニメーションや透過もサポートする万能フォーマットです。JPEG、PNG、GIF の 3 つのフォーマットが担っていた役割を 1 つのフォーマットで代替できることが最大の特徴です。
Web パフォーマンスの改善を目的として開発されたため、ファイルサイズの削減に特に優れています。Google の公式発表によると、非可逆 WebP は JPEG より 25-34% 小さく、可逆 WebP は PNG より 26% 小さいとされています。実際のベンチマークでは、画像の内容によって 20-50% の範囲で削減率が変動しますが、ほぼすべてのケースで JPEG/PNG より小さいファイルが生成されます。
WebP の開発背景には、Google が運営する YouTube、Gmail、Google 検索などの大規模サービスにおける帯域幅コストの削減という動機があります。世界中で配信される画像のサイズを 25% 削減できれば、インフラコストの節約額は莫大です。この経済的動機が、Chrome ブラウザでの早期対応や、PageSpeed Insights での WebP 推奨につながっています。
WebP の技術的メリット - 圧縮効率と機能性の両立
WebP が優れている点を具体的なデータとともに見ていきます。単にファイルサイズが小さいだけでなく、機能面でも JPEG や PNG の制約を克服しています。
- 非可逆圧縮: JPEG 比で 25-34% のサイズ削減。同じ品質でより小さいファイルを生成します。VP8 のイントラ予測 (4x4 ブロック単位) により、JPEG の 8x8 DCT ブロックより細かい粒度で予測が行われ、ブロックノイズが軽減されます。特に低ビットレート (高圧縮) 時の画質劣化が JPEG より穏やかです。
- 可逆圧縮: PNG 比で 26% のサイズ削減。完全に元の画像を復元可能です。空間予測、カラーキャッシュ、LZ77 バックリファレンスを組み合わせた独自アルゴリズムにより、PNG の Deflate 圧縮を上回る効率を実現しています。
- 透過 (アルファチャンネル): PNG のような透過を、はるかに小さいファイルサイズで実現します。非可逆モードでもアルファチャンネルを保持できるため、「写真 + 透過」という PNG では巨大になりがちな組み合わせを効率的に扱えます。
- アニメーション: GIF の代替として使用可能。GIF より高画質 (フルカラー対応) かつ小サイズ (30-50% 削減) です。ループ回数やフレーム間遅延も制御できます。
- ICC プロファイル対応: sRGB 以外の色空間 (Display P3、Adobe RGB) の埋め込みに対応。カラーマネジメントが必要な用途でも使用可能です。
特に透過画像での優位性は顕著です。透過 PNG が 500KB になるような画像でも、WebP (非可逆 + アルファ) なら 100KB 以下に収まることが珍しくありません。EC サイトの商品画像 (白背景を透過にする用途) では、この差が数百枚の画像で積み重なり、ページ全体の転送量に大きく影響します。
ブラウザ対応状況 - 2024 年以降の実用性
2024 年時点で、WebP は主要ブラウザのほぼ全てでサポートされています。かつての「Safari が対応していない」という問題は 2020 年に解消され、現在は実用上の互換性問題はほぼありません。
- Chrome: バージョン 17 以降 (2012 年〜)。最も早くから対応しており、Google のサービスでは積極的に WebP が配信されています
- Firefox: バージョン 65 以降 (2019 年〜)。当初は対応に消極的でしたが、ユーザーからの要望と Web の実態を受けて対応
- Safari: バージョン 14 以降 (2020 年〜、macOS Big Sur / iOS 14)。Apple の対応により、WebP の実用性が飛躍的に向上しました
- Edge: バージョン 18 以降 (2018 年〜)。Chromium ベースに移行後は Chrome と同等の対応
- Samsung Internet: バージョン 4.0 以降。Android のシェアが高い地域では重要
Can I Use のデータによると、全世界のブラウザの 97% 以上が WebP をサポートしています。IE 11 のみが非対応ですが、Microsoft は IE のサポートを 2022 年に終了しているため、実質的に互換性の問題はありません。日本国内に限定しても、対応率は 96% を超えています。
ただし、メールクライアント (Outlook、Thunderbird の一部バージョン) や、古い画像編集ソフト (Photoshop CC 2019 以前) では WebP の表示・編集ができない場合があります。Web 配信以外の用途では、依然として JPEG/PNG が安全な選択肢です。
WebP のデメリットと制約 - 知っておくべき弱点
WebP は万能ではありません。導入前に知っておくべきデメリットと制約を正直に整理します。
- 最大解像度の制限: WebP の最大画像サイズは
16383x16383pxです。超高解像度の印刷用画像やパノラマ写真では、この制限に抵触する場合があります。JPEG には実質的なサイズ制限がないため (65,535 × 65,535 px)、大判印刷用途では JPEG が適しています。 - 色深度の制限: 非可逆 WebP は 8 ビット/チャンネル (24 ビットカラー) のみ対応。HDR コンテンツや広色域 (10 ビット以上) が必要な場合は AVIF が適しています。可逆 WebP は内部的に変換処理を行うため、元画像が 16 ビットの場合は精度が失われます。
- エンコード品質のばらつき: エンコーダの実装によって、同じ品質設定でも出力品質にばらつきがあります。
libwebp(Google 公式) が最も安定していますが、サードパーティの実装では最適化が不十分な場合があります。 - プログレッシブ表示の非対応: JPEG のプログレッシブモード (低解像度から段階的に表示) に相当する機能がありません。低速回線では、画像が完全にダウンロードされるまで何も表示されない体験になります。
- 画像編集ソフトの対応: Photoshop は 2022 年 (v23.2) から WebP をネイティブサポートしていますが、それ以前のバージョンではプラグインが必要です。GIMP、Affinity Photo は対応済みですが、一部の業務用ソフトでは非対応の場合があります。
これらの制約を踏まえると、WebP は「Web 配信に特化した最適化フォーマット」として位置づけるのが適切です。マスター画像は TIFF や PNG で保持し、Web 配信時に WebP に変換するワークフローが推奨されます。
WebP への移行判断 - コスト対効果の分析
既存サイトの画像を WebP に移行すべきかの判断基準です。移行にはビルドパイプラインの変更やフォールバック対応のコストが伴うため、効果とのバランスを見極める必要があります。
移行すべきケース:
- ページの読み込み速度を改善したい (画像が多いサイトでは LCP が 0.5-2 秒改善する場合がある)
- CDN の転送量コストを削減したい (画像転送量が 25-35% 削減される)
- Core Web Vitals (LCP) のスコアを上げたい (Google 検索ランキングに影響)
- モバイルユーザーの体験を改善したい (低速回線での恩恵が大きい)
- 画像枚数が多いサイト (EC サイト、メディアサイト、ギャラリーサイト)
移行の優先度が低いケース:
- 画像が少ないサイト (テキスト中心のブログ、ドキュメントサイト)
- 印刷用途の高品質画像を扱うサイト (TIFF や高品質 JPEG が適切)
- 写真編集のワークフローが確立されている環境 (RAW → TIFF → 最終出力)
- メールマガジンやニュースレター (メールクライアントの対応が不十分)
移行コストの見積もり:
- ビルドパイプラインへの WebP 生成追加: Sharp や ImageMagick で自動化可能。初期設定 2-4 時間程度
- HTML の
<picture>要素対応: テンプレートの修正が必要。規模に応じて 1-5 日 - 既存画像の一括変換: スクリプトで自動化可能。画像枚数に応じて数分〜数時間
- CDN キャッシュの更新: CloudFront のインバリデーションで対応。即日完了
WebP の実装方法 - HTML と自動変換パイプライン
Web サイトに WebP を導入する具体的な実装方法を解説します。フォールバック対応を含めた堅牢な実装パターンを紹介します。
HTML での配信 (<picture> 要素):
<picture> 要素を使えば、WebP 非対応ブラウザへのフォールバックも容易です。ブラウザは上から順に <source> を評価し、対応するフォーマットの最初のものを使用します。
<picture><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="説明" loading="lazy"></picture>
CSS での利用:
CSS の background-image で WebP を使う場合は、@supports ルールまたは Modernizr による機能検出が必要です。ただし、2024 年以降は対応率が 97% を超えているため、フォールバックなしで WebP を直接指定する判断も合理的です。
自動変換パイプライン (Node.js + Sharp):
ビルド時に画像を自動変換するパイプラインの構築が推奨されます。Sharp ライブラリを使えば、数行のコードで JPEG/PNG → WebP の変換が可能です。sharp(input).webp({ quality: 80 }).toFile(output) のように、品質パラメータを指定して変換します。Next.js や Nuxt.js などのフレームワークには画像最適化機能が組み込まれており、設定だけで WebP 自動配信が実現できます。
CDN レベルでの自動変換:
CloudFront + Lambda@Edge や Cloudflare の Image Resizing 機能を使えば、オリジンの画像を変更せずに、リクエスト時に WebP を動的生成できます。Accept ヘッダーで image/webp を含むリクエストにのみ WebP を返す仕組みです。既存サイトへの導入が最も容易な方法ですが、初回リクエスト時の変換コスト (レイテンシ増加) に注意が必要です。