用語

WebP

WebPはGoogleが開発した画像形式で、可逆圧縮と非可逆圧縮の両方に対応します。同程度の見た目なら、PNGJPGより小さくなることがよくあります。

WebP、PNG、JPGの違い

WebPは、可逆と非可逆を1つの形式で選べる柔軟性を持ちます。

可逆WebPは、見た目を変えず、PNGよりおよそ20〜30%小さくなる場合があります。どちらも透明部分に対応しますが、画像によってはWebPのほうが効率よく圧縮できます。文字やUIの鋭い輪郭があるスクリーンショットも、可逆WebPなら画素を変えずに保存できます。

非可逆WebPは、JPGと同程度または小さい容量で、目立つ乱れを減らせる場合があります。JPGは、スクリーンショットに多い鋭い輪郭や文字の周囲で乱れが目立ちます。WebPは、JPG特有のブロック状の乱れにつながる8×8ブロックだけに制限されない圧縮方式を使います。

一方、PNGとJPGは、ほぼすべての画像ビューアー、編集ソフト、サービスで扱えます。WebPはブラウザでは広く対応していますが、古いデスクトップアプリ、メールソフト、一部のSNSでは対応しない場合があります。

WebPが使われる場面

  • Webパフォーマンス: 小さいファイルによって、ページの読み込み時間と通信量を減らせます。CDNや画像最適化サービスが自動でWebPへ変換する場合もあります
  • スクリーンショットのワークフロー: 可逆WebPで書き出せる撮影ツールなら、文字とUIの鮮明さを変えず、アーカイブ容量を抑えられる場合があります
  • プログレッシブWebアプリ: 小さい容量、透明部分、アニメーションへの対応を組み合わせられ、アプリに近いWeb体験の素材に使えます
  • ドキュメントとナレッジベース: Web上のドキュメントへ埋め込む画像で、画質と容量のバランスを取りやすくなります
  • 自動撮影処理: 数百枚を一括生成する場合、WebPを使うと保存容量と転送量を大きく減らせることがあります

ブラウザとツールの対応

WebPは、Chrome、Firefox、Safari 14以降、Edge、Chromium系ブラウザで使えます。現在のWeb利用者の大部分をカバーします。

制作ツール側の対応も広がっています。多くの現代的な画像編集ソフト、デザインツール、撮影ツールがWebPを開き、保存できます。OS標準の対応はバージョンによって異なります。現在のmacOSとWindowsでは標準画像ビューアーから扱えますが、古いバージョンには更新が必要な場合があります。

幅広い互換性が必要なら、WebPを主な形式にし、対応しない環境向けにPNGまたはJPGを用意する方法があります。WebPを標準保存にし、別形式へ書き出せる撮影ツールもあります。

よくある失敗

  • 文字中心の画像へ非可逆WebPを使う: JPGと同じように、鋭い輪郭の周囲へ細かな乱れが出る場合があります。読める文字を保つなら、可逆WebPを使います
  • 受け手が必ず開けると思う: ブラウザ対応は広くても、一部のメールソフト、古いオフィス製品、従来型システムでは表示できません。相手の環境を確認します
  • 可逆モードを使わない: WebPは非可逆圧縮だけではありません。スクリーンショットでは、PNGの代替候補になる可逆WebPを優先します
  • JPGから変換すれば画質が戻ると思う: 非可逆JPGで失った画質は、WebPへ変換しても戻りません。最良の結果には、元の可逆画像から変換します

よくある質問

すべてのブラウザがWebPに対応していますか?

Chrome、Firefox、Safari、Edgeなど、現在の主要ブラウザはWebPに対応しています。非常に古いバージョンでは対応しない場合がありますが、現在の世界のWebトラフィックでは対応範囲が95%を超えます。対象環境が決まっている場合は個別に確認してください。

WebPでPNGとJPGの両方を置き換えられますか?

多くの場合は候補になります。可逆WebPはPNGより小さくなりやすく、非可逆WebPはJPGと同程度の画質で容量を減らせる場合があります。主な注意点は、ブラウザ外のツールやサービスでの対応です。

WebPは透明部分に対応しますか?

はい。非可逆と可逆の両方でアルファ透明度を使えます。JPGは透明部分に対応しません。

WebPは可逆圧縮ですか、非可逆圧縮ですか?

両方に対応します。JPGに近い非可逆圧縮と、PNGに近い可逆圧縮から、画質と容量の要件に応じて選べます。

スクリーンショットにWebPを使うべきですか?

可逆WebPは、PNGのように文字やUIの輪郭を保ちながら、ファイルを一般に20〜30%ほど小さくできる場合があります。受け手のツールが対応するなら有力な選択肢です。

出典

関連資料

WebPとは | 用語集 | Shotomatic