WebP圧縮：なぜJPEGより優れているのか
By Artur更新 1分で読めます
JPEGは30年間デフォルトの画像フォーマットだった。あらゆるところにある。すべてのカメラ、すべてのスマートフォン、すべてのウェブサイトが使っている。
しかしJPEGは古くなりつつある。同じ品質でより小さなファイルを生成する新しいフォーマットがある。透明度をサポートする。写真もグラフィックもうまく扱える。そしてすべてのモダンブラウザが対応している。
そのフォーマットがWebPだ。なぜウェブ画像でJPEGに勝るのか、そして使い始める方法を解説する。
数字は明確だ。WebPは同じ視覚品質でJPEGより25-35%小さいファイルを生成する。
GoogleはWebPを作成した際に広範なテストを行った。100万枚の画像データセットで、WebPの非可逆ファイルは同等のJPEGファイルより25-34%小さかった。可逆圧縮では、WebPはPNGより26%小さかった。
実際にはどう見えるか？品質80でJPEGとして圧縮された商品写真は200KBかもしれない。同じ画像をWebPで同じ視覚品質にすると約140KBだ。画像1枚あたり60KB節約できる。
これをサイト全体にスケールする。10枚の商品画像があるページは600KB節約する。全記事で50枚の画像があるブログは3MB節約する。数千の商品がある通販サイト？帯域の節約はすぐに積み上がる。
これらは理論上の数字ではない。実際の圧縮比較から得られたものだ。節約効果はさまざまな種類の写真で一貫している。ポートレート、風景、商品写真、料理写真。WebPはファイルサイズで一貫してJPEGに勝つ。
さまざまな圧縮方法の仕組みについてより深く知りたい場合は、画像圧縮の完全ガイドで基本をカバーしている。
JPEGは1992年に設計された。離散コサイン変換（DCT）という技術を使って8x8ピクセルブロックで画像を圧縮する。当時としては画期的だったが、ブロックベースのアプローチは低品質設定で目に見えるアーティファクトを生む。あのブロック状のピクセル化した斑点。JPEG品質を下げすぎると現れるやつだ。
WebPはより現代的なアプローチを使う。VP8ビデオコーデック（WebMビデオと同じ技術）に基づいている。固定の8x8ブロックの代わりに、WebPは可変サイズのブロックを使う。周囲のブロックに基づいて各ピクセルブロックがどう見えるか予測する。予測と実際の画像の差分だけを保存する。
この予測ベースのアプローチはずっと効率的だ。WebPは同じ画像データをより少ないバイトで記述できる。
WebPはシャープなエッジの処理も優れている。JPEGはテキストや硬いエッジの周りに「リンギング」アーティファクトを生むことが多い。WebPの予測モデルはこれらのトランジションをよりクリーンに処理する。だからWebPはより小さいファイルサイズでもJPEGより見栄えが良い。
可逆圧縮では、WebPは複数の技術を組み合わせている。変換コーディング、空間予測、色空間変換、効率的なエントロピーコーダー。これらを合わせることで、PNGより25-30%効率的にロスレス画像を圧縮する。
実用的な結果は？同じか、より良い見た目のより小さなファイル。それがすべてだ。
はい。実用上、WebPはどこでも動作する。
2026年現在、WebPは世界のブラウザの97%以上でサポートされている。Chrome、Firefox、Safari、Edge、Opera、そしてすべての主要モバイルブラウザがWebPにネイティブ対応している。Safariが2020年（Safari 14）にサポートを追加し、最後の大きな未対応ブラウザだった。
WebPに対応していないブラウザはInternet Explorer（Microsoftが廃止済み）と、ほとんど誰も使っていない非常に古いモバイルブラウザだけだ。
現在のブラウザサポート：
| ブラウザ | WebPサポート |
|---|---|
| Chrome | 対応（2014年から） |
| Firefox | 対応（2019年から） |
| Safari | 対応（2020年から） |
| Edge | 対応（2018年から） |
| Opera | 対応（2014年から） |
| Samsung Internet | 対応 |
| iOS Safari | 対応（iOS 14から） |
セーフティネットが欲しい場合は、<picture>要素とJPEGフォールバックを使おう：
<picture>
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="写真の説明">
</picture>
ブラウザはWebPを選べる場合はWebPを使う。使えなければJPEGにフォールバックする。JavaScriptは不要。余分な複雑さもない。古いブラウザの2-3%のユーザーでも画像は表示される。
しかし2026年のほとんどのサイトでは、全員にWebPを安全に配信できる。
ほとんどのウェブ画像については、イエスだ。WebPは目に見える品質差なしにより小さなファイルを提供する。使わない理由はほとんどない。
ただし、他のフォーマットを維持した方が良い状況がいくつかある。
JPEGを維持する場面： 印刷用に画像を配布する場合や、古いデスクトップソフトウェアで開く可能性のある人とファイルを共有する場合。一部のフォトエディターや印刷サービスはJPEGを好む。ただしウェブではWebPが勝つ。
PNGを維持する場面： アーカイブや編集ワークフローのためにピクセルパーフェクトなロスレス圧縮が必要な場合。WebPロスレスも機能するが、PNGはデスクトップツールやデザインソフトウェアでより幅広くサポートされている。
AVIFを検討する場面： WebPよりさらに良い圧縮が必要な場合。AVIFファイルはWebPより20-30%小さい。ただしAVIFはエンコードが遅く、ブラウザサポートがやや少ない（~93%）。次のステップだが、今日の安全な選択はWebPだ。
SVGを使う場面： ロゴ、アイコン、シンプルなグラフィック。SVGはベクターベースで、あらゆるサイズに完璧にスケールする。シンプルな形状やテキストでは、どのラスターフォーマットよりも小さいのが普通だ。
標準的なウェブ用途 — 商品写真、ブログ画像、ヒーローバナー、サムネイル — はすべてWebPに変換しよう。ファイルサイズの節約は無料のパフォーマンス向上だ。そしてウェブサイト向け画像圧縮は最も簡単な速度改善の一つだ。
AVIFとWebPを徹底比較。ファイルサイズ、ブラウザ対応状況、エンコード速度、画質の違いを実データで解説。あなたの画像に最適なフォーマットが見つかります。
画像最適化でLCPスコアを改善。圧縮、モダンフォーマット、lazy loading、プリロード、Core Web Vitals改善の完全チェックリスト。
メール添付用の画像を圧縮して、ファイルサイズを最大90%削減する方法を解説。画質を落とさずに、容量制限を気にせず写真を送れるようになります。送信前の圧縮手順も紹介。
2026年の画像圧縮ツールを実際にテストして比較。圧縮率、一括処理、プライバシー対応など、あなたのワークフローに最適なツールが見つかります。無料ツールも充実。
小さい画像はより速いページを意味する。より速いページはより良いランキングを意味する。それだけシンプルだ。
Google PageSpeed Insightsは「次世代フォーマット」での画像配信を明確に推奨している。つまりWebPとAVIFだ。まだJPEGやPNGを配信しているなら、Lighthouse監査のたびに警告が表示される。
JPEGからWebPへの切り替えはCore Web Vitalsを直接改善する。最も恩恵を受ける指標はLargest Contentful Paint (LCP)だ。ヒーロー画像がLCP要素なら（通常そうだ）、30%小さいファイルは30%速く読み込まれることを意味する。LCPを0.5秒以上短縮できる可能性がある。
データが示すこと：
LCP以外にも、小さい画像はより少ない帯域を意味する。少ない帯域はより低いホスティングコストを意味する。トラフィックの多いサイトでは、節約効果は現実的だ。
そしてボーナス：Google画像検索はWebPファイルを問題なくインデックスする。画像は引き続き画像検索結果に表示される。WebPは発見可能性をまったく損なわない。
ワークフローに応じていくつかの方法がある。
オンラインツール。 最もシンプルな方法。JPEGをアップロードし、品質レベルを設定して、WebPファイルをダウンロード。CompressIMGはバッチ変換に対応している。最大20枚を一度にアップロードし、品質を選んで、すべてWebPでダウンロード。
ビルド時変換。 Next.js、Astro、Gatsbyなどのフレームワークを使っていれば、画像最適化は自動で行われることが多い。Next.jsのImageコンポーネントはビルド時に画像を変換・リサイズする。JPEGをアップロードすれば、訪問者にはWebPが配信される。
コマンドラインツール。 Googleのcwebpツールは個別ファイルを変換する。Sharp（Node.js）やPillow（Python）はコード内で変換を処理する。カスタムビルドパイプラインに便利だ。
CDNベースの変換。 CloudflareやImgixなどのサービスは画像をオンザフライで変換する。オリジナルのJPEGをアップロードすると、CDNが対応するブラウザにWebPを配信する。ビルドステップ不要。
ほとんどのコンテンツクリエイターや小規模チームにとって、オンラインツールが最速の方法だ。CMSやホスティング設定を変更する必要はない。アップロード前に画像を圧縮・変換するだけ。
どの品質設定を使うべき？ 写真にはWebP品質75-85が優れた結果を出す。WebP品質80はJPEG品質85と同等に見えることを覚えておこう。WebPの圧縮がより効率的だからだ。やや低い数値を使っても同じ視覚的結果が得られる。
JPEGに対するWebPの利点の一つは、透明度とアニメーションをサポートすることだ。JPEGはどちらもサポートしない。
透明度： WebPはPNGと同じようにアルファチャネルを処理する。完全に透明な背景、半透明のオーバーレイ、滑らかなアンチエイリアスのエッジが可能だ。しかしファイルサイズはPNGよりずっと小さい。透明WebPは通常、同じPNGより25-35%小さい。
これがWebPを優れたものにしている用途：
アニメーション： WebPはGIFのようにアニメーションをサポートするが、圧縮はずっと優秀だ。アニメーションWebPは同じGIFより30-50%小さくなりうる。256色の制限（GIFの制限）を超える色数もサポートするため、写真コンテンツではアニメーションWebPの方がずっと見栄えが良い。
シンプルなアニメーションやミームにはGIFでも問題ない。しかしファイルサイズが重要なら（ウェブでは常に重要だ）、アニメーションWebPがより良い選択だ。
この万能性がWebPを特別にしている。JPEGは写真を扱う。PNGは透明度を扱う。GIFはアニメーションを扱う。WebPは1つのフォーマットで3つすべてを扱い、すべてのケースでより良い圧縮を実現する。
完全にはまだだ。しかしウェブ向けには、WebPがデフォルトであるべきだ。
JPEGにはまだ役割がある。あらゆるデバイス、アプリ、サービスが理解するユニバーサルなフォーマットだ。メールで写真を送る、USBドライブでファイルを共有する、印刷業者と連携する場合、JPEGは依然として安全な選択だ。
しかしウェブサイトの画像は？2026年にJPEGの代わりにWebPを配信しない理由はない。ファイルは小さい。品質は同じか、より良い。ブラウザサポートはほぼユニバーサル。すべてのモダンCMSとフレームワークがWebPに対応している。
TinyPNG、Squoosh、CompressIMGの比較は、すべての主要圧縮ツールがWebPをサポートしていることを示している。特定のツールやワークフローに縛られることはない。
切り替えよう。画像は小さくなる。ページは速くなる。訪問者もGoogleもその違いに気づくだろう。
CompressIMGは画像をWebPに変換・圧縮する。JPEGをアップロードし、品質を設定して、25-35%小さいWebPファイルをダウンロード。無料でブラウザ上で直接動作する。
CompressIMG
画質を落とさず画像を圧縮。無料で高速、ブラウザで完結します。