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変換
- FinderからWebPを開く方法
- PNG8→WebPへの変換
- PNG32→WebPへの変換
まずは、コマンドラインでかんたんにWebP形式へ画像変換できるとのことなので、PNG→Webpへの画像変換を試してみます。
なお、PNGには取り扱う色の数で複数の種類が存在します。取り扱う色のbit数からPNG8やPNG32と呼ばれるようです。
当記事ではWebPへの変換手順を紹介しつつ、元となったPNG形式の違いで、どの程度ファイルサイズに差が生じるかを確認します。
変換元となるPNGは以下の2ファイルです。
- オリジナルのPNG32(177KB)
- オリジナルから圧縮処理をしたPNG8(48KB)
めいどちゃんのオリジナル画像(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
FinderからWebPを開く方法
WebPはchromeで開くことが可能ですが、chromeでいちいち開くのは不便です。
そこで、Finder上からWebPを開くことができるようになるプラグインをインストールします。
https://github.com/emin/WebPQuickLook
インストールが完了すると、Finderが他の画像と同様にWebPを認識してくれるようになります。また、Finder上からのクイックルック(画像を選択した状態でspaceキー)でWebPを開けるようになります。
コマンドラインでWebPへ変換
準備が完了したら、-oオプションを利用しPNG形式の画像をwebp形式に変換し出力します。
$ cwebp test.png -o test.webp
PNG32→WebPへの変換
変換後の画像は以下の通りです。WebP形式の画像はQiitaにアップロード出来なかったので、以下はWebPを開いてスクリーンショットした画像です。
若干の画質劣化と少々色味が変化していますが、元の画像と比較しないとあまり変化を感じないと思います。
再びおめめを拡大してみました。ここまで拡大すると色味の変化がハッキリ見て取れます。
色鮮やかなピンクで表現されているPNGに対して、WebPのほうは色がくすんでいます。
もしも、ピンク系商材を扱う通販サイトがあった場合、この変化は致命的ではないでしょうか・・・
画像ファイルのサイズは、177KB→36KBと 約79%ファイルサイズが削減される 結果になりました。
PNG8→WebPへの変換
こちらも見比べないと全く違いがわからないと思いますが、以下が出力結果です。
おめめの拡大画像です。WebP32からWebPへ変換したものと比較して、色のくすみ方が強く感じます。
画像ファイルのサイズは、48KB→33KBという32%ファイルサイズが削減されるという結果でした。
既にPNG8へ圧縮処理されているせいか、ファイルサイズは小さくなるものの、PNG32を変換した結果と比べて劇的な削減は出来ませんでした。
まとめ
ファイルサイズの変化
- PNG8:48KB → WebP:33KB (約32%削減)
- PNG32:177KB → WebP:36KB (約79%削減)
色味の変化
- PNG8 → WebP(より色がくすむ)
- PNG32 → WebP(色がくすむ)
PNGファイルをWebPに変換する際は、PNGファイルの軽量化処理の有無に関わらず、
同程度のファイルサイズに圧縮されることがわかりました。
PNG8から変換した際は色のくすみ方が強くなってしまったので、
PNGをWebPに変換する際はPNG32形式を使うのが良さそうです。
なお今回の実験は、cwebpコマンドをデフォルトで実行した場合の結果です。
cwebpコマンドは様々なオプションが用意されており、圧縮率を高めたり色味の変化を抑えるといったことができるようです。
実業務で利用するとなると色味の変化は気になるところですので、引き続き、WebPへ変換する際はどのオプションを使うと最適か色々試していきたいと思います。