WebP 対応ブラウザ と 変換用コマンドのインストールメモ

WebP 対応ブラウザ と 変換用コマンドのインストールメモ
あぱーブログ
2017年11月15日  カテゴリー:WEB  タグ: , ,
Pocket
LINEで送る

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です(^^;)

WebP 対応ブラウザ一覧
https://caniuse.com/#search=WebP より引用」

実際の WebP 画像ファイル

WebP画像に対応しているブラウザであれば下に「WebP supported」と書かれた WebP画像が表示されますが、対応していないブラウザでは壊れた画像アインコンが表示されるか、なにも表示されません。

WebP 変換用コマンドのインストール

WebP変換用のコマンドは macOS なら Homebrew から、Linux(CentOS7)であれば yum から簡単にインストールできます。

・macOS

brew install webp

・Linux(CentOS7)

yum install libwebp-tools

macOS 10.13 の場合は、以下のコマンドがインストールされます。

cwebp
 WebPを使って画像を圧縮します。元になる画像ファイルフォーマットは PNG, JPEG, TIFF に対応しています。

dwebp
 WebPファイルを、PNG、PAM、PPMまたはPGMイメージに変換します。

webpmux
 アニメーションWebPの作成/編集用のコマンドです。

WebP 変換用コマンドの使い方

PNG, JPEG から WebP に変換

WebP画像への変換は「cwebp」コマンドを使います。(WebP画像の拡張子はそのまま「.webp」です)

cwebp sample.png -o sample.webp

可逆圧縮にする場合は「-lossless」オプションをつけます。

cwebp -lossless sample.png -o sample.webp

非可逆圧縮の場合は「-q」オプションで圧縮係数(0〜100)を指定できます、デフォルト値は 75 です。

cwebp -q 90 sample.jpg -o sample.webp

WebP から PNG に変換

WebP画像から PNG に変換するには「dwebp」コマンドを使います。

dwebp sample.webp -o sample.png

「WebP」VS「OptiPNG」

WebPで可逆圧縮した画像ファイルと、画像圧縮ツールの定番 OptiPNG で最適化した PNG画像を比較してみました。

OptiPNG で最適化した PNG画像(193KB)最適化レベル最高

WebP で可逆圧縮した画像(160KB)※Chrome または Opera 以外のブラウザでは表示されません。

OptiPNGの最適化レベル最高で圧縮すると、このくらいのサイズの画像ファイルでも処理に10秒くらいかかりますが、WebPでは一瞬で圧縮が終わり、画像サイズもより少なくなります。

おわりに

WebP画像フォーマットは圧縮率が高いのも魅力ですが パソコンのスクショはPNG、写真ならJPEG、アニメーションならGIFのように、画像の内容によってフォーマットを使い分けなくてすむので管理が楽になりそうです。はやく他のブラウザも WebP をサポートしてくれるといいですね。

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です