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

WebP（ウェッピー）はGoogleが開発した画像形式で、画質の劣化を最小限に、画像サイズを軽量化することを可能にしています。Googleの公式の情報によると、同等の画像品質において可逆圧縮ではPNGと比較して26％軽量化。非可逆圧縮ではJPGと比べて25～34％小さくなると発表しています。

画像サイズのメリットに加えて、透過した画像の書き出しや、GIF同様にアニメーションにも対応。

そのうえ、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は敬遠されてきましたが、今後はそうした流れが変わっていくと予想されています。

圧縮方式の違い

可逆圧縮（ロスレス圧縮）

データの圧縮方法の1つで、圧縮によって元のデータを損失させないため、完全に元通りに復元することができます。非可逆圧縮に比べて、圧縮率が低いのが難点。PNGやGIFがこの形式です。

非可逆圧縮

圧縮する際に、データの損失を許容するため、可逆圧縮とは異なり元のデーターに復元することはできません。その分、ほとんど違いの分からない画質で、圧縮率を高めることができます。JPGがこの形式です。

WebPは上記の可逆圧縮と、非可逆圧縮のどちらにも対応しています。

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

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

メリット

• JPG、PNG、GIF形式の特徴を併せ持つため、WebPに一本化ができる
• 同等の画質を維持したまま画像サイズを軽量化できる
• Webページの表示速度を改善できる
• 背景の透過ができる
• アニメーションにも対応

WebPのメリットとしては、画質を損なうことなく、画像サイズを軽量化できることで、Webページの表示速度を向上できることです。ページを閲覧するユーザーの体験を高めたり、間接的にSEOにプラスに働いたりするメリットがあるでしょう。

また、非可逆圧縮であるにもかかわらず透過性（アルファチャンネル）をサポートし、GIFのようにアニメーションにも対応しています。

まさにJPGとPNGやGIFのメリットを併せ持つ、次世代の画像フォーマットだといえるでしょう。

デメリット

• 古いブラウザは対応していない
• 画像を変換する手間がかかる
• 画像編集ソフトが対応していない場合がある

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

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

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

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

ファイルサイズ

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/

サルワカ道具箱

上記のSquooshと同様に、Web上で変換が可能なサービスです。サルワカは、複数の画像を一括で変換することができる反面、画質や圧縮率など細かい調整を行うことはできません。

https://saruwakakun.com/tools/png-jpeg-to-webp/

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の導入を検討してみてはいかがでしょうか。