WebPとは？メリット・デメリットや変換方法を解説

WebPとは？

WebP（ウェッピー）とは、Googleが開発した次世代の画像フォーマット（ファイル形式）です。拡張子は「.webp」と表記されます。

WebPとその他画像フォーマットの違い

Webで主に使用されている画像フォーマットは、JPEG・PNG・GIFの三つです。

これらと比べてWebPは以下の特徴があります。

• 高い圧縮率
• 背景透過が可能
• アニメーションも利用可能

高い圧縮率

GoogleはWebPを使用した場合、JPEGとPNGを使用した際と比較してそれぞれ約26％、約25~34％も画像の容量を圧縮できると発表しています。

背景透過が可能

JPEGは透過画像に対応していませんが、WebPは非可逆圧縮の画像でありながら透過も可能です。

非可逆圧縮とは、データ圧縮方式の一つで、圧縮前のデータと、圧縮・展開を経たデータとが完全には一致しないデータ圧縮方式です。

これまでは、背景透過の必要に応じてJPEGとPNGを使い分ける必要がありましたが、WebPを使えば画像形式を統一することができるようになります。

アニメーションも利用可能

JPEGの画像を使ってアニメーションを作成したい場合、一度JPEGの画像をアニメーションに対応しているGIFに変換する必要がありました。

しかし、WebPであればGIFへの変換なしにそのままアニメーションを作成することができます。

WebPのメリット・デメリット

ここからは、WebPのメリット・デメリットを紹介していきます。

メリット① ページ表示速度が短縮される

画像が軽量化されるので、サイトの読み込み時間が短縮され、ユーザー体験が改善されます。

その結果、SEO施策にも繋がります。

メリット② コスト削減

AWSなどの従量課金制のサービスにおいて、軽いデータでの通信はコスト削減につながります。

WebPを使用することで画像などの重いデータの通信を軽量化しましょう。

デメリット①IEが非対応

2018年にPCの主要ブラウザであるMicrosoft EdgeとFirefoxが相次いでWebPに対応することを発表。

さらに、2020年にAppleのiOS14も対応することになりました。

しかし、IEは未だに非対応ですので、その場合は条件分岐で出しわけをする必要があるので注意が必要です。

デメリット② 変換に手間がかかる

WebPへの変換にはWebP変換用のアプリケーションを使用するか、コマンドで変換する必要があります。

WebPへの変換方法

では、WebPへの変換方法にはどのような方法があるのでしょうか。

解説していきます。

ブラウザ変換ツールを使用

Squoosh（スクワッシュ）というGoogleが開発した画像データ変換サイトを使用する方法が一般的です。

しかし、一つずつアップロードする方法しかないので、非常に手間がかかります。

その場合、サルワカ道具箱（https://saruwakakun.com/tools/png-jpeg-to-webp/）というWEB上に無料で公開されているツールがありますので、こちらを使用すると良いでしょう。

コマンドラインツールを使用

Googleが提供しているコマンドツール（Downloading and Installing WebP）を利用することでもWebPを変換することができます。

Photoshopのプラグインを使用

Photoshopから直接WebPを書き出すことはできませんが、プラグインを使用することで書き出せます。

公式のプラグインではないため、注意が必要です。

CMSがWordPressの場合はプラグインも

使用しているCMSがWordPressの場合、EWWWというプラグインを使用することで一括変換することができます。

導入手順は以下になります。

• WordPress管理画面のプラグイン【新規追加】で「EWWW Image Optimizer」をインストール
• プラグイン「EWWW Image Optimizer」を有効化
• 設定で「サイトの高速化」と「無料モードを続ける」を選択
• 次に「メタデータを削除」「遅延読み込み」「Webp変換」を選択し保存
• WordPress管理画面のメディアにて【一括最適化】を実行
• 実行したのち、.htaccessファイルにWebpコードを記載

まとめ

今回は、WebPについて解説しました。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善点を診断する「WEBサイト表示診断サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。