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

画像を保存するときに「.webp」という拡張子を見かけたことはないでしょうか？これはWebP（ウェッピー）という、Googleが開発した画像ファイル形式なんです。

JPEGやPNGなどの良いとこ取りをしている仕様なうえ、画像ファイルが軽くWebサイトの表示速度改善に役立つと言われています。

そんなWebPについてを、この記事で解説しています。使用するメリットデメリットや、WebP⇔JPEG・PNGの変換方法などを解説しています。ぜひ参考にしてください。

WebP（ウェッピー）とは？

WebP（ウェッピー）とは、2010年にGoogleが開発・発表した画像ファイル形式です。拡張子は「.webp」です。

従来のJPEGやPNGよりも、画像の劣化を最小限に抑えつつサイズの軽量化を可能にしています。ただしWebPはビットマップ画像なので、画像を拡大すると画質が劣化するのはJPEGやPNGなどと変わりません。

ほとんどのブラウザに対応している

参照：WebP image format

2024年4月現在、WebPはほとんどのブラウザに対応しています。Chrome・Edge・Firefox・Safari・Operaなど、IE以外で利用可能です。

Android・iPhoneも、バージョンアップして最新状況になっているのであれば問題なく使えます。

リリース当時はGoogleが開発した拡張子だったこともあり、MicrosoftやAppleでの導入が遅れていましたが、今ではJPEGやPNGと並んでいるといってもいいでしょう。

WebPの最大の特徴は圧縮・復元の両方に対応していること

従来の拡張子は、「可逆圧縮」「非可逆圧縮」のどちらかしかできませんでした。ですが、WebPは両方に対応しており、圧縮・復元で画質を維持しながら高い圧縮率を実現してます。

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

可逆圧縮は、圧縮にされたデータを保持していて、完全に元通りに復元することができます。ただし、非可逆圧縮に比べて圧縮率が低いのが難点です。PNGやGIFがこの形式です。

非可逆圧縮とは

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

つまり、両方に対応しているWebPは、圧縮されたときのデータを保持しているにもかかわらず、画質が良く圧縮率が高いのです。復元時も、元のデータがあるので従来通りに戻せます。

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

WebPの特徴を聞くと、使ったほうが良いと思いますよね。ですがメリットもデメリットも存在するのです。事前に知っておきましょう。

WebPの5つのメリット

WebPの主なメリットは以下の5つです。

• 画質を維持したまま画像サイズの軽量化が可能
• WebPに一本化できる
• Webページの表示速度を改善できる
• 背景の透過が可能
• アニメーションにも対応

画質を維持したまま画像サイズの軽量化が可能なうえ、静止画もアニメーションもWebPで保存できるので1本化が可能です。

PNGで保存していた背景透過画像（アルファチャンネル）にも対応しているので、それぞれの拡張子の良いところを取ったのがWebPです。

WebPの3つのデメリット

ただし、WebPにもデメリットが存在します。

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

バージョンアップしていない古いブラウザとIEには対応していません。常にパソコンやスマホを最新にしておきましょう。

また、WebPは使用するツールやコンテンツによって変換の手順が違います。手間に感じることが多いです。そのうえ、比較的新しい拡張子なので、画像編集ソフトが対応していない場合があります。

WebP・JPEG・PNG・GIFの違い比較

WebPと、JPEG・PNG・GIFの違いをまとめました。比較する際に利用してください。

ファイルサイズはWebPが最も軽い

WebPの開発元であるGoogleによると、同等の画質でJPEGより約25～34％、PNGより約26％も軽くできると発表しています。

有名な拡張子の中では、WebPのファイルサイズが最も軽いということです。

WebPは背景透過も可能

WebPは背景透過も可能です。今までは、背景透過するか否かでJPEGとPNGを使い分ける必要がありましたが、すべて1本化できます。非可逆圧縮の画像でありながら、透過に対応しているのはうれしいところです。

GIF変換なしでアニメーション作成ができる

WebPのままアニメーション作成も可能です。JPEGの画像をGIFに変換する手間がありません。先に紹介したように、背景透過にも対応しているのでそのままアニメーションを作れます。

WebPの変換・生成方法

WebPの拡張子で画像を生成する方法や、JPEGやPNGをWebPに変換する方法をまとめました。

画像変換のフリーソフトを使う

参照：サルワカ道具箱

Web上やアプリで、画像変換のフリーソフトがあります。ほとんどが、画像ファイルをドラッグ＆ドロップするだけでWebPに変換可能です。

ペイントを使ってJPEN・PNGに変換

意外に思われるかもしれませんが、Windows10にデフォルトで入っているペイントもWebP形式の画像を読み込めます。そのためWebP→JPEG・PNGの拡張子に変更が可能です。

WebP形式の画像をペイントで読み込み、編集した後に、名前を付けて保存でJPEG・PNGを選ぶだけです。なおペイントでは、JPEG・PNG→WebPでの保存はできないので気を付けてください。

画像データ変換のWebアプリ「Squoosh」で変換

参照：Squoosh

画像データ変換「Squoosh」は、Googleが開発したWebアプリです。WebPとの相性が良く、最も一般的な変換の手法と言われています。

Squooshのホームページにアクセスし、PCの中にあるWebPに変換したい画像データを画面上にドラッグ&ドロップしてください。画面上が画像の編集画面に切り替わるので、編集後に右下の青いボタンで保存しましょう。

圧縮形式はWebP以外にもJPEGやPNGなど9種類のフォーマットを選べます。また、画像の品質やサイズ、色数なども調整可能です。スライダーを動かして圧縮率などを弄ってみてください。

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

参照：WebPShop

プラグイン「WebPShop」を使えば、PhotoshopでもWebP形式の画像を使えます。

ソースコード管理サービスであるGitHubからWebPShopのプラグインをダウンロードします。ダウンロードできたら「bin」フォルダを開きましょう。Macを使用している人はMac、Windowsを使用している人はWindowsと書かれてあるフォルダを開きます。

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

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

WordPressプラグインを利用

Webサイトを運営していて、WordPressを使っている人はプラグインを利用するのもありです。「WebP Express」「EWWW Image Optimizer」などは、サイト上の画像を自動的にWebP形式に変換してくれます。

WordPressのプラグインは、一度設定してしまえば自動的に最適化してくれます。面倒な手間がないのでおすすめです。

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

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

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

WebPはSEO対策として有効な拡張子

WebPのメリットでもある「画像ファイルの軽量化」は、Webサイトの表示速度を上げるために必要なものです。

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

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

Core Web VitalsもWebP導入の後押しになっている

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

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

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

画像の最適化はUXとしても重要！

WebPの画像ファイルの軽量化は、UX（ユーザー体験）の面から見ても非常に重要です。

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

このことから、Webサイトの表示速度はユーザーの離脱を防ぐための重要な手法だということがわかります。ページの表示速度を上げる方法は数多くありますが、WebPフォーマットによる画像サイズの軽量化をすることで画像データの最適化を図ってみてはどうでしょうか。