WebP（ウェッピー）とは？変換方法と使用するメリットのまとめ

WebP（ウェッピー）は可逆圧縮（ロスレス圧縮）に加え、圧縮率の高い非可逆圧縮。透過した画像も書き出せるうえ、GIF同様にアニメーションにも対応している画像フォーマットです。

また、画像サイズの軽量化が図れるため、サイトの表示速度を改善し、閲覧時のユーザー体験を高めたり、SEOにプラスに働くというメリットがあります。しかし、対応するブラウザが少ないというデメリットから普及が限定的でした。

しかし、AppleがiOS14、iPadOS14から、システムベースでWebPフォーマットに対応となり、Safariを含め、ほぼ全てのブラウザでWebPがサポートされるようになりました。

今後、WebPの導入が加速されることが予想されますので、WebPの特徴や変換方法、メリット・デメリットなどを、あらためて見ていきましょう。

WebPとは

WebP（ウェッピー）とは、Googleが開発している画像フォーマットのことです。最近の画像形式のように思えるWebPですが、発表されたのは2010年からになります。拡張子は「.webp」です。

2020年9月時点での対応ブラウザは、Chrome、Firefox、Edge、Safariです。IE以外の主要ブラウザに対応となっています。

WebPはビットマップ画像なので、画像を拡大すると画質が劣化するのはJPGやPNG、GIFなどと同じです。

主要ブラウザのほぼ全てでWebPに対応

WebPは2010年9月、その仕様が公表されツールの提供が始まりましたが、対応ブラウザが少なかったため、長く普及が進みませんでした。

このことは、WebPの開発元がGoogleであることが要因と考えられています。Googleと競合するMicrosoftやAppleの導入が遅れておりました。

ところが、2018年にPCの主要ブラウザであるFirefoxとMicrosoft Edgeが相次いでWebPに対応することを発表。さらに、2020年にAppleのiOS14も対応することになりました。Androidは可逆圧縮に対応したWebP画像はAndroid4.0から。可逆圧縮と透明度に対応したWebP画像は、Android 4.3以上からサポートされています。

iOS14からWebP対応！iPhoneでも利用可能に

Appleが2020年秋リリースのiOS14と新しいmacOS Big Sur（Safari）においてWebPに対応することを発表。これにより、すべてのPCとスマホの主要ブラウザでWebPが利用可能になりました。

iPhoneの普及率が高い日本において、Safari非対応のWebPは敬遠されてきましたが、今後はそうした流れが変わっていくと予想されています。

WebPのメリット、デメリット

WebPは、ほかの画像フォーマットと比べてどのようなメリットとデメリットがあるのでしょうか。それぞれ詳しく解説します。

メリット

WebPのメリットとしてまず挙げられるのは、非可逆圧縮であるにもかかわらずアルファチャンネルを扱えることです。

非可逆圧縮とは、画像を拡大したり縮小したりできない、ということです。非可逆圧縮の画像フォーマットでは、たとえばデータ画像の一部をカットして保存した場合、もう元のデータには戻せなくなります。また、サイズ変更や上書き保存をすることで画質が劣化します。代表的な非可逆圧縮の画像フォーマットとしてJPGが挙げられます。

WebPはJPGやPNGよりも圧縮率が高い画像フォーマットであり、アルファチャンネルを扱えるというメリットがあります。画像処理においてアルファチャンネルを扱えると、たとえば背景を透明にできるなどのメリットがあります。

背景透過をさせるためにはPNGやGIFの利用が一般的でしたが、WebPの登場でよりファイルサイズを小さく、背景透過を行えるようになったのが大きなメリットといえます。

WebPは背景透過ができるのです。JPGとPNGやGIFのメリットを併せ持つ画像フォーマットだといえるでしょう。

デメリット

これまで大きなデメリットとされてきた、対応ブラウザの少なさですが、現在は主要ブラウザの多くで対応できるようになり、非対応のブラウザはIEのみとなります。

画像編集ソフトが対応していない場合があるなど、既存フォーマットと比べて使いにくい部分はまだありますが、大きなデメリットは無くなってきたといえます。

WebPとJPG、PNGとの違いを比較

Webサイトで一般的に利用されているJPG、PNGとWebPとの違いを比較しながら見ていきたいと思います。

拡張子	.webp	.jpg/.jpeg	.gif	.png
圧縮方法	非可逆圧縮／可逆圧縮	非可逆圧縮	可逆圧縮	可逆圧縮
透過	〇	×	×	〇
アニメーション	〇	×	〇	×

ファイルサイズ

WebPの開発元であるGoogleは、ほぼ同等の画質でPNGよりも約26％、 JPGより約25〜34％軽くできると発表しています。（https://developers.google.com/speed/webp）

WebPを使用することで、画像のファイル容量を大きく削減することが可能です。

画像の透過が可能

JPGは透過画像に対応していませんが、WebPは非可逆圧縮の画像でありながら透過も可能です。これまで背景透過の必要に応じて、JPGとPNGを使い分ける必要がありましたが、WebPを使えば画像形式を統一することができるようになります。

アニメーションも作成可能

