🖼️ WebP画像
Google が開発した形式。PNG・JPEG より高圧縮で現行ブラウザは全対応
102,400 bytes
image/webp
104,857,600 bytes
image/webp
10,240 bytes
image/webp
10,485,760 bytes
image/webp
1,048,576 bytes
image/webp
26,214,400 bytes
image/webp
512,000 bytes
image/webp
52,428,800 bytes
image/webp
5,242,880 bytes
image/webp
WebP画像について
WebP は Google が開発した画像フォーマットです。可逆・非可逆の両方の圧縮に対応し、同等の画質で PNG より約 26%、JPEG より約 25〜34% 小さくなります。MIME タイプは image/webp で、現在の主要ブラウザはすべて対応しています。
10 KB から 100 MB まで各サイズを用意しています。ブラウザ対応の確認、WebP 変換処理のテスト、画像最適化コンポーネントの検証に使えます。
WebP の特徴
- 可逆・非可逆の両方に対応 — 用途に応じて選べる
- 透過とアニメーションの両方に対応 (PNG と GIF の役割を兼ねられる)
- RIFF コンテナ形式のため、先頭 4 バイトだけで判定すると他の RIFF 系形式と誤認する
- 古いサーバー側ライブラリ (旧 GD / ImageMagick) では未対応のことがある
PNG・WebP・AVIF の詳細な比較は PNG vs WebP vs AVIF 徹底比較 をご覧ください。
関連するリファレンス・記事
📖 つまずきやすいポイント
1 KB から 100 MB まで、PNG / JPEG / GIF / WebP を各サイズで用意しています。アップロード上限の確認、サムネイル生成、画像ライブラリの検証に使えます。形式ごとの違いは上の解説にありますが、実装で踏むのはたいてい形式に依らない共通の罠です。
| ケース | 何が起きるか | どうする |
|---|---|---|
| 小さい画像なのにメモリを使い切る | 必要なメモリはファイルサイズではなく展開後のピクセル数で決まります。20 KB の PNG でも 10,000 × 10,000 px なら、RGBA で約 400 MB を要求します。 | サイズ上限とは別に寸法の上限を設けます。デコード前にヘッダだけ読んで幅 × 高さを確認できます (PHP は getimagesize()、Python の Pillow は Image.open() の直後、load() を呼ぶ前)。 |
| 縦で撮った写真が横倒しで表示される | カメラは本体を回さず、EXIF の Orientation タグに「どちら向きか」だけを書きます。タグを読まない処理系では、撮ったままの向きで出ます。 | サムネイル生成の前に Orientation を読んで実際に回転させ、タグを消します。回転だけしてタグを残すと、対応ブラウザで二重に回ります。中身の確認は EXIF ビューアで。 |
| 変換したらアニメーションと透過が消えた | ブラウザの Canvas を通す変換は1 フレームしか扱えません。アニメーション GIF は 1 コマ目の静止画になります。JPEG へ変換すれば透過は白か黒に潰れます。 | アニメーションを保ったまま変換するなら、Canvas ではなく ImageMagick や libvips のような複数フレームを扱える処理系が要ります。透過を残すなら出力先は PNG か WebP を選びます。 |
| 画像に見えるファイルが画像ではない | 拡張子も Content-Type も送信側が名乗る値です。末尾に別のデータを連結した画像は、ビューアでは普通に開きます。 |
先頭バイトで判定したうえで、再エンコードして保存します。読み込んで書き出し直せば、余分なデータも埋め込まれたメタデータも落ちます。バイト列は マジックバイト表を参照。 |
ユーザーが投稿した画像をそのまま配信する場合、SVG だけは扱いが違います。SVG は画像ではなくスクリプトを実行できる文書なので、同一オリジンで配信するとクロスサイトスクリプティングの経路になります。別ドメインから配信するか、Content-Security-Policy と Content-Disposition: attachment で止めてください。