はじめに
※本記事は私の技術ブログから引用して作成しました。
この検証のきっかけですが、私が個人で運営しているサイトの開発で画像を沢山表示していたら、ページロードに凄く時間がかかったてしまったので原因分析のためにPageSpeed Insightsで調査してみたら次世代フォーマットでの画像の配信というキーワードが出て調査をしてみました。
画像のロードの速度を上げるやり方はいくつかあります。例えば、スクロール領域に応じて動的に画像をロードしたり、画像の画質を落としたり、画像を小さくしたりなどですが、今回は元の画像のサイズを縮小することなく画質も維持することはできないか？について色々調べて次世代画像フォーマット(Webp)を見つけて検証してみて検証結果がよかったのでJPGやPNGなどをWEBPに変換するサービスをOSS化してみた話です。
次世代画像フォーマットとは？
画像フォーマットと言えばpng,jpeg, gifが思い浮かびますよね？次世代画像フォーマットは簡単に言えばこの従来画像フォマットより優れた改良版です。次世代画像フォーマットの種類は幾つかありますが、全てが従来画像フォーマットより軽量で圧縮率が高いのが特徴です。
JPEGの次世代のJPEG 2000とJPEG-XRと米Googleが開発しているオープンな静止画像フォーマットのWebPが多く知られていますが、今回はブラウザーのサポートや普及率が高いWebPについて話したいと思います。
WebP（ウェッピー）とは？
WebPは、米Googleが開発しているオープンな静止画像フォーマット。ファイルの拡張子は「webp」。ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。 https://ja.wikipedia.org/wiki/WebP要するにJPGやPNGの代替が可能な画像フォーマットのことです。アルファチャンネルを扱えるので透明表現ももちろん可能。
Webpのブラウザサポート状況
緑になっているところがサポート状況。
IE以外は最新バージョンであればほとんど利用できます。
2年前のiPhoneやAndroidでは普通に見れます。
なぜ普及しない（個人的見解）？
まだまだ調査が足りないこともありますが、Amazonも使ってないしメルカリも使ってませんでした。
恐らくIE11で使えないからではないですか？（日本だけで2021年まだ2~3%利用ユーザーが存在する）
Webpを使ってる企業はある？
楽天市場がWEBPを利用していました。
URLから察するにjpgをwebpに変換しているようです。「?fitin=100:100」というクエリストリングを外したら本来のjpg画像で表示されました。数字をいじったらその大きさになったので変換システムがあるようですね。
WebPの評価
Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している https://ja.wikipedia.org/wiki/WebP#%E8%A9%95%E4%BE%A1WIKIによると平均約30%と小さくなりますね。実際に検証もしてみます。
WebPの評価検証
Googleが開発しているcwebpというツールを利用してJPG→WebPに変換して検証してみました。
下記の返還後の画像は画質が75%に変換（cwebpのデフォルト設定）で検証が行われました。（wikiにも書いてある通り設定変更で同一画像、同等画質にすることも可能）
###１番目画像（変換前） 1,560,772バイト（１.6MB）
###１番目画像（変換後） 360,120バイト(360KB)
###１番目画像（変換結果）
サイズ削減量の計算
((360120 - 1560772) / 1560772) * 100 = -76.92680289
1.6MB→330KBになって約-77%削減になります。
###２番目画像（変換前） 1,265,962バイト（1.3MB）
２番目画像（変換後） 205,600バイト(206KB)
###２番目画像（変換結果）
サイズ削減量の計算
((205600 - 1265962) / 1265962) * 100 = -83.759386143
1.3MB→206KBになって約-84%削減になります。
Chromeブラウザーのインスペクターで確認
変換前（PNG）
変換後（WebP）
※ファイル名は気にしないでください。Reactを使ってるので画像名にハッシュが付きました。
ファイルサイズが小さくなりダウンロード速度が上がったことが確認できます。
画像フォーマットをwebpに変換するOSS公開
Githubに公開しました。
Dockerもあるので気軽にローカル環境でテストもできると思います！
手順もREADMEに書いたのでぜひお試しください。
まだ開発途中ですが、こちらのAPI仕様書（Swagger）でAPI呼び出しで変換もできます。（サーバーの負荷対策で3M以上画像は変換できません）
※今は無料で使い放題ですが、悪いことするとfail2banでIP制限されてしまいます。
最後に
- 検証結果平均元画像より-80%までサイズ削減ができました。
- JPGやPNG（アルファチャネル）を含むwebpに変換ができます。
従来画像フォーマット(jpg, png)をwebpに変換することで画像ファイルのサイズを小さくすることができてダウンロード速度が上がることがわかりました。
まだまだ調査が足りなくてこんなにいいのになぜwebpを使っていないか？大手でも楽天市場以外に使ってるところを見つけられなかったですが、知っていたらぜひコメントなどで教えてください。