皆さん、画像がたくさん表示されるサイトで画面に表示されるまでに凄く時間がかかってしまって困ったことないですか？私はポートフォリオのサイトを作った時に画像が多すぎてロードに10秒くらいかかってPageSpeed Insightsの点数が100満点で30点ほど出たことありました。これらの画像を加工して改善した話です。

目次

次世代画像フォーマットとは？

画像フォーマットと言えばpng,jpeg, gifが思い浮かびますよね？次世代画像フォーマットは簡単に言えば従来画像フォマットより優れた改良版です。種類は幾つかありますが、全てが従来画像フォーマットより軽量で圧縮率が高いのが特徴です。
JPEGの次世代のJPEG 2000とJPEG-XRと米Googleが開発しているオープンな静止画像フォーマットのWebPが多く知られていますが、今回はブラウザーのサポートや普及率が高いWebPについて話したいと思います。

WebPとは？

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

https://ja.wikipedia.org/wiki/WebP

JPEGもGIFもアルファチャンネルも扱えるのでPNGのような透明も可能です。素晴らしい。

WebPのサポート状況

WebPブラウザーのサポート

緑になっているところがサポートしいます。
iPhone7のSafariブラウザーとAndroid7.0(Nougat)の古い端末の標準ブラウザーでも全然問題なくむしろ速度も速く表示されました。

WebPの評価

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している

https://ja.wikipedia.org/wiki/WebP#%E8%A9%95%E4%BE%A1

WIKIによると平均約30%と小さくなりますね。

WebPの評価検証

Googleが開発しているcwebpというツールでJPG→WebPにして検証してみました。
デフォルトで75%画質に変換されます。（WIKIにも書いてある通り同一画像、同等画質にすることも可能）

１番目画像（変換前）

１番目画像（変換後）

１番目画像（変換結果）

1.6MBサイズから330KBになって約-77%サイズ削減ができました。

２番目画像（変換前）

２番目画像（変換後）

２番目画像（変換結果）

2.3MBから1MBになって約-84%サイズ削減ができました。

Chromeブラウザーで検証

変換前（PNG）

変換後（WebP）

ファイルサイズをかなり削減することでダウンロード速度もUpしたことが分かります。

image-to-webpのOSS

Githubにローカルでイメージ（PNG, JPG）→ WebPに変換するAPIツールを開発したので公開しました。
※利用するにはhttps://developers.google.com/speed/webpをインストールしてパスを通す必要があります。
詳細はhttps://github.com/shoridevel/image-to-webpでご確認ください。
今すぐ確認してみたい人は下記のcURLでも確認できます。（サーバーの負荷のため、5M以上画像は変換できません）

 

無料APIWebp変換API

nginx-proxyで相乗りしてたwebp変換APIをドメインとレンタルサーバーを購入して下記に移動しました。

旧API

curl -v "https://webp.buddypia.com/convert/image/to/webp" -X POST -F image_file=@変換前の画像ファイル名.jpg -o 変換後の画像ファイル名.webp

新API

API仕様書(swagger-ui)

https://convert-cloud.com/api-docs/

PDFやMARKDOWNもそれぞれ変換するAPIも用意しています。

curl -v "https://convert-cloud.com/api/image/to/webp" -X POST -F file=@<変換する画像ファイル名>.<変換するフォマット(ex: jpg, png)> -o <変換後の画像ファイル名>.webp

結論

  • Webパフォーマンスを上げる方法で従来画像フォマット(PNG, JPGなど)を次世代フォマット(WebP)にして改善する例をあげました。
  • 検証結果を見ると従来画像のサイズを約30%以上削減する効果があることが分かります。
  • IEなど本当に古いブラウザーははサポートしてないですが、最新ブラウザーはほとんどサポートしています。
  • GoogleのPageSpeed Insightsでも紹介されているのでぜひ活用してください。