2026年でもWebPを使う価値はある?
現在ではブラウザ対応が一般的になったため、疑問はWebPを使えるかどうかではなく、AVIFの登場によってWebPが不要になったかどうかに移っています。
はい、2026年でもWebPを使う価値は十分にあり、ウェブサイト上の画像において最も安全なデフォルトの選択肢であり続けています。ブラウザの対応は万全であり、同等の画質であればファイルサイズはJPEGより25〜35%小さく、AV1 Image File Format(AVIF)に取って代わられたわけでもありません。
かつてWebPに対する反対意見として挙げられていたのはブラウザの対応状況でしたが、その議論はすでに終わっています。Chrome、Firefox、Safari、Edgeはすべて、デスクトップとモバイルの両方でこのフォーマットを処理できます。現在の興味深い疑問は、AVIFによってWebPが不要になったかどうかに移っていますが、その答えは「まだ不要になっておらず、おそらく完全には不要にならない」というものです。
WebPは実際にどれくらい小さくなるのか
WebPは通常、見た目の画質が同等の場合、JPEGと比較して25〜35%、PNGと比較して20〜30%サイズを削減できます。この削減効果は、なだらかな領域のある写真や、平坦な色で構成されたグラフィックで最も大きくなります。
| 画像タイプ | 元のフォーマット | WebP変換後 | 削減率 |
|---|---|---|---|
| 製品写真 | JPEG 420 KB | 290 KB | 31% |
| ヒーローバナー | JPEG 850 KB | 560 KB | 34% |
| 透過背景のロゴ | PNG 84 KB | 31 KB | 63% |
| テキスト入りのスクリーンショット | PNG 210 KB | 148 KB | 30% |
| 5 KB未満の小さなアイコン | PNG 3 KB | 3.4 KB | 増加 |
最後の行は、WebPが不利になる唯一のケースを示しています。およそ5 KBを下回ると、フォーマット自体のオーバーヘッドが圧縮によるメリットを上回ってしまうため、小さなアイコンはPNGのままにしておくか、ベクターグラフィックに置き換える方が適しています。
WebPとAVIFの比較
AVIFは、大きな写真においてWebPよりも約20〜30%強力に圧縮できますが、エンコードが非常に遅く、約10 KB以下の画像ではWebPよりもサイズが大きくなることがよくあります。これら2つのフォーマットは、一方が他方に取って代わるというよりも、異なるタイプの画像に適しています。
AVIFはコンテナのオーバーヘッドが大きいため、大きな写真では圧倒的に有利ですが、小さなグラフィックでは不利になります。もう一つの考慮事項はエンコード時間です。AVIFは画像1枚あたり数倍の時間がかかることがあります。500枚のファイルを一括処理する場合、その差は秒単位ではなく分単位になり、ライブラリを繰り返し変換する際には重要な問題となります。
どのフォーマットをどこで使うべきか
- ヒーロー画像や大きな写真:圧縮のメリットが最も大きいAVIFが適しています。
- サイト内の一般的な画像:エンコードが速く、広くサポートされているWebPが適しています。
- 透過背景のロゴやグラフィック:PNGを大幅に上回るWebPが適しています。
- 5 KB未満のアイコン:どちらのモダンフォーマットもオーバーヘッドが加わるため、PNGまたはベクターグラフィックが適しています。
- ダウンロード用やメール添付用のファイル:ブラウザ外でのサポートがまだ不十分なため、JPEGまたはPNGが適しています。
JPEGにはできないWebPの機能
WebPは透過処理と非可逆圧縮を同時にサポートしていますが、これはJPEGにもPNGにもできないことです。この組み合わせは非常に便利ですが、見落とされがちです。
背景が透明な製品写真では、以前は重いPNGにするか、背景に白いボックスが入ったJPEGにするかの選択を迫られていました。WebPはこの選択を不要にします。また、このフォーマットはアニメーションもサポートしているため、ファイルサイズをわずか数分の一に抑えながら、アニメーションGIFの直接の代替として機能します。
WebPが依然として問題を引き起こす場所
WebPは、ブラウザ以外の環境(メールクライアント、アップロードフォーム、印刷ワークフロー、古いデザインソフトウェアなど)では機能しないことがあります。ブラウザ対応によってウェブ上の問題は解決しましたが、それ以外の環境は変わっていません。
最もよくある失敗はプレスキットです。ジャーナリストがWebP形式のロゴをダウンロードしたものの、レイアウトソフトに配置できないというケースです。2つ目は政府機関のポータルサイトで、このフォーマットを完全に拒否することがあります。ブラウザの対応状況は数年前に解決済みですが、その他の問題は解決していないため、ブラウザの対応表ではなく、最終的な利用目的に基づいて判断してください。
サイトをWebPに変換する方法
ウェブサイトを不具合なくWebPに移行するには、以下の6つのステップに従ってください。
- ライブラリの多くにはどこからもリンクされていないファイルが蓄積されているため、ページが実際に参照している画像をリストアップします。
- 変換する前に、各画像を実際の表示幅(高解像度ディスプレイ用に2倍にしたサイズ)にリサイズします。
- 画質80でWebPに変換します。この設定は、ファイルサイズが小さくなり、画質の劣化が目立たないポイントです。
- 元のJPEGまたはPNGファイルは、削除せずにフォールバック用として保管しておきます。
- picture要素を使用し、最初にWebPを、imgタグに元の画像を記述して両方を提供します。
- 何かを削除する前に、スマートフォンとデスクトップのブラウザでページを確認します。
現在、ほとんどのコンテンツ管理システムはアップロード時にこのマークアップを自動的に生成するため、手動で記述する前に、お使いのプラットフォームの既存機能を確認してください。画像の変換には数分しかかかりませんが、テンプレートの書き換えにはより多くの時間がかかります。
どの画質設定を使用すべきか
WebPは同じ数値でもJPEGよりディテールを保持しやすいため、画質80が適切なデフォルト設定です。画質80のWebPファイルは、画質85以上のJPEGと同等の見た目になります。
70を下回ると、特に大きな画像において、人物の顔やなだらかなグラデーションで劣化が目立ち始めます。画質90を超えると、見た目の向上は完全に頭打ちになる一方で、ファイルサイズが急激に増加します。適切な数値は公開する画像の種類によって異なるため、一括処理を行う前に、代表的な画像1枚を3つの設定でテストしてください。
WebPは検索順位の向上に役立つか
WebPは、検索エンジンがそのフォーマット自体を好むからではなく、ランキング要因であるページ速度を向上させることで、間接的に役立ちます。ファイル拡張子そのものを評価する検索エンジンはありません。
その経路はCore Web Vitalsを経由します。ここでは、Largest Contentful Paint(LCP)の測定値が通常、1枚のヒーロー画像によって決定されます。その画像を3分の1に削減すれば、測定値は直接改善されます。また、Lighthouseは「次世代フォーマットでの画像の配信」という警告を表示しますが、これはWebPまたはAVIFによって解決され、クリアしやすい監査項目の一つです。
既存のライブラリを変換する価値はあるか
画像がページ容量の大部分を占めている場合は変換してください。これは、ほぼすべてのコンテンツサイトやオンラインショップに当てはまります。ページがすでに軽量である場合や、画像が少なく小さい場合は、変換をスキップしてください。
決定する前に確認しましょう。開発者ツールを開き、「ネットワーク」タブに切り替え、画像でフィルタリングして、代表的なページを再読み込みします。画像の合計が1 MBを超える場合、変換によって目に見える改善が得られます。合計が200 KB程度であれば、その労力はページの他の部分に費やす方が効果的です。
非可逆WebPと可逆WebPは異なるモード
WebPには2つの独立した圧縮モードがあり、誤った方を選択すると、元のファイルよりもサイズが大きくなってしまいます。非可逆(ロスレスではない)モードは写真に適しており、可逆(ロスレス)モードはスクリーンショット、ロゴ、平坦なグラフィックに適しています。
多くのツールは画質設定からモードを選択し、画質100では可逆圧縮を、それ未満では非可逆圧縮を適用します。このデフォルト設定は写真には機能しますが、グラフィックでは失敗します。グラフィックのスクリーンショットを非可逆WebPにすると、テキストの周囲にノイズ(ハロー効果)が発生する一方で、可逆バージョンよりも重くなってしまいます。変換したグラフィックが元のPNGよりも大きくなった場合は、ツールがどちらのモードを使用したかを確認してください。
WebP導入時によくある間違い
- リサイズせずに変換すること。ファイルサイズは寸法に大きく左右されるため、4000ピクセルのWebPは依然として重すぎます。
- 元画像を削除すること。フォールバックや将来の再書き出しには可逆圧縮のソースが必要になるため、元画像は保管しておいてください。
- すでに圧縮されたJPEGを変換すること。1回で済むはずの劣化が2世代にわたって蓄積された結果になります。
- ダウンロード用ファイルにWebPを使用すること。プレスキット、テンプレート、印刷用ファイルはJPEGまたはPNGのままにしておくべきです。
- 極小のアイコンを変換すること。5 KB未満では、フォーマットのオーバーヘッドによりファイルが小さくなるどころか大きくなります。
ライブラリを一括で変換する
非可逆圧縮のステップを重ねるたびにディテールが失われるため、中間フォーマットを経由せず、元のフォーマットから直接変換してください。HEICからJPEG、そしてWebPへと変換すると、1回で済むはずの劣化が2世代分発生してしまいます。
最大500個のファイルを一度にドロップするか、ZIPアーカイブを直接ドラッグ&ドロップするだけで、サポートされているすべての画像が一括で変換されます。処理はお使いのブラウザ内(ご自身のプロセッサ上)で実行されるため、ファイルがサーバーに送信されることなく、サイト全体の移行を完了できます。契約に基づいてクライアントのライブラリを扱う代理店にとって、これは情報漏洩のリスクを単に減らすだけでなく、完全に排除することにつながります。