WebPとは

・Googleが新しく作った画像フォーマット
・ファイルの拡張子は「.webp」
・JPEGに比べてファイルサイズが小さく、画質も劣化しにくい
・WebPの最大ピクセル数は16383x16383ピクセル
・読み方はウェッピー
・アルファチャンネル透明度とアニメーションもサポート
・lossy圧縮の画像フォーマット

アルファチャンネルとは・・・デジタル画像処理において、透過度の情報を扱うために用意された補助的なデータ領域のこと
lossy圧縮とは・・・データを圧縮して保存する形式のうち、データ量の削減を加える方式の総称

Wikipedia

歴史

・2010年9月30日にGoogle Chromeの公式ブログ上で仕様公表
・2011年　Google社がGoogle Chrome 9.0とAndroid 4.0をリリースし、WebPに対応

WebPの仕組み

Lossy WebP圧縮では、予測コーディングを使用して画像をエンコードします。これは、VP8ビデオコーデックがビデオのキーフレームを圧縮するのと同じ方法です。予測コーディングでは、ピクセルの隣接ブロックの値を使用してブロックの値を予測し、差分のみをエンコードします。
ロスレスWebP圧縮は、新しいピクセルを正確に再構築するために、すでに見た画像フラグメントを使用します。興味深い一致が見つからない場合は、ローカルパレットを使用することもできます。

引用元：https://developers.google.com/speed/webp

メリット

・「画像サイズを小さくできる」
・JPEGと比較して25-34%小さくなる

デメリット

対応ブラウザが少ない

現時点（2020年2月）では、
IE、Safari、iOS Safariが対応していない。

Googleが提供するWebP変換のためのコマンド

cwebp

画像ファイルをWebPファイルに圧縮する
入力形式は、PNG、JPEG、TIFF、WebP

cwebp -q 80 image.png -o image.webp

オプションはcwebpドキュメント参照

dwebp

WebPファイルを画像ファイルに解凍

dwebp image.webp -o image.png

gif2webp

GIF画像をWebPに変換する

gif2webp [options] input_file.gif -o output_file.webp

img2webp

入力画像のシーケンスからアニメーションWebPファイルを作成

img2webp argument_file_name

JPEGとWebP画像ページ表示速度比較

画像を10枚表示させて、表示速度の違いを計測
（WebPには、画像変換サイトsyncerで変換）
（設定は、Lighthouse下記参照）

結果

基本的な速度に違いは見られず、WebPの方が表示に若干時間がかかっていた。
（圧縮していないためと思われる）

ここで、変換ツールによって、サイズは変わるのかどうか気になり、様々な変換ツールを調査。

変換ツール比較

元々のJPG画像
1,505,224 バイト（ディスク上の1.5 MB）

https://lab.syncer.jp/Tool/Webp-Converter/
1,115,864 バイト（ディスク上の1.1 MB）

https://www.aconvert.com/jp/image/webp-to-jpg/
886,462 バイト（ディスク上の889 KB）

https://squoosh.app/
909,570 バイト（ディスク上の913 KB）

変換ツールによって、画像サイズが異なる。

brew install webp
cwebp test.png -o test.webp

上記コマンドで変換する場合
912,966 バイト（ディスク上の918 KB）

もう一度パフォーマンス比較

Homebrewで変換したWebP画像でもう一度パフォーマンス速度を測定。

その他情報

Chrome拡張機能

・WebPをハイライトして表示できる
https://chrome.google.com/webstore/detail/webp-highlighter/aonapkfkfneahhaonjjpmcabpnbdmojl
・右クリックでWebPとして保存できる
https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd

参考文献

Lighthouseの指標
https://keys-note.com/how-to-pagespeed-insights/
Properly size images
https://developers.google.com/web/tools/lighthouse/audits/oversized-images
画像の最適化を自動化する
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization?hl=ja
weblio：WebPとは
https://www.weblio.jp/content/WebP
WebPとJPEGの圧縮はどこが違うか
https://tshino.hatenablog.com/entry/2019/05/01/051533