画像形式」カテゴリーアーカイブ

DXTC(S3TC)圧縮のアルゴリズムとは?~後編~

R&D部 上田です。

DXTC(S3TC)圧縮のアルゴリズム解説、後編です。前回のエントリーでは「DXTCとは何か?」「どんなところで使われているのか?」といった基本的な解説と、DXT1のアルゴリズムをご説明しました。今回はDXT2~DXT5のアルゴリズムについて解説していきます。

続きを読む

カテゴリー: 画像形式 | タグ: , , , , | 2020/06/16 更新

DXTC(S3TC)圧縮のアルゴリズムとは?~前編~

初めまして、R&D部 上田と申します。
「OPTPiX Labs Blog」には初登場です。今回から、よく使われるいくつかの画像圧縮アルゴリズムについて解説していきたいと思います。

第一回目はDXTC(S3TC)圧縮について、です。

続きを読む

カテゴリー: 画像形式 | タグ: , , , | 2020/06/16 更新

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)

前回の記事「RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(1)」で、

実は、正規化にはもう一つ方式があって値が少し異なるのですが、それはまた後日、このブログで紹介しようと思っています。

と書きましたが、今回はそのもう一つの方式をご紹介します。

続きを読む

カテゴリー: 画像形式 | タグ: , , | 2020/06/16 更新

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(1)

ウェブテクノロジで、組み込み分野の営業を担当している(こともある)小高です。

組み込み機器を開発されているお客様、特にデザイン部門の方とやりとりしていると、しばしばいただく質問があります。「ソフト開発部門から、組み込み機器に内蔵する画像を作るときに使っても良いRGB値の一覧を渡されたけれど、どうやって画像を作ればいいですか?」というものです。

この記事では、「組み込み機器向け画像で、特定のRGB値しか使えない理由」の解説を中心に、組み込み機器向け画像を作るときの注意点とその解決方法についても軽く触れています。

デザイナーさんがこれらを理解していれば、ソフト開発者とのコミュニケーションで、デザインサイドの意向をよりスムーズに伝えられるようになるはずです。この記事が、美しいGUI表現を実現するための一助となれば幸いです。


1. まずはおさらいから

組み込み機器のディスプレイでは、コスト等の制約のために、RGB565形式やRGB555形式などの表示デバイスが良く使われます(以下では、説明を簡単にするために、RGB555の場合を例にとります)。

一方、機器に組み込む画像は、RGB888形式のPC(Macintosh含む)で制作していると思います。

PCで通常使われているRGB888形式では、RGB各チャネルを8bitで表現しています。28=256 なので、0~255;16進数で00h~FFhの値で256階調を表現しています。RGB値0は黒、255は一番明るい赤、または緑、または青です。

組み込み機器で使われるRGB555形式では、RGB各チャネルを5bit, 5bit 5bitで表現しています。25=32なので、0~31;16進数で00h~1Fhの値で32階調を表現しています。RGB値0は黒、31は一番明るい赤、または緑、または青です。

グラフ1: 8bit=256階調と5bit=32階調

グラフ1: 8bit=256階調と5bit=32階調

RGB888の画像をRGB555表示の機器で使用する場合は、RGB値の下位3bitを切り捨てた値を使うことになります(RGB565であれば、RとBの下位3bit、Gの下位2bitを切り捨てます)。

表1: RGB8bit値をRGB5bit値に変換

表1: RGB8bit値をRGB5bit値に変換


2. 落とし穴に注意

ところが、階調が違うということには落とし穴があるのです。RGB888環境で作った画像を実機にそのまま持っていくと、こんな現象が起こります(画像1)。

画像の中央に、同心円状のバンディング(マッハバンド)が生じていて、美しくありません。また、同じ明るさの色が使えるわけではないので、全体の色調も微妙に変化しています。


元画像

RGB888環境で作った画像をRGB555の実機で表示した場合

実機に画像データを組み込んでから初めてこのような現象に気づくと、大きな手戻りが発生して、開発工程に悪影響が生じてしまいます。

画面デザインの際は、あらかじめPC上でなるべく実機に近い条件でプレビューしておくことで「こんなはずじゃなかった」を防ぐことができます。


3. RGB565(RGB555)をPC上でプレビューする

OPTPiX imésta X-MP を使うと、PC上でRGB565(RGB555)の実機で表示した状態をシミュレート表示することができます。

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

OPTPiX imésta X-MP で画像を読み込み、「イメージ(I)」→「イメージ変換(W)…」で上記ダイアログが出ます。

実機のRGB形式に合わせて、RGB565, RGB555などを選択します。レンダリング処理は「誤差拡散なし(O)」、「RGB値を正規化する(@)」をONにして、[OK]を押します。

すると、画像のRGB値を全て5bit階調(32階調)に変換します(RGB565の場合は、Gの値のみ6bit階調(64階調))。

このため、RGB565, RGB555などの機器で表示した状態をPC上でシミュレート表示することができるわけです。

