WebPとその他画像形式の違いとは？3つのメリットと変換方法解説

多くの画像を使用するWebサイトは表示に時間がかかることがあります。そこで注目を集めているのが、圧縮率の高い画像フォーマットWebP（ウェッピー）です。
今回は、JPEGやPNG、GIFなどの保存形式との違いや変換するメリットについて解説します。

WebPとは圧縮率の高い画像形式のこと

WebPはGoogle公式の画像形式で、圧縮率が高いのが大きな特徴です。2010年9月に発表された当時は、対応するブラウザが限られており、高性能な画像形式ではあるものの、対応ブラウザが限られていることから、長らく普及が進まないままでした。

その後、2018年には主要ブラウザであるFirefoxやMicrosoft Edgeに、2020年にはAppleのiOS14とSafariに対応することが発表されます。これにより主要ブラウザでWebPが利用できるようになりました。

iPhoneの普及が進む日本では、Safariに対応していなかったWebPは避けされがちでしたが、今後は加速度的に普及していくことが予測されています。

WebPとJPEG・PNG・GIFの違い

Webサイトで用いられる画像形式はおもに、JPEGやPNG、GIFなどです。各形式によって画像圧縮率や圧縮方法などが異なり、それぞれにメリットとデメリットがあります。
ここからは、使用される頻度が高いJPEGやPNG、GIFの特徴を紹介しつつ、WebPとの違いについて解説します。

写真の保存形式に適した「JPEG」

Joint Photographic Experts Groupの略語であるJPEG（ジェイペグ）は、表現できる色の数が豊富でデータ量も比較的軽いため、画像の保存に適した形式とされています。
一方、画像の圧縮率がWebPより低いため、データ容量が大きくなってしまうのがデメリットです。
また、透過処理には対応していないため、WebPにおける透過処理のように一部だけを切り抜いて表示させることができません。

ちなみに、JPEGとWebPはともに非可逆圧縮で、どちらも一度圧縮すると元の状態に戻すことができない点で共通しています。

Webの表示に適した「PNG」

Portable Network Graphicsの略語であるPNG（ピング）は、JPEGと同じく表現できる色の数が豊富で、画像の質を維持したまま透過処理ができるのが特徴です。たとえ保存を繰り返しても画質が劣化することはありませんが、データ容量がJPEGの倍以上になるといわれています。

PNGは可逆圧縮に対応しており、一度圧縮しても元の状態に戻すことが可能です。また、WebPはアニメーションに対応していますが、PNGは対応していません。

アニメーションが利用できる「GIF」

Graphics Interchange Formatの略語であるGIF（ジフ）は、アニメーションに対応していることが特徴で、可逆圧縮も透過処理もできます。ただし、表現できる色の数が最大256色と少なく、画像が粗くなりがちです。

WebPはGIFと圧縮方式は異なりますが、透過処理やアニメーション対応などはGIFと共通しています。ちなみに、アニメーション圧縮時の容量は、GIFよりもWebPのほうが軽くなります。

WebPを使用するメリットとデメリット

WebPは、JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えたフォーマットです。そのため、画像を多く使用するWebサイトに適しているといえます。
しかし、既存のWebサイトを軽量化する場合、JPEGやPNG、GIFで保存した画像をすべてWebPに変換するために多くの時間と手間を要することもあるでしょう。

ここでは、WebサイトでWebPを使用するメリットとデメリットをそれぞれ解説しますので、ぜひ変換を検討する際の参考になさってください。

WebPを使用する3つのメリット

WebサイトにおいてWebPを用いるメリットは、大きく3つあります。
まずは、WebP活用のメリットについて詳しく見ていきましょう。

メリット1：表示速度を改善できる

Webサイトで使用する画像をすべてWebPに変換することで、サイトを表示する速度を上げることができます。WebPへの変換で画像が軽量化されるため、サイトの読み込み時間が短縮されるためです。

ユーザーが興味・関心を抱いてサイトへ移動しても、サイトの読み込み時間が長いと離脱してしまうおそれがあります。表示速度を上げてサイト読み込み時間を短縮することは、ユーザー側のストレス軽減や離脱率低下につながり、離脱率が下がることでサイト滞在時間が長くなるため、より多くのユーザーに記事を読んでもらえるようになるのです。

