WebPとは？メリット・デメリットと圧縮率や対応ブラウザを解説

WebPとは2010年公開のWeb表示用画像ファイル形式

WebPはGoogleが2010年9月30日に、Chromium Blogの記事「WebP, a new image format for the Web」で発表した画像形式です。写真を保存するためではなくWebページの画像を速く届けるために作られており、JPEGやPNGとは目的が異なります。

画像はWebページ内でデータ量の大半を占めます。Googleは、ほとんどのWebページでバイト数の60〜65%が画像であるとしています。

ページの読み込み時間はデータ量に左右されるため、画像を軽くすることはページ表示を速くするうえで効果の大きい手段です。WebPはこの考えに沿って、画像を軽くする目的で作られた形式です。

WebPファイルはVP8またはVP8Lという形式の画像データをRIFFというコンテナに格納したもので、中身の構造も公開されています。仕様は以下の3文書として公表されており、参照実装のlibwebpも配布されています。

• RIFF Container Specification
• RFC 6386
• WebP Lossless Bitstream Specification

読み方は「ウェッピー」でGoogleが公開しライセンス不要

WebPは「ウェッピー」と読みます。また、Mozillaが記載しているこの形式の正式な名称はWeb Picture formatで、WebとPicture（画像）を組み合わせたこの名前にWeb向けであることがそのまま表れています。

使ううえでライセンス料は発生しません。Mozillaの画像形式リファレンスによると、WebPはライセンスが不要でソースコードも公開されているとのこと。特許料や利用申請を気にせず、個人サイトでも商用サイトでも同じように使うことができます。

拡張子は「.webp」でMIMEは「image/webp」

保存されたファイルの末尾は.webpです。ブラウザやサーバーが形式を見分けるときに使う識別子（MIMEタイプ）はimage/webpで、開発者ツールの通信ログにこの文字列が出てきたら、その画像はWebPで配信されています。

対応している画像の大きさには上限があります。Mozillaによると最大寸法は16,383×16,383ピクセルとのこと。Web用の画像でこの上限に達することはまずありませんが、大判のスキャン画像やポスター原寸のデータを使うときは、先に確認しておくと安全です。

色の持ち方も、非可逆と可逆のどちらで圧縮するかによって変わります。非可逆ではY'CbCr 4:2:0という明るさと色味を分けて記録する形式を8ビットで使い、可逆では赤・緑・青と透明度を8ビットずつ持つARGBを使って1ピクセルあたり32ビットになります。

形式を変えずに容量だけを落としたい場合は、WebPへの変換ではなく画像圧縮を使います。画像圧縮なら拡張子はJPEGやPNGのまま残ります。

JPEG・PNGとの差は圧縮・透過・アニメーションの3点

WebPの特徴は、なじみのあるJPEGやPNGと並べると分かりやすくなります。その前に、圧縮の種類を表す用語を2つ取り上げましょう。つまり、非可逆圧縮はデータを一部捨てて容量を減らす圧縮で、捨てた分は元に戻らない一方、可逆圧縮は捨てずに容量を減らす圧縮で、元の画像を完全に復元できます。

JPEGは非可逆だけを持ちPNGは可逆だけを持つのに対して、WebPは両方を持ちます。この一点が、3点ある差の1つ目です。

透過というのは背景を透明にして下の色を透かせる仕組みのことです。従来は透過が必要ならPNGを使い、写真ならJPEGを使うという使い分けをしていました。

WebPは非可逆のまま透過を持てるため、PNGとJPEGを使い分ける必要がありません。写真を軽くすることとロゴの透過を、1つの形式で両立できます。

アニメーションも同じです。これまでGIFで作っていた短いループ表示をWebPで置き換えられるため、透過と同様に素材ごとに形式を分ける必要がなくなります。

JPEGとPNGのどちらを選ぶかという判断そのものについては、PNGとJPEGの違いは圧縮と透過、写真とスクショで選び分ける基準で整理しています。他の形式も含めて一覧で比較したい場合は画像拡張子9種類の違いと、JPEG・PNG・WebPなどを用途で選ぶ方法に9種類を並べた表があります。

