テクニカル
WebP
Googleが開発した次世代画像フォーマット。JPEG/PNGより高圧縮で表示速度に有利。
WebPとは?
WebP(ウェッピー)は、Googleが開発した画像フォーマットです。
従来のJPEGやPNGと同等の画質を、より小さいファイルサイズで実現できます。
可逆・非可逆の両圧縮と透過・アニメーションに対応します。
画像はWebページの総容量の大部分を占めるため、WebP化はそのまま表示速度(LCP)の改善につながります。
主要ブラウザがすべて対応済みで、導入リスクは小さくなっています。
WebPの使い方・実践方法
WebP導入のポイントは次のとおりです。
- 既存のJPEG/PNGをWebPに一括変換
<picture>要素で非対応環境へフォールバック- さらに高圧縮のAVIFとの併用も検討
- 適切なサイズにリサイズしてから変換する
WebPで押さえるべきポイント
WebPへの変換だけでなく、「表示サイズに合わせたリサイズ」を併せて行うと効果が倍増します。
スマホで300pxしか表示しない画像に2000px原寸を使わない——この基本がLCP改善の土台になります。
WebPを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「WebP」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 / メール登録で1日30回 / ベーシック月額270円 / 自サイトをSEO診断
WebPについてよくある質問
WebPはすべてのブラウザで使える?
主要ブラウザは対応済みです。
念のため
念のため
<picture>でJPEG/PNGのフォールバックを用意すると安全です。WebPとAVIFどちらが良い?
AVIFの方が高圧縮ですが、WebPの方が対応範囲が広く実績豊富です。
併用が理想です。
併用が理想です。
画質は落ちる?
非可逆圧縮でも同等画質をより小さいサイズで実現できます。
可逆モードもあります。
可逆モードもあります。