読者です 読者をやめる 読者になる 読者になる

JPEGより軽くて綺麗なBPG変換方法(Mac)

コマンド 環境構築

お疲れさまです。

マークアップエンジニアの  です。


1年ほど前のFrontrendという勉強会で減色処理は大切だよという内容を伺ってから画像の圧縮をちょこちょこやっていました。
下記のモジュールを使用して圧縮させて頂いていたのですが。。。
画像の最適化をCLIだけで行うgrunt-imageを作った - 1000ch.net






圧縮時の容量がJPGより軽く綺麗な画像が表示できると話題の拡張子BPG

このBPGを使用した圧縮のアプローチも試して見ようとしたところ、
JPG->BPGへの変換方法についてMacでの情報が少なかったので備忘録としてのまとめです。

gigazine.net




環境

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を比べてみた

まず容量
f:id:nanndemoiikara:20150601105447p:plain

test.jpg out.bpg(quality:28)
179KB 60KB

quality:28で約3/1ほど容量が軽くなりました。


画像の品質比較として実際に並べてみるとこんな感じになりました。
f:id:nanndemoiikara:20150601105455p:plain





ブラウザで表示用のJSファイルも用意されていて
本家サイトからDLできるので使ってみたところ

<img src="test.bpg" />

こんな感じのマークアップでBPGの表示を実装できました。(Canvasに置き換えて)




使ってみた所感

はっきりと言うと

使いどころが微妙


微妙な点

1、画像も容量に対して綺麗ですが、用意されているJSではcanvasに置き換えるのでCSSの記述が手間
2、容量が軽くなってもJSでごにょごにょしてたら遅そうだよね。





2に関しては実際のページの画像を見て頂きたいのですが

1枚が軽い画像のパターン
f:id:nanndemoiikara:20150605200543p:plain



1枚が重い画像のパターン
f:id:nanndemoiikara:20150609102254p:plain





これなんですが、最初の読み込みからXMLHttpRequestとかしてごにょごにょしてしまって
結局、画像の表示にかかる時間が通常のJPGより遅い。


ただ、XMLHttpRequestを飛ばしているのでレイジーロード的な感じになり
ページ全体としての表示速度は向上するかもしれません。




今後に期待したい技術ですね。



現場からは以上です。