WebP（ウェッピー）とは？WebPのメリット・デメリットとSEOへの影響

WebPは、Googleが開発した次世代画像フォーマットです。

以前は対応しているブラウザが少なかったのですが、現在ではほぼ全ての主要ブラウザ（Chrome、Firefox、Safariなど）に対応した画像フォーマットとなっています。

WebPのメリット

WebP利用のメリットはいくつかあります。

高圧縮率と高品質

WebPは、JPGやPNGよりも小さなファイルサイズで同等以上の画質を提供することができます。これにより、ウェブページの読み込み速度を向上させることができます。

透過画像とアニメーションのサポート

WebPは、透過画像（アルファチャンネルをサポート）やアニメーションにも対応しています。このため、JPG・PNG・GIFなど複数の画像形式を1つのフォーマットで置き換えることができます。

ウェブパフォーマンスの向上

より小さなファイルサイズで高品質な画像を提供できるため、ユーザーの待ち時間を短縮し、ウェブページの読み込み速度を高速化します。これはユーザーエクスペリエンスの向上に繋がります。

Googleの支持

Googleが開発したフォーマットであり、Googleの検索エンジンやサービスではWebPを積極的にサポートしています。そのため、SEOの観点からも有利になることがあります。

多くのブラウザでのサポート

WebPは、多くの主要なブラウザでサポートされています。ただし、すべてのブラウザで完全にサポートされているわけではないため、適切なフォールバックを設定することが重要です。

これらのメリットにより、WebPはウェブ開発者にとって効率的で優れた画像フォーマットとして広く利用されています。

WebPと従来の画像形式を比較してみました。

画像で比較すると以下のようになります。

このように、画像形式により若干の色味の違いはでるものの、画質の劣化はほとんど感じられません。

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPGと比較して25〜34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしています。（参照：ウィキペディア）

WebPにすることによるデメリット

対応していないブラウザがある

現在はほぼすべての主要ブラウザで対応していますが、一部古いバージョンのブラウザ等で対応していない場合があります。

以下が対応表ですが、赤が対応していないブラウザ、バージョンになります。数値はバージョンになります。

ソフトとの互換性

WebPは新しいフォーマットであるため、それに対応していないアプリケーションやプログラムも多いため、他の画像フォーマット（JPGやPNGなど）との互換性に関する問題が発生することがあります。

SEOへの影響

WebPを利用することにより、サイトの表示速度が改善され、結果的にユーザの満足度を高めることにより、SEOにも有利に働くといわれています。

Googleが提供するPageSpeed InsightsでもWebPの利用が推奨されており今後主要な画像フォーマットになっていくのではないでしょうか。

WebPへの変換方法

Google推奨の画像圧縮サービスSquooshを利用

Googleが推奨する画像圧縮サービスのSquooshでJPGなどからWebPに変換できます。 ツールバーで画像変換する際の、クオリティの保持率も設定できるため便利なツールです。

https://squoosh.app/

PhotoShopからWebPへの書き出し

バージョン23.2以降であればWebP形式での作成・編集・保存をすることができます。

※23.1以前のバージョンのPhotoshopを使用している場合には「WebPShop」というプラグインの追加が必要です。

手順は、ファイル→コピーを保存→ファイル形式「Webp」を選択で実行することができます。

WordPressは自動変換のプラグインを使用

プラグイン「WebP Converter for Media」を入れることにより、自動変換が可能です。

WebPのまとめ

• 高圧縮率と高品質の新しい画像フォーマット
• 主要ブラウザの全てに対応している
• ページが軽くなることで、SEOにも良い影響がある

今後、ブラウザの進化やGoogleの開発が進むにつれて、WebPの利用価値がより高まることが期待されます。使用されている画像が全てWebPというWEBサイトも見ることが多くなるかもしれません。

WEBディレクター ／ T.K