多くの人々にハピネスを提供する!UNIEARTH

オフィシャルブログ
会社HPへ
お問い合わせ

新画像フォーマット「BPG」のWEBでの実用性について

お久しぶりです、コーダーフクです。

去年の末から話題になってる「BPG」が実際にWEBページでどれくらい使いやすいのか、コーダー目線で検証してみました。

他サイト様は、jpgとのファイルサイズと画質について検証しているサイトが多かったので、実際にWEBページに表示した場合どれくらいの差があるのか調べてみたいと思います。

ファイルサイズと画質については他サイト様で検証されているように、確実によくなっているそうです。
※参照例→http://blog.livedoor.jp/blackwingcat/archives/1885528.html

準備・検証

使用する画像は、JPG、BPGともにほぼ同画質の画像を使用し、画質は品質比較をするためにSSIMという指標で比較したものとします。
・・・といいたかったのですが、同等の画質のBPGを作成するのが困難だったため、オリジナルのJPGをBPGに圧縮したものを使用しました。
ですので、画質的に少しBPG有利!になります。

またブラウザですが、BPGへの変換ソフトに付随しているjavascriptの都合でChrome・Firefox・IE10以降で使用できるようです。
※参照→http://lab.sonicmoov.com/markup/bpg-image/

WEBページの表示速度ですが、JPGのみで10枚、BPGのみで10枚すべて同じ画像ファイルを読み込むとし、画像がすべて表示されるまでの時間とします。

表示速度はFirebugにて測定しました。
測定したHTMLは以下の通りです。
JPGBPG

検証結果

まず、検証以前の問題ですが現状BPG画像の作成自体がかなり手間です。

BPGの画像が荒かったり、1枚の画像で検証すべきなのではと指摘があったりと、ぐだぐだでBPG有利な検証方法となってしまいましたが結果は以下の通りです。
JPG 343ms
jpg結果
BPG 2666ms
bpg結果
やはりブラウザがサポートしておらず、jsを使用して表示しているため、画像が軽くなっても表示速度は遅くなっています。
さらに、canvasに変換されているため、imgタグに対するcssやjsが無効になるので注意が必要です。

BPGが使いやすくなるためには、画像作成ソフト・ブラウザの両方でサポートされる必要があると感じます。

この記事を書いた人

fukui

HTMLコーディング fukui

メインはHTMLのコーディングやってます。
今後はPHP、デザイン等幅広くやっていけたらなと思います。

fukuiの最近の記事

pagetop