メリット2：画像サイズを軽量化できる

画像のファイルサイズを軽量化できる点もWebP活用のメリットです。JPEGと比較すると、WebPの場合25～34％ほど圧縮して画像を扱うことができます。

圧縮した画像を比較すると、画質の荒さや見た目の印象はほぼ変わらないにもかかわらず、ファイルサイズは大きく減少しています。
Webサイトに課金制クラウドサービスを利用している場合、画像をWebPで軽いデータに変換することでクラウド料金軽減にもつながるでしょう。

メリット3：圧縮率の向上でSEO対策になる

ページの表示速度は、Googleの検索アルゴリズムにおける評価ポイントの一つです。WebPに変換して表示速度を改善すると、ユーザーの離脱率を減少させる効果が得られるだけでなく、有益なページと判断され上位表示が見込めるため、SEO対策にもなります。

ただし、サイト内全画像の形式変換には時間と手間を要するため、画像データ以外の要素が読み込み速度を悪化させていないかなど、改善事項の優先度を見極めて対応することが大切です。

WebPを使用する2つのデメリット

WebPには上述のようにさまざまなメリットがありますが、デメリットがないわけではありません。
ここでは、WebPを使用する際におさえておきたいデメリットについて解説します。

デメリット1：非対応のブラウザがある

対応可能なブラウザを増やし続けているWebPですが、すべてのブラウザに対応しているわけではありません。
最近では2020年9月からiOS版のSafari（14.3以降）でもWebPの使用が可能になりましたが、古いブラウザやInternet Explorerは非対応のままです。（2021年7月現在）

デメリット2：画像を変換する必要がある

当初WebPは、対応ブラウザが少なかったことから広く普及しなかったため、現在でも多くの人がPNGやJPEGで画像を保存してWebサイトに使用しているのが実状です。
PNGやJPEGなどの従来の形式で使用されている画像をWebP形式に変換するためには、変換する手間と時間がかかります。
また、サイトをwebpに対応させるために新たにURL構築を行う必要もあります。

画像データをWebPに変換する方法

従来の主流であったPNGやJPEGなどの画像形式からWebPに変換する方法は、大きく分けて3つあります。
それぞれの変換方法について詳しく紹介しますので、ご自身に適した方法で画像データをWebPに変換しましょう。

変換方法1：画像データの変換サイトを活用する

画像形式を変換する一般的な方法は、変換サイトを活用することです。現在、ブラウザ上で形式を変換するためのサービスは数多く提供されているので、比較・検討して最適な変換サイトでデータを変換しましょう。

たとえば、Google社が開発した「Squoosh」の場合、サイトにアクセスし指定の場所に変換したい画像をドラッグ・アンド・ドロップするだけで変換が可能です。
画像の圧縮形式は、WebP以外にJPEGやPNGなど全9種類あり、画像の品質やサイズ、色数なども選ぶことができます。

変換方法2：Photoshopで画像データを変換する

WebPの画像データをそのままPhotoshopに読むことはできませんが、Google社が提供しているPhotoshop用のプラグイン「WebPShop」をインストールすると、WebP画像を開いたり編集したりできるようになります。

インストールの手順は、プラグインのダウンロード後、binフォルダ内の「WebPShop.8bi」（Macの場合はWebPShop.plugin）をPhotoshop内のPlug-insの中に複製するだけです。

変換方法3：コマンドを使用して変換する

キーボードで入力したテキストで命令を出し、コンピューターと直接対話できるコマンドラインの操作に慣れている方の場合は、コマンドラインツールを使用するのがおすすめです。

コマンドラインツールには「cwebp」と「dwebp」の2種類があり、それぞれ開発者向けに立ち上げられたサイト「Google Developers」から直接ダウンロードできます。コマンドラインツールを活用すれば、複数のファイルを一度に変換することも可能です。

WebPに変換してサイトの表示速度を上げよう！

圧縮率が高い画像フォーマットWebPは、サイトの表示速度を上げたり、画像サイズを軽量化したりできるだけでなく、SEO対策にも効果的です。現在では対応可能なブラウザも増え、2020年9月にはiSO版のSafariにも対応することが発表されたことから、WebPへの変換を検討している企業も増えてきています。
サイトリニューアルやさらなるSEO対策の一環としても、ぜひWebPをご活用ください。