WebPとは

WebPは、Googleが開発した新しい画像形式です。従来の画像形式であるjpegやPNGよりも高い圧縮率が特徴で、jpegやPNGからWebPに変換することでファイルサイズの削減が見込めます。
Googleの公式ページに、WebPはPNGと比較し26％サイズを小さく出来るといった記載があります。

WebP lossless images are 26% smaller in size compared to PNGs.
https://developers.google.com/speed/webp

また、Webページにおいては、WebP形式の画像を採用することでページ描画速度を改善し、Googleが打ち出しているCoreWebVitalsスコアに好影響を及ぼすことが期待できます。

本記事で取り扱う内容について

※当記事は、MacOSを想定して記述します。　

まずは、コマンドラインでかんたんにWebP形式へ画像変換できるとのことなので、PNG→Webpへの画像変換を試してみます。

なお、PNGには取り扱う色の数で複数の種類が存在します。取り扱う色のbit数からPNG8やPNG32と呼ばれるようです。

当記事ではWebPへの変換手順を紹介しつつ、元となったPNG形式の違いで、どの程度ファイルサイズに差が生じるかを確認します。

変換元となるPNGは以下の2ファイルです。

めいどちゃんのオリジナル画像(PNG32)は、エンジニア向けフリー素材集からダウンロードいただけます。
https://yumenosora.co.jp/tora-lab/special

PNG8へは、TinyPNGといったオンラインツールやPNGooやAntelopeといったフリーウェアを用いることで圧縮できます。

通常の画像サイズですとPNG32とPNG8の画像の違いがわかりにくいので、それぞれの形式でめいどちゃんのおめめを拡大した比較画像を作成しました。

色の境界に注目すると、PNG32よりもPNG8形式の方がより同色が使われていることがわかります。

HomebrewでGoogleが開発したWebP変換パッケージをインストールします。
https://formulae.brew.sh/formula/webp#default

$ brew install webp

インストールが完了したら、cwebpコマンドが利用できるようになります。
オプション-Hでcwebpコマンドの使い方が表示出来ることを確認します。

$ cwebp -H

cwebpコマンドの利用方法については、公式ページでも解説されていますので以下のリンクからご確認いただけます。
https://developers.google.com/speed/webp/docs/cwebp

WebPはchromeで開くことが可能ですが、chromeでいちいち開くのは不便です。
そこで、Finder上からWebPを開くことができるようになるプラグインをインストールします。
https://github.com/emin/WebPQuickLook

インストールが完了すると、Finderが他の画像と同様にWebPを認識してくれるようになります。また、Finder上からのクイックルック(画像を選択した状態でspaceキー)でWebPを開けるようになります。

準備が完了したら、-oオプションを利用しPNG形式の画像をwebp形式に変換し出力します。

$ cwebp test.png -o test.webp

変換後の画像は以下の通りです。WebP形式の画像はQiitaにアップロード出来なかったので、以下はWebPを開いてスクリーンショットした画像です。

若干の画質劣化と少々色味が変化していますが、元の画像と比較しないとあまり変化を感じないと思います。

再びおめめを拡大してみました。ここまで拡大すると色味の変化がハッキリ見て取れます。
色鮮やかなピンクで表現されているPNGに対して、WebPのほうは色がくすんでいます。
もしも、ピンク系商材を扱う通販サイトがあった場合、この変化は致命的ではないでしょうか・・・

画像ファイルのサイズは、177KB→36KBと 約79%ファイルサイズが削減される 結果になりました。

こちらも見比べないと全く違いがわからないと思いますが、以下が出力結果です。

おめめの拡大画像です。WebP32からWebPへ変換したものと比較して、色のくすみ方が強く感じます。

PNGファイルをWebPに変換する際は、PNGファイルの軽量化処理の有無に関わらず、
同程度のファイルサイズに圧縮されることがわかりました。

PNG8から変換した際は色のくすみ方が強くなってしまったので、
PNGをWebPに変換する際はPNG32形式を使うのが良さそうです。

なお今回の実験は、cwebpコマンドをデフォルトで実行した場合の結果です。
cwebpコマンドは様々なオプションが用意されており、圧縮率を高めたり色味の変化を抑えるといったことができるようです。

実業務で利用するとなると色味の変化は気になるところですので、引き続き、WebPへ変換する際はどのオプションを使うと最適か色々試していきたいと思います。