画像フォーマット	WebP	JPEG	PNG	GIF
圧縮方式	可逆圧縮・非可逆圧縮	非可逆圧縮	可逆圧縮	可逆圧縮
透過	〇	×	〇	△
アニメーション	〇	×	×	〇
色	1,677万色	1,677万色	256色、1,677万色	256色

WebP と JPEG の違い

JPEG とは、デジタル画像の代表的な画像フォーマットで、写真の保存に適しています。
WebP と JPEG の大きな違いは、アニメーション表示と透過処理の可否です。
JPEG の場合どちらも不可ですが、WebP はアニメーション表示と透過処理の両方に対応しています。

WebP と PNG の違い

PNG とは、画像データを圧縮して記録するファイル形式で、図やイラストの保存に適しています。
WebP と PNG の大きな違いは、アニメーション表示の可否です。
PNG の場合はアニメーション表示に対応していませんが、WebP は先述の通りアニメーション表示に対応しています。

また、圧縮方式の違いから、PNG に比べて WebP のほうが圧縮率が高いです。

WebP と GIF の違い

GIF とは、アニメーションに対応しているファイル形式です。
WebP と GIF の大きな違いは、色の対応している数です。
どちらもフルカラーに対応していますが、GIF の表現できる色数が256色に対して、WebP は1,677万色と非常に多いです。
GIF に比べ、WebP はきれいなまま画像を軽量化できます。

【補足】画像の圧縮方式の違い

圧縮方式によって、画像の圧縮率が変わります。
画像の圧縮方式は、「可逆圧縮方式」と「非可逆圧縮方式」の2種類があります。

可逆圧縮方式

可逆圧縮方式とは、画像データを圧縮した後、完全に元に戻すことができる圧縮方式です。
圧縮率は非可逆圧縮と比べて低いです。

非可逆圧縮方式

非可逆圧縮方式とは、画像データを圧縮した後、完全に元に戻すことができない圧縮方式です。
圧縮率は可逆圧縮と比べて高いです。

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

この章では、WebP を使用するメリットとデメリットについて解説します。

WebP を使用するメリット

WebP を利用するメリットは、画像ファイルを軽量化できることです。
画像ファイルはサイトのソースコードと比べてファイル容量が大きい傾向にあります。
そのため、画像ファイルの軽量化はサイトの表示速度の改善に大きく貢献します。

また、サイトの表示速度を改善することで直帰率が減少したり、SEO 対策になるなどのメリットがあります。

サイトの表示速度の重要性について詳しく知りたい方は以下をご覧ください。
【参考】サイトの表示速度の重要性とは？｜Google が重視するポイントと対策
https://fastest.jp/blog/site-page-speed/

WebP を使用するデメリット

WebP のデメリットは、古いブラウザには対応していないものがあることです。
非対応ブラウザの場合、picture タグなどを用いて、JPEG や PNG などの代替フォーマットの画像を表示させる必要があります。
ただし、現状では非対応のブラウザはほとんどありません。

出典：WebP image format | Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/webp

【補足】picture タグを使って JPEG や PNG などの代替フォーマットの画像を表示させる方法

WebP がサポートされていない古いブラウザを考慮する際には、JPEG や PNG が WebP の代わりに表示されるよう HTML を調整しましょう。

以下のように HTML で記述することで、WebP がサポートされている場合は WebP を、サポートされていない場合は JPEG や PNG を表示できます。

<picture>
   <source srcset="./images/example.webp" type="image/webp">
   <img src="./images/example.png">
</picture>

なお、上記は記述の一例です。
実際に実装する場合には、各サイトに適した形で実装し、必ず検証を行ったうえで本番環境へ適用してください。

WebP への変換方法

従来の画像フォーマットである JPEG や PNG 、GIF などから WebP に変換する方法は大きく分けて4つあります。

・ウェブサイト高速化ツールで変換する
・画像軽量化ツールで変換する
・プラグインで変換する
・コマンドラインツールで変換する