圧縮率が高く同じ画質でもJPEGより25〜34%小さい

WebPを選ぶ理由の中心はファイルサイズです。実際、Googleは公式に可逆圧縮ならPNGより26%小さく、非可逆圧縮なら同等の画質でJPEGより25〜34%小さいと発表しています。

透過を加えたときの増え方も公表されており、可逆のWebPに透過を持たせてもファイルサイズの増加は22%だけです。非可逆RGBの圧縮を許容できる場合、透過を持つWebPはPNGのおよそ1/3のサイズになります。

Googleは元画像をPNGとしSSIMで画質をそろえている

「25〜34%」という数値は、GoogleがWebP Compression Studyとして公開した比較実験の結果です。計測したのはWebPを作ったGoogleで、第三者機関による検証ではありません。したがって、お持ちの画像でもこの数字どおりになるかは、測定条件を見ないと判断できません。

まずPNGの元画像を選んだ品質QでJPEGに変換し、そのときのSSIMを記録します。次に同じSSIMにできるだけ近づく設定で同じ元画像をWebPに変換し、両者のファイルサイズを比較します。

つまり画質をそろえてからサイズを比較しているのであって、サイズをそろえて画質を比較しているのではありません。比較する向きが逆になると同じ数字でも意味が変わります。

結果としてWebPのサイズをJPEGで割った比は、0.66〜0.75の範囲に分布しました。この幅が「25〜34%小さい」という表現になっています。

測定条件が異なるため画像ファイルの圧縮率が同じとは限らない

この数値がそのままご自身の画像でも成り立つとは限らない理由は、測定条件にあります。ずれる要因は3つあります。

実験の元画像はPNGでした。すでにJPEGとして保存された写真をWebPに変換する場合は、変換元の画像が実験とは異なります。

データセットも風景や人物の写真が中心で、平坦な色面の多いスクリーンショットや図版とは性質が異なります。使われたlibwebpは0.1.2で、現在配布されているものより前のバージョンです。

したがって「WebPにすれば必ず3割小さくなる」ではなく「ある条件で同じ画質にそろえて比較したところ平均してそれくらい小さくなった」と受け取るのが正確です。実際にどれだけ容量が小さくなるかは、お持ちの画像を変換して調べてください。

メリットは軽く透過もアニメーションも1つの形式で持てる

WebPの利点は、ファイルの軽さ以外にもあります。Google開発者向け資料の機能一覧にあるとおり、1つの形式で幅広い用途をまかなえることも利点です。

• ファイルが軽い: 可逆圧縮ではPNGより26%軽く、非可逆圧縮では同画質のJPEGより25〜34%軽くなります（いずれもGoogleによる比較試験の値で、測定条件は前掲のとおりです）。ほとんどのWebページではバイト数の60〜65%を画像が占めるため、画像を軽くした効果はページ全体にも大きく表れます。
• 透過を安く持てる: 可逆で透過を加えても、増加は22%分だけです。非可逆RGBでの圧縮を許容できるなら、透過付きでもPNGの約1/3のサイズになります。
• アニメーションを持てる: トゥルーカラーのアニメーション画像に対応し、GIFやAPNGより軽くできます。
• 撮影情報や色の設定を保持できる: EXIF・XMPのメタデータを持てるほか、ICCプロファイルを埋め込めます。
• 形式を選び分けずに使うことができる: 写真もロゴもアニメーションも同じ形式で置けるため、素材ごとに形式を選ぶ手間がなくなります。

JPEG・PNG・GIFがそれぞれ得意としていた役割を、WebPなら1つの形式でまとめて果たせます。Webページに置く画像なら、素材の種類ごとに保存形式を選び分ける手間は大きく少なくなります。

デメリットは非可逆で保存し直すと画質が戻らなくなる

WebPにも弱点はあります。導入するかどうかを判断する前に、次の制約を4つ押さえておいてください。

• 非可逆で保存し直すと画質が戻らない: 非可逆圧縮は捨てたデータを復元できません。編集と保存を繰り返すほど劣化が蓄積します。
• 対応していないソフトがまだある: ブラウザの対応は進みましたが古い画像編集ソフトやビューアーではWebPをそのまま開けない場合があります。
• 画像の大きさに上限がある: 16,383×16,383ピクセルを超える画像には対応していません。
• 古い環境まで含めると対応は十分でない: 主要ブラウザの最新版では広く対応していますが、古いバージョンまで遡ると対応は行き届いておらず、JPEGかPNGのフォールバックを用意しておくと安全です。

4つあるデメリットのうち実務で困りやすいのは1点目で、編集途中のファイルをWebPで上書きし続けるのが最も避けたい使い方です。元の画像は可逆の形式で保管しておき、書き出しの最後にWebPへ変換する運用にすれば、劣化の蓄積は避けられます。

JPEGとPNGが不要になるわけではありません。編集の原本は可逆の形式で持つほうが安全です。また、ファイルを他の人に提供するときは相手のソフトがWebPを開けるとは限りません。

2026年9月時点でChromeなど主要ブラウザとOSが対応

対応状況は年ごとに変わっていくため、いつの情報かを添えて調べる必要があります。以下は2026年9月時点で各ベンダーが公式に出している内容です。

主要ブラウザの最新版だけを見るなら、対応しているかどうかを気にする段階はすでに終わっています。かつてはブラウザの対応が遅れていて導入しにくい時期もありましたが、いまは3社の主要ブラウザがどれも対応済みです。

ただしMozillaの「全バージョン」という書き方では、バージョンの下限を読み取れません。GoogleのFAQは対応が始まったバージョンまで掲載しており、下限はFirefoxなら65、Safariなら14です。Firefox 65より前やSafari 14より前のバージョンを使う人が訪れるサイトでは、フォールバックを用意しておく必要があります。

Safariは14以降でmacOSもBig Sur以降が必要

特に気をつけたいのがSafariです。AppleはSafari 14でWebPに対応しました。

macOS版のSafariでは、ブラウザだけでなくOSのバージョンも条件になります。Safari 14以降に加えて、macOS Big Sur（11）以降も必要です。

つまりSafariだけを新しくしても、OSが古いままではWebPを表示できない場合があります。古いMacを使い続けている人が閲覧するサイトなら、macOSのバージョンも確認しておくといいでしょう。

対応していない環境にはpicture要素で別の形式も用意

閲覧する人の環境がWebPに対応していない場合は、HTMLのpicture要素で別の形式も一緒に指定できます。

<picture>
  <source srcset="sample.webp" type="image/webp">
  <img src="sample.jpg" alt="サンプル画像">
</picture>

picture要素でこの書き方にしておくと、WebPを表示できるブラウザにはWebPが、表示できないブラウザにはJPEGが表示されます。どちらの環境でも画像は出るため、対応状況を気にせずWebPを使うことができます。

軽さは条件つきだが対応は主要ブラウザで広い

WebPはGoogleが2010年に公開したWeb表示向けの画像形式です。非可逆と可逆の両方を1つの形式で持ち、透過もアニメーションも使うことができるため、JPEG・PNG・GIFが分担していた役割をまとめて果たせます。

ファイルサイズは可逆圧縮ならPNGより26%小さく、非可逆圧縮なら同じ画質のJPEGより25〜34%小さいとGoogleが公表しています。ただしこの25〜34%はGoogleが元画像にPNGを使い標準データセットで計測した条件つきの値で、お持ちの画像で同じ比率になるとは限りません。

2026年9月時点ではGoogle・Mozilla・Appleの公式ページはいずれも、主要ブラウザが対応済みだとしています。macOSのSafariだけはOS側にも条件があり、対応が始まる前のバージョンを使う人が訪れるサイトではフォールバックが必要です。

お持ちのJPEGやPNGをWebPにして効果を試したい場合や、受け取ったWebPをJPGに戻したい場合は、WebP変換ツールで、ブラウザ内だけで変換できます。変換の手順を順に追いたい場合はWebP変換のやり方とJPG・PNGとの相互変換を無料ツールで解説にまとめています。