WebPの仕組みを図にした。1つの形式で3役を担う

• WebPは非可逆・可逆・透過・アニメを1形式で持てる
• だからJPEGとPNGとGIFの置き換えになる
• 弱点は、古い環境で表示できないこと

画像形式を調べていると必ず出てくるのがWebPだ。「とりあえずWebPにすればいい」と言われがちだが、なぜそう言われるのかを図にした。

1つで3役を担える

JPEGは捨てる形式、PNGは捨てない形式で、用途が分かれていた。WebPはどちらの方式も持っている。

MDNの一覧でも、WebPの圧縮方式は「可逆・非可逆の選択可能」、透過は対応、アニメーションも対応となっている。

どこで小さくなるのか

MDNは用途ごとの推奨で、写真について「WebPはJPEGより圧縮率が優れるが、互換性はJPEGが高い」としている。

アニメーションについては、推奨の順がWebP、AVIF、APNG、GIFとなっており、理由として古い形式の色数の制限が挙げられている。

つまりWebPの利点は同じ見た目で容量が小さくなることであって、画質が上がるわけではない。

弱点は2つ

1. 古い環境では表示できない

対応していないブラウザでは、画像が出ないか、壊れた印が出る。代わりの画像を一緒に置く必要がある。

MDNが推奨している書き方がこれだ。

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

上から順に試し、どれも扱えなければ最後の img に落ちる。新しい形式を先に、互換性の高い形式を後ろに置く形になる。

この書き方なら alt も width・height も img 側に書けるので、読み込み前に場所を確保する指定が効く。

2. 読み込み途中の粗い表示に対応していない

MDNの記載では、WebPはプログレッシブ表示に対応していない。

JPEGには、読み込みの途中で粗い絵が先に出て、だんだん鮮明になる方式がある。WebPにはそれが無いので、読み終わるまで何も出ない。回線が遅い環境で大きな画像を置くと、体感が変わる場合がある。

WordPressで使う場合

画像を差し替える前に確認することがある。

• 既存の記事の画像URLがどうなるか — 変換で拡張子が変わると、本文中のリンクが切れることがある
• 変換を担うのが何か — プラグインか、サーバー側か。両方効いていると二重に処理される
• 元の画像を残すか — 戻す可能性があるなら残す

とくに2番目を見る。最適化系のプラグインは互いに干渉しやすく、配信の段で思っていない変換がかかることがある。

まず測ること

形式を変える作業は、効果が数字に出るかどうかで判断する。容量の合計ではなく、最初の画面に出る1枚を見る。そこが表示速度の指標の対象になる。

測り方と、縮める順番は生成した画像をそのまま載せたら重かった。軽くする手順を決めたに書いた。比率を先に決めておくと作り直しが減る話は画像の縦横比を決めてから作るようにしたら、作り直しが減ったにある。

まとめ

• WebPは非可逆・可逆・透過・アニメを1形式で持てる
• だからJPEG・PNG・GIFの置き換えになる
• 利点は同じ見た目で容量が小さくなること。画質が上がるわけではない
• 古い環境では表示できないので、picture で代わりを置く
• プログレッシブ表示に対応していない。読み終わるまで出ない
• WordPressでは、変換を担うものが二重になっていないか先に確認する

出典

• MDN「ウェブで使用される画像ファイルの種類と形式」（圧縮方式、透過、アニメーション、用途別の推奨、picture による代替）

図は本記事のために作成したもの。ブラウザの対応状況は変わるため、最新の記載を確認すること。本記事は2026年10月13日時点の内容に基づく。