WebP画像を圧縮して軽くする方法｜可逆/非可逆の使い分けとブラウザ対応
WebP は Web 表示用に設計された画像形式で、JPG / PNG と比較して同等品質でも軽量化しやすい特徴があります。本記事では 可逆/非可逆モードの使い分け、JPG・PNG との比較、ブラウザ対応とフォールバック実装のポイントを実用ベースで解説します。WebPを含む画像形式の選び方を見る (Pillar) もあわせて参照してください。
1. WebP 圧縮が向いている画像
WebP は Google が開発した Web 配信向け画像形式で、MDN の画像形式ガイド によれば可逆 (lossless) と非可逆 (lossy) の両モード、透過 (アルファチャンネル)、アニメーションに対応します。同等の視覚品質を保ちながら、JPG/PNG より軽量化しやすいケースが多いのが特徴です。
WebP が特に向いている画像
- Web サイトの写真: 非可逆モードで JPG より軽量化しやすい (LCP 改善に寄与)
- 透過が必要な画像: 可逆/非可逆どちらでも透過を維持できる (PNG より軽くなる傾向)
- イラスト・ロゴ: 可逆モードで PNG より軽量化できることが多い
- シンプルなアニメーション: GIF より軽量化できる場面が多いが、用途は限定的
WebP が向いていないケース
- 古いブラウザや一部メール環境への配信 (フォールバックが必要)
- 印刷用途 (印刷ワークフローでは JPG / TIFF / PDF が一般的)
- 編集を繰り返す素材 (中間ファイル) — 編集中は可逆形式、配信時に WebP 変換が堅実
2. JPG・PNG との違い (可逆/非可逆/透過)
| 項目 | WebP | JPG | PNG |
|---|---|---|---|
| 圧縮モード | 可逆/非可逆 両対応 | 非可逆のみ | 可逆のみ |
| 透過 (アルファ) | ○ 両モードで対応 | × 非対応 | ○ 標準対応 |
| アニメーション | ○ 対応 | × | × (APNG は別仕様) |
| 典型的なファイルサイズ (同等品質) | 軽量化しやすい | 中程度 | 大きい (写真用途) |
| 主要ブラウザ対応 | 広く対応 | 全環境対応 | 全環境対応 |
| 主用途 | Web 配信 | 写真・SNS | 透過・ロゴ・図表 |
可逆 (lossless) と非可逆 (lossy) の選び方
WebP では出力時に可逆/非可逆を選べます。写真や Web 配信用は非可逆で容量重視、ロゴ・透過素材・編集中の中間ファイルは可逆で画質厳密保持、というのが基本です。本サイトの 画像圧縮ツール は WebP 出力時に品質スライダーで非可逆圧縮レベルを指定できます。
3. ブラウザ対応と表示確認
WebP は現在、主要なモダンブラウザ (Chrome / Firefox / Safari / Edge の最新版) で広く対応しています。web.dev の画像パフォーマンス解説 も WebP の利用を推奨しています。
確認しておきたい配信先
- 古いブラウザ (IE11 等の旧版): WebP 非対応のため、JPG/PNG フォールバックが必要
- メーラー / メールビューア: 一部のメールクライアントでは WebP 添付画像が表示できないことがある
- SNS / メッセージング: プラットフォーム側で再エンコードされることが多く、WebP のメリットが活かされにくい
- 印刷ワークフロー: WebP 非対応のソフトもあるため、印刷用は JPG / PDF 推奨
実機での表示確認手順
- 配信先 (Web サイト / メール / SNS) で実際に開いて表示確認
- 主要ブラウザ (Chrome / Safari / Edge) で表示確認
- 古い OS / 旧版ブラウザでの表示は事前に把握 (アクセスログのブラウザ統計から判断)
- 透過 WebP の場合は背景色を変えて意図通り表示されるか確認
4. 画質を保って圧縮する手順
本サイトの 画像圧縮ツール で WebP 形式の圧縮を行う手順。Canvas API の canvas.toBlob(callback, 'image/webp', quality) でローカル変換します。
- 元画像を選択: PNG・JPG・WebP・BMP・GIF のいずれもドロップで投入可
- 品質を指定: スライダーで非可逆圧縮レベルを 10-100% で指定 (写真は 75-85%、Web 配信は 60-75% が目安)
- 圧縮実行: ブラウザ内 Canvas API で再エンコード (サーバー送信なし)
- 容量と画質を比較: 圧縮前後を 100% 表示で目視確認、想定外の劣化がないかチェック
- ダウンロード: WebP 形式で保存。元ファイル名 +
_compressed.webpが付与
JPG/PNG を WebP に変換 (フォーマット変換) したい場合は 画像変換ツール で 出力形式 = WebP を選択してください。詳細は JPG 圧縮で画質劣化を抑える方法 の品質設定考察も参考になります。
5. Web サイトで使う時の注意点 (フォールバック)
WebP 非対応の環境にも配慮する必要がある場合、<picture> 要素 でフォールバックを実装します。ブラウザは上から順に source を評価し、対応する最初の形式を表示します。
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="ヒーロー画像" width="1200" height="630">
</picture>このパターンでは AVIF 対応ブラウザは AVIF、対応していなければ WebP、それも対応していなければ JPG にフォールバックします。レスポンシブ画像ガイド もあわせて参照してください。
フォールバック実装で気をつける点
<img>のwidth/height属性を入れて Cumulative Layout Shift (CLS) を防ぐalt属性は SEO・アクセシビリティ両面で必須- 同じ画像の 3 形式 (AVIF / WebP / JPG) を用意するため、生成・保管・キャッシュ管理のコストは増える
- サーバー側で Accept ヘッダ判定して 1 URL から複数形式配信する CDN 設定も選択肢 (Cloudflare Image Resizing 等)
- 関連: Core Web Vitals 画像最適化 — LCP / CLS 改善視点
よくある質問
WebP をさらに圧縮すると劣化しますか？
非可逆モードで圧縮済みの WebP をさらに圧縮すると、JPG 同様に世代喪失で画質が累積劣化します。可逆モードで圧縮した WebP は元のピクセル情報を保持しているため、再度可逆で圧縮しても劣化しません。圧縮済み素材を扱う場合は元の (可逆) 形式で保管し、配信時に都度圧縮するのが安全です。
WebP はすべてのブラウザで使えますか？
現在は主要ブラウザ (Chrome / Firefox / Safari / Edge の最新版) で広く対応していますが、古いブラウザや一部のメール環境では表示できないことがあります。Web サイトで配信する場合は <picture> 要素や CSS の image-set でフォールバック (JPG / PNG) を併用するのが堅実です。
PNG から WebP に変換すると透過は残りますか？
はい、WebP はアルファチャンネル (透過) に対応しているため、透過 PNG を WebP に変換しても透過情報は保持されます。本サイトの /convert は透過維持での変換に対応しています。可逆モードで変換すれば見た目も劣化しません。
WebP と AVIF はどちらを優先すべきですか？
互換性重視なら WebP、最高圧縮率重視なら AVIF が一般的な選択です。WebP は主要ブラウザ対応が安定、AVIF はさらに高圧縮ですが対応がまだ広がりつつある段階。Web サイトでは <picture> 要素で AVIF → WebP → JPG/PNG とフォールバックを並べる構成が堅実。詳細は AVIF と WebP の比較記事 を参照してください。
関連記事: AVIF と WebP はどちらが安全？ ・ JPG 圧縮で画質劣化を抑える方法
戻る: 画像・QRツール完全ガイド (圧縮の科学セクションへ)
一次情報源: MDN: 画像形式ガイド ・ web.dev: 画像パフォーマンス ・ MDN: picture 要素 ・ MDN: レスポンシブ画像ガイド ・ MDN: Canvas.toBlob() ・ WebP 仕様は Google による設計、ブラウザ対応状況は時系列で変化するため最新の状況は MDN Browser Compatibility Data や Can I use で確認してください