SONICMOOV Googleページ

JPG画像より軽く鮮明なBPG画像について調べてみた

JPG画像より軽く鮮明なBPG画像について調べてみた

  • このエントリーをはてなブックマークに追加

コーダーのはなたつです。つい先日登場したばかりのような気がしますが・・・ こちらはソニックムーブ Advent Calendar 2014 20日目の記事になります。

今回はあまり聞き覚えのないBPG画像という画像形式について調査してみました。

目次

BPG画像って何?

BPG画像について公式サイトを翻訳してみると・・・

  • JPEGと同様の品質でJPEGよりも軽い
  • 多くのWebブラウザでサポートされている
  • グレイスケール・YCbCr=4:2:0・4:2:2・4:4:4・RGB・YCgCo・CMYKなどの色空間をサポートし、アルファチャンネルや可逆圧縮にも対応
  • より高いダイナミックレンジを実現するため、各チャネル8から14ビットまでをネイティブサポート
  • ロスレス圧縮をサポート
  • EXIF、ICCプロファイル、XMPなどさまざまなメタデータを含めることができる

といった特長があるようです。

画質と容量

JPEGと同様の品質との事でしたが実際の画質はこうなりました。

画質検証

画像が小さいのでわかりづらいですがJPGと比べてもほぼ同様に見えています。
画像の容量を比べてみると

画像容量

JPGが123KBに対しBPGは、ななななんと5KB!!!
大幅に軽量化されている事がわかります。

BPGファイルの作り方

現状ではPhotoshopなどで直接BPGへの書き出しを行えないためまずJPGとして画像を書き出し公式サイトが配布しているexeを使用してBPGへの変換を行う必要があります。

1.まず公式サイトから必要なファイルzipをダウンロードします。

ダウンロードはこちら

Downloadの項目から必要な圧縮ファイルをダウンロードし解凍をして下さい。

2.コマンドプロントを立ち上げ先ほどファイルを解凍したディレクトリに移動します。

例:
cd C:\Users\hogehoge\bpg-0.9.3-win32

3.変換するファイルを指定します。

bpgenc.exe ファイル名

と入力しエンターを押すと画像と同じディレクトリに「out.bpg」というファイルが出来ていると思います。
これでbpgファイルの準備は出来ました。

HTMLの準備

画像は準備出来たので続いてHTML側ですが、HTML側のする事は少なく
まず先ほど解凍したディレクトリのbpgdec8b.jsを読み込みます。
後は通常の画像と同じで <img src=”**.bpg”> と読み込みを行うだけです。

使ってみての感想とか

画像サイズが大幅に削減されるのは前述の通りです。

「多くのWebブラウザでサポートされている」との事でどんなものか検証をしてみたところ
対応はFF,Chrome,Safari,IE10以降となっていました。
jsの内部はあまり見ていませんが、展開後のソースを見てみるとbpgで読み込んだ画像はcanvasとして配置されていました。

現状では上記の方法でBPGに書き出しなおす手間やHTML側にjsを読み込む必要があるなど使い辛さも目立ちました。
ですがファイルサイズは感動するくらい軽くなっているので今後サポートされてくるのではないでしょうか。
案件の内容によってはBPG画像を取り入れてみても良いかもしれません。

それでは良いクリスマスを・・・!

(追記)
公式サイトの末尾に

Some of the HEVC algorithms may be protected by patents in some countries. Most devices already include or will include hardware HEVC support, so we suggest to use it if patents are an issue.
HEVCのアルゴリズムのいくつかは特許で保護されています。多くのデバイスで既にハードウエアでのHEVC実装があるか今後実装される見込みなので、そっちを使う事をお勧めします。

との記述があり、現状実験的な実装の範囲を超えて使う事は止めておいた方が良さそうです。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

はなたつ(マークアップエンジニア)

マークアップエンジニアをやっています。ソニックムーブのラーメン男子といえば私です。今日もラーメン屋を探して西へ東へ…神楽坂周辺に美味しいラーメン屋がありましたら教えてください。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation