次世代画像フォーマット「WebP」について

皆さんは、「WebP（ウェッピー）」という言葉をご存知でしょうか。「聞いたことはあるけれどよく分からない」「何となくイメージできるけれど、詳しい使い方などは知らない」という方も多いのではないでしょうか。

「WebP（ウェッピー）」とは、一言で言うと、Googleが開発した次世代画像フォーマットのこと。画質を担保しながらファイルサイズを抑えることができるので、注目を集めています。

今回は、Webや画像に詳しくない方に向けて、「WebP（ウェッピー）に関する基礎情報」を分かりやすく解説していきます。メリットやデメリットはもちろん、具体的な作成方法も紹介しているので、ぜひ参考にしてみてください。

WebPとは

まず、「WebP」とは何か、簡単に解説していきます。

WebPとは、2010年にGoogleが発表した、圧縮率の高い次世代画像フォーマットのこと。拡張子は「.webp」で、非可逆圧縮にも対応しています。

なお、非可逆圧縮とは、一度圧縮してしまうと、圧縮する前の状態に戻すことのできない圧縮方法を意味します。反対に、圧縮する前の状態に戻すことのできる圧縮方法を可逆圧縮と言うので、覚えておきましょう。

従来の「png」「gif」「jpg」といったフォーマットでは、画質を優先するとファイルサイズが重くなり、ファイルサイズの軽量化を優先すると画質が担保しづらいという問題がありました。しかし、WebPでは、画質を維持しながらファイルサイズを抑えることができます。

Googleの発表によれば、PNG画像と比較して26％、JPEG画像と比較して25~34%もファイルサイズが小さくなるそうです。

参考：https://developers.google.com/speed/webp

また、JPEGも非可逆圧縮に対応している画像フォーマットではありますが、透過画像に非対応であり、アニメーションを作成する場合にはGIF画像に変換しなければなりません。一方で、WebPの場合は透過画像にも対応しており、アニメーションを付ける場合にGIF画像へ変換する必要もありません。

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

WebPには大きなメリットがありますが、実はデメリットも少なくありません。

この章では、WebPを使用するメリットとデメリットを詳しく解説していくので、ぜひ参考にしてみてください。

WebPを使用するメリット

WebPを使用する主なメリットは、以下の2点です。

• ホームページの表示速度が速くなる
• 背景透過ができる

1点目は、「ホームページの表示速度が速くなること」です。

WebPを使用した場合、JPEGやPNGと比べてファイルサイズが小さくなります。そのため、ホームページの読み込み時間が短縮されます。

ホームページの表示速度が遅いと、せっかく訪問してくれたユーザーがすぐに離脱してしまう要因になります。WebPを使えば、訪問ユーザーに与えるストレスを最小限に抑えられるので、離脱率や直帰率の改善につながるでしょう。

昨今は、SEO（検索エンジン最適化）においてもホームページの表示速度が重要になっています。Googleも、表示速度を評価材料にしていると公式にアナウンスしているので、ぜひホームページの表示速度には注意を払いたいところです。

また、2点目のメリットは、「背景透過ができること」です。

背景透過とは、画像を編集する際に余計な背景を透明にすること。上記でも軽く触れましたが、同じ非可逆圧縮の画像フォーマットであるJPEGの場合、背景透過を行うことができません。

一方で、WebPの場合、背景透過が可能です。現状、透過の有無に応じてJPEGとPNGを使い分けている人も多いかと思いますが、WebPを利用すれば、画像フォーマットを統一することができます。

WebPを使用するデメリット

WebPを使用する主なデメリットは、以下の2点です。

• 非対応のブラウザがある
• 変換の手間がかかる

1点目は、「非対応のブラウザがあること」です。

WebPは比較的新しい画像フォーマットなので、まだ全てのブラウザに対応しているわけではありません。

2021年11月時点では主要ブラウザには概ね対応していますが、IE（Internet explorer）には対応していません。

参考：https://caniuse.com/?search=WebP

Google Chrome、Firefox、Edge、Safari等には対応しているものの、未対応のブラウザも存在するので注意してください。

また、2点目のデメリットは、「変換の手間がかかること」です。

現在も、多くの人がJPEG形式やPNG形式の画像を取り扱っています。JPEGやPNGとして使用されている画像をWebPに変換しなければならないので、手間がかかってしまうでしょう。

また、デザイン制作で用いられるPhotoshopやAdobe XD等においても、2021年時点ではWebPでの書き出しができません。WebPへ変換したい場合は、専用のアプリやツールを使用する必要があります。

WebPの作成方法、変換方法

続いて、「WebPの作成方法・変換方法」について簡単に解説します。

従来のJPEGやPNGなどの画像をWebPに変換したい場合には、専用の変換ツールやプラグインを使います。

代表的なものは、以下の3つです。

• squoosh（スクワッシュ）を利用する
• Photoshop用プラグインを利用してWebPを書き出す
• コマンドラインツールで変換する

順に見ていきましょう。

squoosh（スクワッシュ）を利用する

最初に紹介するのはsquoosh（スクワッシュ）です。

Squooshは、Googleが開発した変換ツールであり、使い方も簡単です。

【Squooshの使い方】

1. squooshのページにアクセスする
2. WebPに変換したい画像をドラック&ドロップする
3. 画像フォーマットとしてWebPを選択する

画面中央にはそれぞれ右と左を指した矢印があり、左が元の画質・右が変換後の画質となっています。リアルタイムで画質の変化を確かめられるので、非常に便利ですね。

なお、WebPの他にも、JPEGやPNGなど7種類の圧縮形式を選ぶことが可能です。

Photoshop用プラグインを利用してWebPを書き出す

続いて、Photoshop用プラグインを利用する方法です。

通常、PhotoshopでWebP形式の画像を取り扱うことはできませんが、プラグイン「WebPShop」を導入することで、WebPの読み書きが可能になります。

プラグインは、GitHubからインストールしてください。

コマンドラインツールで変換する

最後に、コマンドラインツールを使用する方法です。

WebPに変換するための公式コマンドラインツールとして、「cwebp」と「dwebp」が存在します。両者とも、「Google Developers」から直接ダウンロードすることができます。

• cwebp
• dwebp

ただし、パソコン上級者向けのツールなので、あまり詳しくない方は、Squooshを利用することをおすすめします。

WebP使用時のHTMLの書き方

「WebPを使用する際のHTMLの書き方」に関しても触れておきます。

一般的に、画像を表示させたい場合にはimgタグを使用します。

ただし、WebPを使用する場合には、以下のような記述を行いましょう。

上記のように記述することで、WebP対応のブラウザではWebP画像が、非対応のブラウザではJPEG画像が表示されるようになります。

まとめ

Webや画像に詳しくない方に向けて、「WebP(ウェッピー)に関する基礎情報」を分かりやすく解説しました。

画質を担保しながらファイルサイズを抑えることができるので、皆さんもぜひWebPを利用してみてください。