WebPって何？次世代の画像圧縮形式とは

みなさんこんにちは、いしかわつかさです。

今回、ご紹介するのは、次世代の画像圧縮形式であるWebP（ウェッピー）についてです。

画像圧縮形式で有名なのはJPEG、PNG、GIFのだと思います。
BMPやTIFFなどありますが、Webで使用出来ないのでここでは割愛します。

僕のWebサイトでもそうですが、多くの画像を使用するWebサイトは表示に時間がかかることがあります。
今回、この題材を取り扱うのもそこを改善する事が一番の目的です。

特に何も考えない僕はとりあえず、PNGを利用する事が多いです。

次世代の高圧縮画像フォーマットWebP（ウェッピー）について、一緒に勉強して行きましょう。

WebPとは?

簡潔に説明すると、Webに特化した軽量で高速で読み込み事を目的とした画像データファイルのことです。

実は、ここ最近開発された形式ではなく、Googleが2010年頃に開発したそうです。
発表された当時は、対応するブラウザが限られており、とても優秀なデータ形式にも関わらず、対応ブラウザが限られていることから、注目を浴びませんでした。

しかし、2018年には主要ブラウザであるFirefoxやMicrosoft Edgeに、2020年にはiOS14とSafariに対応した事により、主要ブラウザでWebPが利用できるようになりました。
大きな障害がなくなったことで、今後は普及しくと思います。

軽量って具体的にどれぐらい軽くなるの？

ここですよね。みなさんが気になる所は。Wikipediaでは、こう記してあります。

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している。一方、非可逆圧縮では、2013年10月に行われたMozillaの比較調査で、旧来のJPEGと大して変わらないという結果となった。

Wikipedia

ざっくりいうと従来のJpegやPNGのデータ容量に比べると、20〜30％程度小さくなるということらしいです。

JPEGとWebPの写真をUPしました。違い分かりますか？

WebPとJPEG・PNG・GIFの違い

Webサイトで用いられる画像形式はおもに、JPEG/PNG/GIFです。
各形式によって画像圧縮率や圧縮方法などが異なり、それぞれにメリットとデメリットがあります。
使用される頻度が高いJPEG/PNG/GIFの特徴を理解する事で、WebPの理解を深めて行きましょう。

写真に適した「JPEG（ジェイペグ）」

JPEGはJoint Photographic Experts Groupの略語でです。
フルカラー1670万色を表現できる事が一番の特徴です。その特徴からデジタルカメラの保存形式に採用されています。
データ量も比較的軽いため、画像の保存に一番適した形式とされています。

WebPと比較すると、ともに非可逆圧縮で一度圧縮すると元の状態に戻すことができません。
WebPはデータ量が比較的軽いとされているJPEGよりも軽いです。

Webに適した「PNG（ピング）」

PNGはPortable Network Graphicsの略語です。JPEGと同じくフルカラー1670万色を表現でき、画像の質を維持したまま透過処理ができるのが特徴です。
透過処理が出来る為、Webで利用される事が多く、保存を繰り返しても画質が劣化することが無い為、取り扱いに気を使いません。ですが、データ容量がJPEGの倍以上になるといわれています。

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

アニメーションができる「GIF（ジフ）」

GIFはGraphics Interchange Formatの略語です。アニメーションに対応していることが大きな特徴です。
可逆圧縮も透過処理も可能ですが、表現できる色の数が最大256色の為、場合によっては色彩表現は荒くなります。

WebPと比べるとGIFと圧縮方式こそ異なりますが、やれる事は似ています。
アニメーション圧縮時の容量は、GIFよりもWebPのほうが軽くなります。

画像形式	WebP	JPEG	PNG	GIF
圧縮方式	非可逆圧縮	非可逆圧縮	可逆圧縮	可逆圧縮
透過
アニメーション

メリットとデメリット

結論から言うと、メリットしか無いです。他の画像形式と比較ても欠点は非可逆圧縮である事が挙げられますが、それはデータが軽くなることにも繋がるため、デメリットとも言い難い。
あまりデメリットがありませんが、あえてケチを付けるならという意味でデメリットもありますが、些細な事です。
その辺りをまとめました。

メリット1：表示速度の改善

散々、ここまでデータが軽い事を言って来たので、Webサイトで使用する全ての画像をWebPに変換することで、サイトを表示する速度を上げることができます。

ユーザーが興味・関心を抱いてサイトへ移動しても、サイトの読み込み時間が長いと離脱する恐れもあるため、表示速度を上げてサイト読み込み時間を短縮することは、メリット以外ありません。

メリット2：SEO対策

ページの表示速度が上がるということは、Googleの検索アルゴリズムにおける評価ポイントの一つです。
有益なページと判断され上位表示が見込めるため、SEO対策にもなります。

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

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

ただ、これがあるから導入しないという判断にはならないレベルだと思います。

デメリット2：画像の変換

既存のサイトの画像全ての保存形式を変更するのはとても大変です。
ですが、変換するプラグインも出ているので、やり方は色々ありそうな気がします。

参考に、「WebP Converter for Media」をご紹介します。
これは、メディアに登録されている画像をWebPに自動変換し、かつWebP対応されているサイトと非対応のサイトへの切り替えも勝手にやってくれる優秀なプラグインです。

画像をWebpへ変換する

ブラウザ上で変換する

既に変換したい画像があればブラウザ上で変換するのが一番手っ取り早いです。2018年にGoogleが発表したツールが便利です。WebPはもちろん、SVGなど変換が可能な為、普段使いにも困らないとと思います。

Photoshopで変換する

Photoshopのバージョン 23.2よりWebP のネイティブサポートが開始されました。
これによりプラグインを使わずとも変換できるようになりました。

「コピーを保存」を開き、ファイル形式ドロップダウンメニューのオプションから「WebP」を選択して WebP ファイルを保存します。Photoshop 23.1以前のバージョンで編集するには、WebPShopプラグインをダウンロードしてインストールする必要がありますので注意して下さい。

まとめ

Webライフを快適に過ごすには、サクサク動かせるかどうかがカギです。
僕のサイトでも今後は、WebPで対応していこうと思っています。
Photoshopがネイティブ対応してくれたのがうれしいですね。いちいち変換するのも大変なので。
みなさんもご検討下さい。