WebPとは
・Googleが新しく作った画像フォーマット
・ファイルの拡張子は「.webp」
・JPEGに比べてファイルサイズが小さく、画質も劣化しにくい
・WebPの最大ピクセル数は16383x16383ピクセル
・読み方はウェッピー
・アルファチャンネル透明度とアニメーションもサポート
・lossy圧縮の画像フォーマット
アルファチャンネルとは・・・デジタル画像処理において、透過度の情報を扱うために用意された補助的なデータ領域のこと
lossy圧縮とは・・・データを圧縮して保存する形式のうち、データ量の削減を加える方式の総称
歴史
・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