減色」タグアーカイブ

将来の帯域制限を見据えると、”減色”です。

Android端末3台持ち。ソリューション営業部の浅井です。

“WindowsMobile”、どころか”WindowsCE”はおろか、”PalmOS”のころからパケット通信の恩恵に預っている私なんですが、今はデータ通信も「パケット定額」が当たり前~ってんで、定額を”前提”としたWebサービスが定番。

Webサービスの中心として成長したソーシャルコンテンツ。数年前までは自宅のPCからのアクセスが当然だった”mixi”や”Facebook”などのSNSはもちろん、動画配信系の”YouTube”や”ニコニコ動画”。更にはケータイやスマートフォンからのアクセスが大前提の”ソーシャルゲーム”も、この「パケット定額」なくしてはサービスが成り立たないのが現在のWebサービス、であります。

が! ここにきて永遠と思われたこの「パケット定額」が無くなるのでは? という話題が。

続きを読む

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

スマートフォンアプリで、綺麗な画像を軽くして組み込む方法

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

今回は、スマートフォンアプリ(アンドロイド(Android)アプリ)と、iOSアプリ(iPhoneアプリ/iPadアプリ)で綺麗な画像を軽く扱いたい開発者の方のために、解決策をご紹介いたします。

※ 本エントリーはブログ掲載時点の情報をまとめたものです。将来的に仕様が変更になる可能性もあるのであらかじめご了承ください。

ファイルサイズの制限

さて、スマートフォンアプリでは、アプリケーションのファイルサイズに制限があります。「Android Market」ではアップロード可能なアプリの上限サイズが「50MBまで」と制限されていますし、

Android Market では50MBまで

Android Market では50MBまで

「App Store」では3G回線経由にてダウンロード可能なアプリの上限サイズは「20MBまで」と制限されています。

AppStoreでは20MBまで

AppStoreでは20MBまで

ちなみに、iOSでは、WiFi経由でダウンロード可能なアプリの上限サイズは2GBとのことです。

また、それぞれの端末のメモリストレージの量も現段階では「PCのように豊富にある」「湯水のように使える」とは言えない状況です。「Android Market」や「App Store」の制限もさることながら、アプリケーションは少しでも軽いほうがユーザーに喜ばれるのは確かです。

画像をキレイなまま軽く!

努力してソースコードを短くしてもアプリケーションのサイズが劇的に小さくなることはほとんど無いと言えるでしょう。

アプリケーションの中で大きくサイズを使っているのは「画像データ」なのです。

スマートフォンの画面の解像度は、昔のPCに匹敵するほど大きく(広く)なっています。最近は、WVGA:800×480以上の端末が増えています。この大きさの画像データを複数枚持つだけでアプリの容量はどんどん増えていきます。

画像の数を減らすことなく、アプリの容量を抑えようとして画像データを必要以上に圧縮すると画像内にモスキートノイズが増えてしまい、スマートフォンのキレイで広い画面のメリットを損なう結果になってしまいます。

画像は写真なのか、図表やイラストなのかをチェック!!

写真の画像はJPEG形式が最適です。キレイに小さく圧縮できます。しかし、図表やイラストの画像はJPEG形式で圧縮(保存)するとモスキートノイズだらけのひどい結果になります。

図表の画像を使う場合はPNG形式で圧縮(保存)してください。圧縮には減色で対応するとキレイな画像のまま軽くすることができます。

雑誌やパンフレットのように写真と図表や文字が混在しているような画像はあるか?

写真と図表が混在している画像は、JPEG形式?PNG形式?どちらで保存すればキレイなまま軽くできるでしょうか。

手間を惜しまないのであれば、写真の画像と図表の画像を分離するとよいでしょう。

次の図のように、写真の部分を切り出してJPEG形式で保存し、図表や文字の部分はPNG形式で保存します。そして、表示するときに1つの画像に見えるようにくっつけるわけです。

特にモスキートノイズの入りやすい文字周りはPNG形式で保存するとJPEG形式と同じバイトサイズにまで圧縮しても表示がクッキリとキレイになります。

しかし、この作業。技術や理論が理解できても実際にやってみるととても大変です。

特に、画像の枚数が多かったり、何度も改修がかかるような画像に対してこの作業を手でやるのは・・・コスト的にも品質的にも問題があります。