ウェブサイト高速化ツールで変換する

ウェブサイト高速化ツールは、サイトの表示速度を改善するための機能を持ちます。
様々なツールがあるため、目的に応じてツールを使い分けることが重要です。

FasTest（ファーステスト）

FasTest は、1クリックで既存のページの表示速度を改善できる、ウェブサイト高速化ツールです。
既存のページ内の画像を自動で WebP に変換できます。
ページ単位で画像の変換ができるため、変換する際の画像のアップロードやダウンロード、HTML の書き換えの手間が省けます。
そのため、時間をかけずにページの表示速度を改善したい方におすすめです。

また、画像フォーマットの変換以外にもページ速度を改善するための多くの機能があります。
FasTest の主要な機能については以下をご覧ください。
【参考】FasTest｜ページスピード改善機能
https://fastest.jp/tools/

画像軽量化ツールで変換する

画像軽量化ツールはブラウザに画像をアップロードするだけで画像の軽量化が行えます。
一部の画像軽量化ツールでは、画像を軽量化するとともに、画像フォーマットを WebP に変換できます。

Squoosh

Squoosh は Google が開発した画像軽量化ツールです。
1枚ずつしか変換できませんが、WebP への変換が簡単で圧縮前後の画質を比較しながら圧縮率の調整が行えるため便利です。
そのため、変換する画像が少なく圧縮率を自分で調整したい方におすすめです。

サルカワ道具箱

サルカワ道具箱は画像フォーマットの変換だけでなく、ブラウザで使える便利なツールを集めたサイトです。
「WebP 画像へ変換」機能を利用すると、複数の画像を一括で変換できます。
ただし、圧縮率の調整はできません。
そのため、圧縮率のこだわりがなく複数の画像をまとめて変換したい方におすすめです。

プラグインで変換する

プラグインを導入すれば、プラグインを導入済みの各ツール上で画像フォーマットを変換できます。
また、画像軽量化ツールと比べて機能が豊富です。

WebP Express

WebP Express は、WordPress 用のプラグインです。
WebP Express を利用することで、ウェブサイトの画像を WebP に変換します。 WebP に対応するブラウザには WebP で、非対応のブラウザには元の画像フォーマットで表示できます。

コマンドラインツールを使用する

コマンドラインの操作に慣れている方は、コマンドラインツールで WebP への変換が可能です。
JPEG 、PNG 、TIFF を WebP に変換する場合は「 cwebp 」を使用します。
一方で WebP から PNG に変換する際には「 dwebP 」を使用します。

cwebp で JPEG 、PNG 、TIFF から WebP に変換

以下のコマンドを入力することで JPEG 、PNG 、TIFF を WebP に変換できます。

cwebp test.jpeg -o test.webp

dwebp で WebP から PNG に変換

以下のコマンドを入力することで WebP を PNG に変換できます。
JPEG に変換できないため注意が必要です。

dwebp test.webp -o test.png

まとめ

本記事では、Google が表示速度高速化を目的として開発した新しい画像フォーマットである WebP について解説しました。

WebP は圧縮率が高く、SEO 対策の一つである画像軽量化に適しています。

以前は WebP に対応しているブラウザが限られていましたが、現在は主要なブラウザのほとんどが対応しています。

そのため、今後の画像フォーマットは WebP が主流になっていくでしょう。

現在サイトに JPEG や PNE といった従来の画像フォーマットを使用しているようでしたら、WebP に変換しましょう。

なお、記事中でもご紹介しましたが、当社では、既存のサイト上の画像を1クリックで WebP に変換できるウェブサイト高速化ツール FasTest を開発・販売しております。

画像の軽量化だけでなく、誰でも簡単にページの表示速度を高速化できます。

無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。

無料トライアルはこちら

次世代の画像フォーマット WebP とは？メリットや変換方法を解説

WebP とは

WebP の概要と特徴

WebP と JPEG・PNG・GIF の違い