Android
Mac
HTML5

WebPのインストール方法と簡単な使い方

More than 3 years have passed since last update.


WebPのインストール方法と簡単な使い方

存在を知っているだけで、使ったことのないWebP画像をクックパッドさんが本格導入しているっぽいので、ちょっと遊んでみました。


インストール方法(Mac)

brewでインストール出来ました。

$ brew install webp


使い方

cwebpコマンドでwebp形式に変換出来ます。

フォーマットは、

$ cwebp [options] input_file -o output_file.webp

で、具体的にはこんな感じです。

$ cwebp -q 90 omrice.jpg -o omrice.webp

-qオプションで画質を指定します。(デフォルトは75のようです)


効果

lsコマンドで確認

(結果はマシン名とか出ちゃうのでちょっと省略してます)

$ ls -l

1113371 12 4 11:43 omrice.jpg
598366 12 4 11:46 omrice.webp

1.1MBの画像が0.6MBになりました!


画像

変換前と変換後と比べてみました。

(Chromeブラウザで閲覧ください。)

変換前(JPEG画像)

omrice.jpg

変換後(WebP画像)

omrice.webp

うまくみれない方はリンクからどうぞ。

(WebPはそのままダウンロードしちゃいます…)

http://itosho.parallel.jp/laboratory/omrice.jpg

http://itosho.parallel.jp/laboratory/omrice.webp


まとめ

オムライス食べたい。

まだまだ対応している環境は少ないですが、この圧縮率は魅力的なので積極的に使って行こうと思います。

もっとWebPを知りたい方はGoogle DevelopersサイトへGo!


参考URL

WebPでモバイルアプリの通信量を劇的に削減する:

http://techlife.cookpad.com/entry/2014/12/04/090000

Google Developers:

https://developers.google.com/speed/webp/docs/cwebp