JPG画像を使ってアニメーションを作成したい場合、一度JPG画像をアニメーションに対応しているGIFに変換する必要がありました。しかし、WebPであればGIFへの変換なしにそのままアニメーションが作成できます。

画像をWebP変換、生成する方法

WebPを使用するには、用意した画像データをWebPに変換したり生成したりする必要があります。ここからは、その変換・生成方法について詳しく解説します。

Squooshを利用して変換

もっとも一般的な方法としてはSquoosh（スクワッシュ）を利用した変換方法が知られています。SquooshはGoogleが開発した画像データ変換のWebアプリです。まずはSquooshのホームページにアクセスしてみましょう。

PCの中にあるWebPに変換したい画像データを画面上にドラッグ&ドロップします。すると画面上が画像の編集画面に切り替わります。画面中央に青い線があり、左側がオリジナルの画像品質、右側が圧縮後の画像品質です。

圧縮形式はWebP以外にもJPEGやPNGなど9種類のフォーマットを選べます。また、画像の品質やサイズ、色数などを選ぶこともできます。スライダーを動かして圧縮率などを調整してみましょう。どれくらいサイズが小さくなるのかをリアルタイムで確認できます。

満足できる状態になったら、右下の青いボタンをクリックしましょう。するとダウンロードが始まります。

https://squoosh.app/

Photoshop用プラグイン「WebPShop」で書き出す

WebPの画像データはそのままではPhotoshopに読み込んだり書き出したりすることができません。そのため、WebPShopというGoogle公式のPhotoshop用プラグインを使用する必要があります。

まずはソースコード管理サービスであるGitHubからWebPShopのプラグインをダウンロードします。

ダウンロードできたら「bin」フォルダを開きましょう。それからMacを使用している人はMac、Windowsを使用している人はWindowsと書かれてあるフォルダを開きます。

次に、windowsを使用している人は「bin」フォルダの中にある「WebPShop.8bi」と書かれている項目を、Macを使用している人は「WebPShop.plugin」とかかれている項目をPhotoshopの「Plug-ins」の中にコピーします。これでインストール完了です。

メニュー欄やドラッグ&ドロップでWebP画像を読み込んだり、Photoshopで制作した画像データをWebP形式で保存したりできるようになります。

https://developers.google.com/speed/webp/docs/webpshop

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

Google公式のコマンドラインツールには「cwebp」と「dwebp」があり、それぞれ実行形式のファイルをGoogle Developersから直接ダウンロードすることが可能です。

複数のファイルをまとめてWebPに変換が可能ですが、コマンドラインの操作に慣れていないとハードルの高い方法になります。

https://developers.google.com/speed/webp/download

Webサイトの表示速度はSEOの評価にも影響する

WebPのメリットのひとつとして、ファイルサイズが小さくなるためWebサイトの表示速度が上がることが挙げられます。

2018年にGoogleが発表した公式アナウンスによると、GoogleはWebページを評価する際、どれくらいの速度でWebページの画像が表示されるかを測定しており、その結果がSEOに反映されるとしています。

WebPで画像を軽量化することで、ページの表示速度を速めることは、SEO対策としても有効な施策になるといえます。

Core Web VitalsもWebP導入の後押しに

Core Web Vitals（コア ウェブ バイタル）をランキング要因に組み込むというGoogleの発表がありました。

この指標のなかには、ページ読み込み速度が重要な評価の1つとして含まれているため、SEO対策をしていくうえで、ページの表示速度の改善はこれまで以上に意識する必要があります。

そして、その手段の1つとして重要になるのが画像の軽量化です。WebPは画像の圧縮率が高く、前述の通り大きなデメリットであった対応ブラウザの問題も解消されたので、今後導入が加速されていくことが予想されます。

画像の最適化はユーザ体験の向上にもプラスになる

ページの表示速度を上げることは、ユーザ体験（UX）の面から見ても非常に重要です。

Googleが公表したWebサイトのページ表示速度とユーザー直帰率の関係性によると、表示されるまでに3秒以上かかってしまうWebページからは53%のユーザーが離脱しているとしています。

せっかく苦労してWebサイトを作っても、ページの表示速度に3秒以上かかるとおよそ半分のユーザーに見てもらえなくなってしまうのです。このことは、ユーザーが表示速度の速いWebサイトを求めているということでもあります。

ページの表示速度を上げる方法は数多くありますが、WebPフォーマットによる画像サイズの軽量化をすることで画像データの最適化を図ってみてはいかがでしょうか。

WebPでサクサク表示されるWebサイトを作ろう！

画質の劣化を抑えて、ファイルサイズを軽くできることがWebPの大きなメリットです。画像の軽量化によってWebサイトの表示速度が上がれば、SEO的にもUX的にもプラスとなります。

また、これまでWebPは対応しているブラウザが少ないことが大きなデメリットとして挙げられてきましたが、PCとスマホの主要ブラウザがWebPに対応したことでそうした問題も解決されたといえるでしょう。

Webサイトのパフォーマンスを向上させたい人は、WebPの導入を検討してみてはいかがでしょうか。