画像1, 画像2では、同心円状のバンディング(マッハバンド)が出ていますが、OPTPiX imésta X-MP を使うと、バンディングを抑制することができます。抑制する方法と仕組みについては、OPTPiX imésta 7 for Amusement & Embeddedのページに詳しく記載していますので、ぜひご覧ください。

ところで、画像2のダイアログに「RGB値を正規化する(@)」というチェックボックスがありますが、これが、組み込み機器向け画像で特定のRGB値しか使えない理由の鍵を握っています。


4. 組み込み機器向け画像で、特定のRGB値しか使えない理由~正規化とは

第3節では、「RGB値を正規化する(@)」をONにしてプレビューすると書きました。それでは、OFFにするとどうなるのでしょうか。ONにして変換した画像と、OFFにして変換した画像比べてみます。


正規化なし

正規化あり

微妙に、ではありますが、明るさが変化していることがおわかりになると思います。

正規化ONと正規化OFFでは、RGB値には次のような違いがあります。

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

第3節の後半に「画像のRGB値を全て5bit階調(32階調)に変換します」と書きましたが、PC上で画像をハンドリングしている間は、RGB値として表1にあるような0~31の範囲を使うのではなく、表2のような値に変換します。RGB値が0~31の画像をPCに表示しても、真っ暗でなにが表示されているのかわからなくなってしまうからです。

普通に考えれば、32階調に変換するのであれば、表2のなかの「正規化なし」のRGB値を使えば良さそうです。ところが、この表をよく見ると、最大輝度を表す最後の行の値が、F8(248)になっています。つまり、最大輝度がFF(255)ではなくなってしまうのです。「正規化あり」では、最大輝度が8bit階調の時と同じFF(255)になっています。これが、画像3の明度の違いの原因です。正規化を行うと、最大輝度を256階調の場合と同じに揃えるために、全体的に、均等に、値をシフトします。

さて、ソフト開発部門から渡された「使っても良いRGB値の一覧」は、表2の「正規化あり」「正規化なし」のどちらかの場合がほとんどのはずです。渡された値の一覧表を見て、OPTPiX iméstaの設定を行えば大丈夫です。

実は、正規化にはもう一つ方式があって値が少し異なるのですが、それはまた後日、このブログで紹介しようと思っています。

もう一つの正規化方式を、「RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)」でご紹介しましたので、そちらもあわせてご覧下さい。

5. 実は、組み込み機器向け画像で特定のRGB値しか使えない、わけではありません

実機に画像を組み込むとき、最終的にはRGB値として表1の値が使われます。つまり、正規化は、してもしなくても、実機での表示結果には変化がありません。実は、ハードウェア的に特定のRGB値しか使えないというわけではないのです。正規化は、PC上で画像をハンドリングするときの利便性(色再現性の向上)のために行う処理なのですが、ハードウェア寄りの話のため、ソフト開発者の方でも、そのあたりを詳しく把握できていない場合が多いようです。

以上、デザイナーさんにとっては若干ややこしいお話で恐縮ですが、ご理解いただけましたでしょうか。

わかりにくい点などありましたら、コメント欄でご指摘いただければ幸いです。

2012年4月5日加筆

続きのエントリーを公開しました。下記のリンクからどうぞ。

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)

カテゴリー: 画像形式 | タグ: , | 2020/06/16 更新

キャプチャ画面はJPEGではなくインデックスPNGで

こんちには。ウェブテクノロジ開発部の山崎です。

仕事でもプライベートでも、
いつもお世話になっているGoogleさんにお伝えしたいことがありまして、
この場を借りることにしました。

まずは以下のキャプチャ画面を見ていただきたいのですが、
Googleさんの検索サイトで「ウェブテクノロジ」と入力したあとで、
検索結果に表れる虫眼鏡のアイコンをクリックすると、
対象サイトのキャプチャ画面(サムネイル画像)が表示されます。

Googleキャプチャ画面

このキャプチャ画面の画像ですが・・・ちょっと荒すぎませんか? (どう思われますか?みなさん)

わたしはJPEGのモスキートノイズが・・・気になって仕方がないのです(職業病??)。

JPEG画像の圧縮率を高くすると、どうしてもこうなる傾向があるのはわかりますが、
特に「キャプチャ画面の場合はJPEG画像ではなくインデックスPNGを使ってください!」とお伝えしたいのです。

特に、弊社の製品に組み込まれている減色エンジンをぜひご検討いただきたい!と思うのです。

Google(の中のひと)さま、もしこのブログをご覧になりましたら、
弊社のツール・・・「OPTPiX imestaシリーズ」をぜひ一度お試しください。

ちなみに、弊社のWebページを「OPTPiX imesta」を使ってインデックスPNGに変換すると・・・

キャプチャ画像のPNGとJPEGの比較画像

同じ画像容量でも、インデックスPNGとJPEGでこれだけ違います。
左がインデックスPNG、右がJPEGのキャプチャ画像になります。

 

カテゴリー: 画像形式 | タグ: , , , | 2020/06/16 更新