ブログの画像フォーマットをWEBPに移行します

新世代画像フォーマット WEBPとは

WEBP とは Google が開発し2010年から仕様が発表されたオープンソースの新しい画像フォーマットです。

Googleらしく Webサイトのトラフィック軽減と表示速度向上のため、 JPEGやPNGなどの画像形式と比較すると高い圧縮率で画像サイズを軽量化することができます。 WEBPでは、PNGと比較すると約26%、JPEGでは25-34%の圧縮率向上が見込まれ画像サイズを削減することが可能と言われています。

また、従来の画像フォーマットではそれぞれ得意・不得意な画像特性が異なっていたため、 写真のような非可逆圧縮でも可能な画像ではJPEG、可逆圧縮が必要なグラフィックスはPNG、アニメーションではGIFみたいな使い分けが必要でした。

WEBPでは、可逆圧縮も非可逆圧縮もサポートし、背景透過もアニメーションも対応しています。 従ってどのような画像でもオールマイティーに適用することが可能となっています。

Macでの画像のWEBP変換方法

スマホやデジカメの画像フォーマットは大抵JPEGかRAW形式です。 これらの画像をレタッチするのに Affinity Photoを使用していますが、出力形式としてWEBPはサポートされていません。従って、何らかの変換ツールが必要となります。

MacではHomebrewで webp パッケージを導入すれば、コマンドラインから変換することができます。

細かいパラメータは マニュアル を確認ください。私の使い方では、以下のいずれかのパターンになりそうです。

//写真の圧縮
$ cwebp input.jpg -preset photo -resize 2048 0 -o output.webp

// スクリーンショットなど
$ cwebp input.png -preset text -resize 2048 0 -lossless -o output.webp

WEBPの画像圧縮率検証

WEBPに変換した結果どの程度圧縮できるかを検証してみました。

この記事のカバーに使用している画像の元画像で検証してみました。 元画像は4568 x 3434の大きさでJPEG形式、8.6MBのファイルサイズの画像です。 全てデフォルトで非可逆圧縮をかけると、約31%圧縮でき6.1MBとなりました。

同じファイルをプレビューからPNG形式で書き出すと、27MBの画像となります。 このPNGファイルを可逆圧縮でWEBP形式に変換すると、約18%削減でき22MBまで圧縮することができました。

いつも画像圧縮に使用している Optimage はWEBP形式をサポートしているので、さらにファイルサイズを小さくしたいときはOptimageを使用して再圧縮を行なっています。