この作業を確実に全自動で計算&分割&保存してしまうのが「ハイブリッドフォーマット」で画像を保存できる「OPTPiX imesta 7 for Mobile & Social」です。

詳しくは「電子書籍・雑誌やコミックをキレイに!軽く!ハイブリッド画像作成ツール – OPTPiX imesta 7 for Mobile & Social」のページをご覧ください。

サンプルソースコードの提供

「・・・で、そのハイブリッド画像をアプリで表示するには、どうしたらいいの?」

アプリとして動作実績のあるアンドロイド(Android)アプリのサンプルソースコードと、iOSアプリ(iPhoneアプリ/iPadアプリ)のサンプルソースコードともにご用意しています。

「サンプルソースコードを参考にしたい」開発者の方はお問い合わせフォームからお問い合わせください。

カテゴリー: スマートフォン開発 | タグ: , , , , , , , , , , , , | 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 更新

画像サイズの縮小に最適なソフト「OPTPiX imesta シリーズ」導入事例紹介

本日の「OPTPiX Labs Blog」では、画像サイズの縮小方法についてお伝えしたいと思います。

最近、スマートフォンがかなり市場に出回りスマートフォンのアプリが増えてきました。スマートフォンアプリ開発において、最近よく耳にするのが、アプリデータのサイズ縮小です。

スマートフォンアプリのアプリデータサイズを20MB以内に縮小することが、最終的なアプリの売れ行きに一役買うようです。

先月開催されたCEDEC の講演「忍者ロワイヤルの今までと今後」の中で当社の画像最適化ツール「OPTPiX imesta シリーズ」が特に画像サイズ縮小機能にフォーカスして紹介されました。

特にスマートフォン表示向けに画像サイズを縮小する際に有効というご紹介をいただきましたのでここではその内容をご紹介いたします。

こちらの講演での紹介内容のポイントは、画像サイズの軽量化です。

特にiPhone 向けのアプリケーションでは、アプリのサイズを「20MB以内」に抑えることが重要とされており、そのために、画像のインデックスカラー化、つまり「減色」を利用したとのことです。

忍者ロワイヤルでは、当社のOPTPiX imesta を利用していただくことで高品質な画像のままアプリケーションのサイズを「20MB 以内」に抑えることができたそうです。

特に「透過情報までインデックスカラーとして扱えるところ」が「ユニーク」だと紹介されました。

多くの画像サイズ縮小ソフトの中で、当社のOPTPiX imesta をご利用いただき画像品質を落とすことなく、画像サイズの縮小に効果を発揮したとのこと大変うれしく思います。

スマートフォン向けウェブサイトで採用した場合でも、画像サイズが縮小されるため表示の高速化、全体的な品質の向上が見込めます。

ぜひ無料トライアルサービスをご利用下さい。

OPTPiX imesta for Mobile &Socialの無料トライアルはこちら

なお、ご紹介したCEDECの講演「忍者ロワイヤルの今までと今後」の記事へのリンクはこちらです。

[4Gamer.net]「忍者ロワイヤルの今までと今後」

[Gigazine]「忍者ロワイヤルの今までと今後」

では、続いて”画像サイズの縮小”をテーマに次の事例を紹介します。

OPTPiX imesta 7 for Mobile &Social 導入事例

i-Mode黎明期から携帯コンテンツを手がけるA社様では携帯SNSコンテンツのアバターキャラクター、およびコンテンツ自体のフィーチャーフォン向け最適化に、長らくOPTPiX imesta 7 for Mobile & Socialをご利用いただいています。

ベースになるアバターキャラクターをある程度のまとまった単位で共通パレットを作成して減色。

加えて、アバターを彩るアイテムデータも同じく”OPTPiX imesta 7″の「共通パレット減色」を
使うことで、画像データのサイズを縮小化。

結果、コンテンツ全体のサイズと、データ転送量の節約に効果を発揮したとのこと。

また、同サービスのスマートフォン対応では、スマートフォンの高解像度化に合わせて大元となった画像データを再度リサイズ。

フルカラーが使える端末とは言えキャリアによっては3G回線がフルレートでないこともしばしば。

そこで、”OPTPiX imesta 7″の「アルファチャンネル対応減色」機能を使い、フルカラーと見分けがつかないクォリティの画像を用意し、無事にサービスを開始することができました。

