JPEGより軽くて綺麗なBPG変換方法(Mac)
お疲れさまです。
マークアップエンジニアの です。
1年ほど前のFrontrendという勉強会で減色処理は大切だよという内容を伺ってから画像の圧縮をちょこちょこやっていました。
下記のモジュールを使用して圧縮させて頂いていたのですが。。。
画像の最適化をCLIだけで行うgrunt-imageを作った - 1000ch.net
圧縮時の容量がJPGより軽く綺麗な画像が表示できると話題の拡張子BPG
このBPGを使用した圧縮のアプローチも試して見ようとしたところ、
JPG->BPGへの変換方法についてMacでの情報が少なかったので備忘録としてのまとめです。
環境
Mac OSX 10.9.5
Homebrew 0.9.5
libbpg 0.9.5
BPG変換コマンドのインストール
bpg変換ツールないかなぁ。。。
と探していたところ本家サイトにBrewで公開してるよ！
との書いてありましたので Home brew でインストール
$ brew install libbpg
で、実際に変換してみようとすると
$ bpgenc test.jpg <b>dyld: Library not loaded: /usr/local/lib/libjpeg.8.dylib</b>
と怒られたので
$ cd /usr/local/lib $ sudo ln -s /usr/local/Cellar/jpeg/8d/lib/libjpeg.8.dylib ./
こんな感じでlibjpeg.8.dylibのシンボリックリンクを/usr/local/libに貼ってあげる
(環境によってはこんなエラー出ない可能性があります。)
JPGからBPGに変換してみる。
brew install が完了すると
「bpgenc」と「bpgdec」というコマンドが使えるようになっていると思います。
$ type bpgenc bpgenc is /usr/local/bin/bpgenc $ type bpgdec bpgdec is /usr/local/bin/bpgdec
では、実際に「bpgenc」(bpg encode)コマンドを使って
$ bpgenc test.jpg
この記述でtest.jpgがbpgに変換されました。
また、bpgの標準の圧縮率は圧縮率は28となっており
出力されるファイルはout.bpgとなります。
そのため、上のコマンドでは
「test.jpg」が「out.bpg」に変換されます。
$ bpgenc test.jpg -o test.bpg -q 51
上のコマンドでは
「test.jpg」を「test.bpg」に変換しています。
圧縮率は「51」を指定していて高圧縮ですのでかなりぼやけた感じの画像になります。
BPGとJPGを比べてみた
まず容量
| test.jpg | out.bpg(quality:28) |
| 179KB | 60KB |
quality:28で約3/1ほど容量が軽くなりました。
画像の品質比較として実際に並べてみるとこんな感じになりました。
ブラウザで表示用のJSファイルも用意されていて
本家サイトからDLできるので使ってみたところ
<img src="test.bpg" />
使ってみた所感
はっきりと言うと
使いどころが微妙
微妙な点
１、画像も容量に対して綺麗ですが、用意されているJSではcanvasに置き換えるのでCSSの記述が手間
２、容量が軽くなってもJSでごにょごにょしてたら遅そうだよね。
２に関しては実際のページの画像を見て頂きたいのですが
1枚が軽い画像のパターン
1枚が重い画像のパターン
これなんですが、最初の読み込みからXMLHttpRequestとかしてごにょごにょしてしまって
結局、画像の表示にかかる時間が通常のJPGより遅い。
ただ、XMLHttpRequestを飛ばしているのでレイジーロード的な感じになり
ページ全体としての表示速度は向上するかもしれません。
今後に期待したい技術ですね。
現場からは以上です。
