Google が開発する WebP（「うぇっぴー（weppy）」と読みます）は、ウェブサイトのトラフィック軽減とパフォーマンス向上を目的とした、画像ファイルフォーマットです。可逆圧縮と非可逆圧縮のどちらもにも対応し、PNG画像と比べて26%、JPEG画像と比べて25〜34%もファイル容量を小さくできるとされています。そこで今回は、WebP 対応ブラウザを調べてみたついでに、変換用コマンド「cwebp」と「dwebp」のインストール方法と使い方をメモしておきました。
WebP 対応ブラウザ
2017年11月15日時点では、Google Chrome と Opera のみが WebP画像に対応 しています。ただし iOS の Chrome や OperaMini は未対応です。以外なところで iOS では DropBox が WebP画像の表示に対応しています。
その他 Firefox や Safari は対応していませんので、WebP画像を使う場合は、ブラウザによって表示する画像フォーマットを振り分けるなどの工夫が必要になります。なので WebPの記事なのに下のスクショはPNGです(^^;)
「https://caniuse.com/#search=WebP より引用」
実際の WebP 画像ファイル
WebP画像に対応しているブラウザであれば下に「WebP supported」と書かれた WebP画像が表示されますが、対応していないブラウザでは壊れた画像アインコンが表示されるか、なにも表示されません。
WebP 変換用コマンドのインストール
WebP変換用のコマンドは macOS なら Homebrew から、Linux（CentOS7）であれば yum から簡単にインストールできます。
・macOS
・Linux（CentOS7）
macOS 10.13 の場合は、以下のコマンドがインストールされます。
cwebp
WebPを使って画像を圧縮します。元になる画像ファイルフォーマットは PNG, JPEG, TIFF に対応しています。
dwebp
WebPファイルを、PNG、PAM、PPMまたはPGMイメージに変換します。
webpmux
アニメーションWebPの作成/編集用のコマンドです。
WebP 変換用コマンドの使い方
PNG, JPEG から WebP に変換
WebP画像への変換は「cwebp」コマンドを使います。（WebP画像の拡張子はそのまま「.webp」です）
可逆圧縮にする場合は「-lossless」オプションをつけます。
非可逆圧縮の場合は「-q」オプションで圧縮係数（0〜100）を指定できます、デフォルト値は 75 です。
WebP から PNG に変換
WebP画像から PNG に変換するには「dwebp」コマンドを使います。
「WebP」VS「OptiPNG」
WebPで可逆圧縮した画像ファイルと、画像圧縮ツールの定番 OptiPNG で最適化した PNG画像を比較してみました。
OptiPNG で最適化した PNG画像（193KB）最適化レベル最高
WebP で可逆圧縮した画像（160KB）※Chrome または Opera 以外のブラウザでは表示されません。
OptiPNGの最適化レベル最高で圧縮すると、このくらいのサイズの画像ファイルでも処理に10秒くらいかかりますが、WebPでは一瞬で圧縮が終わり、画像サイズもより少なくなります。
おわりに
WebP画像フォーマットは圧縮率が高いのも魅力ですが パソコンのスクショはPNG、写真ならJPEG、アニメーションならGIFのように、画像の内容によってフォーマットを使い分けなくてすむので管理が楽になりそうです。はやく他のブラウザも WebP をサポートしてくれるといいですね。
コメント