3週間おきのアイテムリリースも、デザイナーの手を煩わせることなく誰でもマウスをクリックするだけで実行できるようプロジェクトのスリム化に成功。

およそ1人月のコストダウンにも貢献したとのことです。

なお、OPTPiX imesta for Mobile & Scoial は以下のページをご覧ください。

OPTPiX imesta for Mobile & Socialの詳細はこちら

OPTPiX imesta シリーズには姉妹製品もあります。当社の製品一覧は以下のページをご覧ください。

OPTPiX imesta シリーズの姉妹製品はこちら

カテゴリー: OPTPiX imesta | タグ: , , , , , , , , , , , , , | 2022/06/30 更新

スマートフォンに大事なのは「ピクセルサイズ」じゃなくて「ファイルサイズ」です

こんにちは、営業部の嶋です。

ついに、という感じで新しいiPhoneが発表されました。事前の予測では「iPhone5が出る!」という話でしたが蓋を開けてみれば「iPhone4S」という今のモデルのリファインモデル。発表後はAppleの株価も下げたりしたそうですが、リファインとはいえ「デュアルコアのCPU」「8メガピクセルの顔検出機能付きカメラ」「1080pのHDビデオ撮影」「64GBモデルの追加」など、リファインという言葉が果たして適切なのか、というくらいのパワーアップを遂げています。また、従来のソフトバンクからだけではなく、auからも発売されることで話題となりました。

しかし、端末そのものは大幅にパワーアップしているものの、通信回線は従来の3G回線のインフラを利用することになります。

スマートフォン用サイトにPCサイトの画像を流用しているコンテンツはかなりありますが、PC用の画像はファイルサイズが大きい物も多く、いざページを見ようと思うと表示されるまでに結構時間がかかってしまうこともあります。将来的には携帯電話のデータ通信が従量課金制になってしまうかもしれない、という話もあって、携帯電話やスマートフォン向けのサイトには、専用の画像というものをきちんと用意してコンテンツ展開を図りたいという声もよく耳にします。

「でも、携帯用サイトの画像を別で作るとなると色々手間もかかるし、そもそもファイルサイズを小さくしたら画質が悪くなっちゃうでしょ?」

そこで役立つソフトウェアが、OPTPiX imesta 7 for Mobile & Socialです。

OPTPiX imesta 7 for Mobile & Socialには携帯電話の機種毎に最適な画像を出力するための「機器情報」が登録されています。この情報はインターネット経由でアップデートされ、携帯電話やスマートフォンに最適な画像を簡単操作で出力することができます。

また、自分で任意の画像サイズやファイルサイズを指定し、機器情報として登録することもできるので、「960×640ピクセル」で「200KB以内のJPEG」で出力、とか「320×200ピクセル」で「256色のGIF」というように画像のピクセルサイズやファイルサイズ、色数など細かな指定をしてその指定範囲に収まる画像を自動生成する、ということも可能です。

例えば下の2枚の画像。いずれもピクセルサイズは同じPNGファイルですが、左はオリジナル、右は「256KB以内に収める」という設定で色数を減らしたものです。
クリックするとそれぞれ別の窓で表示されますので、比較してみてください。

686×960 24bit(フルカラー) 835KB 686×960 237色 249KB

いかがでしょうか?ファイルサイズを約70%削減したにも関わらずほとんど変わらない品質の画像を実現しています。これがOPTPiX imestaシリーズが長年培ってきた減色技術です。

この機能を活用することで、高品質のまま、スマートフォン向けや携帯電話向けサイトの全体の容量を抑えることが可能になります。また、転送するデータが少ないということは、サイトそのものが軽い、ということでもあります。サクサク見られるサイトはユーザーのコンバージョンの向上にも繋がります。

OPTPiX imestaはすぐに使える1ヶ月フルトライアルをご用意しております。上記の減色はあくまで一例です。サクサク見られるスマートフォンサイトの構築に、OPTPiX imesta 7 for Mobile & Socialを是非ご活用ください。

OPTPiX imesta 7 for Mobile & Social 製品ページ
OPTPiX imesta 7 for Mobile & Social トライアルフォーム

カテゴリー: OPTPiX imesta | タグ: , , , , , , , | 2022/06/30 更新