なぜWebの画像はJPEGから「WebP」「AVIF」へ移行しているのか？高圧縮の仕組みとCore Web Vitalsへの影響

Webサイトを閲覧していて画像を保存しようとした際、拡張子が .jpg や .png ではなく .webp になっていて扱いづらさを感じた経験はないでしょうか。

現在、多くのWebサイトで従来のJPEGやPNGから「WebP（ウェッピー）」、さらには「AVIF（エイス／エイヴィフ）」といった次世代画像フォーマットへの置き換えが進んでいます。30年以上使われ続けてきた規格からなぜ今急速に移行しているのか、その圧縮技術の仕組みや背景にある要因について整理しました。

1. WebPとは？JPEGやPNGとの違いと仕組み

WebPは、Googleが2010年に発表したオープンソースの静止画フォーマットです。Webページの表示速度向上を主目的に開発されました。

動画コーデック「VP8」のキーフレーム技術を応用

WebPの最大の特徴は、動画圧縮規格である「VP8」のキーフレーム（Iフレーム：前後のフレームを参照せずに単独で復元できる画面）の圧縮アルゴリズムを静止画に応用している点にあります。

一般的な非可逆圧縮では、画像をブロック単位（マクロブロック）に分割し、すでに符号化された隣接ブロックのピクセル情報から現在のブロックの模様やグラデーションを予測（空間予測）します。その予測値と実際の画像データの差分（残差）のみを記録・量子化することで、大幅なデータ量削減を実現しています。

高い圧縮効率: 同等画質のJPEGと比較してファイルサイズを約25〜34%削減
PNGと同等の透過対応: アルファチャンネル（透過・半透明）をサポート
アニメーション対応: GIFよりも圧倒的に小さいファイルサイズで動く画像を再現可能

これまで「写真＝JPEG」「透過ロゴ・イラスト＝PNG」「短尺ループアニメ＝GIF」と用途ごとに使い分けが必要だった仕様を、WebPひとつでカバーできる点が大きな利点です。

2. 次世代のさらに上を行く「AVIF」の特徴

WebPの普及と並行して採用例が増えているのが「AVIF（AV1 Image File Format）」です。

3. なぜ今、急速に移行しているのか？

長年JPEGが主流だったWebの世界で、ここ数年一気にWebPやAVIFへの移行が進んだ理由は大きく2つあります。

Core Web Vitals（LCP）改善とSEOへの影響

Googleは検索評価指標の一部として、ユーザー体験を測る「Core Web Vitals」を導入しています。

その中で重要な指標の1つが「LCP（Largest Contentful Paint：ページ内で最も大きなコンテンツが表示されるまでの時間）」です。多くのWebページにおいて、ファーストビューのメインビジュアルやアイキャッチ画像がLCPの対象要素になります。

画像のファイルサイズをWebPやAVIFで30〜50%削ることは、ネットワーク転送時間の短縮に直結し、LCPスコアを改善するための最も即効性がある施策となります。

主要ブラウザのサポート完了

どれだけ優れたフォーマットであっても、閲覧側のブラウザが表示できなければ普及しません。

かつてWebPはSafariの対応が遅れていましたが、macOS Big SurおよびiOS 14（2020年秋リリース）でSafariがWebPを標準サポートしたことで、主要ブラウザすべてで制限なく利用できるようになりました。また、AVIFについても近年のバージョンですべての主要ブラウザによるサポートが整っています。

まとめ

WebPやAVIFの台頭は、単なる画質の違いではなく「動画圧縮技術の静止画への転用」と「表示速度（Core Web Vitals）を重視するWeb環境の変化」が組み合わさった結果といえます。

制作・配信側にとってはページ軽量化の必須手段となる一方で、PCにダウンロードして再加工する用途ではまだJPEG/PNGに利便性があるため、Web配信用と素材用を用途に応じて使い分けていくのが現実的な運用になりそうです。