新画像フォーマット WebP
「次世代」と呼ばれる画像フォーマット WebPを試してみました。
Webページの読み込み速度を計測して改善点を分析してくれる Googleの PageSpeed Insights でページを継続すると、改善事項として「次世代フォーマットでの画像の配信」が 提示されることがあるので気になったためです。
次世代の画像フォーマットとは
次世代として提示されるフォーマットは、JPEG 2000, JEPG XR, WebPの3種です。
「次世代」と言っても、それぞれの規格の初版が出されたのは、2001年、2009年、 2010年と、どれも10年以上経過しています。
簡単に言うと、JPEG 2000はApple / Adobeが推し、JPEG XRはMicrosoft、 WebPがGoogle推しのフォーマットです。
JPEGと比較すると、以下のような特徴があります。
より高圧縮
可逆圧縮もサポート
ただし、いずれも普及しているとはいえず、その中で最もWebPが最近注目されているように 思います。
WebPの圧縮率
WebPで本当に画像が圧縮可能か確認してみました。
まず不可逆圧縮で、JPEGをImageOptim、OptImage それぞれで最適化した場合と WebPに変換した場合を比較しています。WebPへの変換はOptImageで行いました。 元ファイルは、 3.4MBのJPEGファイルです。
変換 |
ファイルサイズ(MB) |
|---|---|
JPEG->JPEG (ImageOptim 最適化) |
1.4 |
JPEG->JPEG (OptImage 最適化) |
1.8 |
JPEG->WebP |
0.9 |
いずれの圧縮も圧縮率などはデフォルトのままです。 不可逆圧縮の場合はどれくらいの情報を間引いているかにより圧縮率が 違ってきます。が、今回は条件を統一できなかったので あくまで「デフォルト設定」での比較でしかありません。しかし、WebPの 圧縮率は高いようです。できた画像を拡大して確認しましたが、データロスも それほど違いがないようの思います。
可逆圧縮については、24MBのTIFFファイルを可逆圧縮でPNGとWebP形式に 変換してみました。
変換 |
ファイルサイズ(MB) |
|---|---|
TIFF->PNG(ImageOptim 最適化) |
20.8 |
TIFF->PNG(OptImage 最適化) |
20.8 |
TIFF->WebP(OptImage) |
0.9 |
TIFF->WebP(cwebp) |
12.1 |
OptImageのWebP変換の結果については、ロスレスを指定しているはずなんですが 圧縮されすぎれ「ロスレス」になっていないんではないかと怪しんでいます。 コマンドの cwebp [1] を使ってロスレス圧縮をしましたが、こちらは12.1MBと 大体50%程度の圧縮率です。
PNGの変換では83%程度にしか圧縮できないのと比較すると、すばらしい圧縮率 です。
WebPに移行すべきか?
Google推しだけあって、WebPについては対応ブラウザも増えてきており、 JPEG 2000やJPEG XRよりも普及しています。
ただ問題は、AppleのブラウザがWebPをサポートしていないことです。
このサイトの場合、閲覧いただいている方の50%近くがAppleプラットフォームの ユーザーで、40%弱はSafariを利用されています。WebPに移行すると、 この方達が画像を閲覧できなくなるので、移行は無理そうです。
確かに圧縮率は高そうですが、この普及状況ではもう少し待ちましょう。
ただ、WebPをサポートしたMac向け画像ビューアーのPixeaも人気のようですから、 Macでもローカルではこの形式で画像を保存する価値はあるかもしれません。