モノクロ(白黒)電子書籍(eBook)の容量を小さくする方法

こんにちは。開発部の山崎です。

今回は、モノクロ(白黒)画像と電子書籍(特にPDF)の関係の話を書いてみたいと思います。
内容は少し濃いかも・・・でも、普通の人でも理解できるようにがんばって書いていきます。

さて、コミックス(マンガ)などを電子書籍にするとき、やはり少しでも
キレイに!そして少しでも軽く!(容量を小さく!)したいものです。

特にコミックスなどのモノクロが中心のコンテンツを電子書籍化する際に、
キレイで!軽い!電子書籍に仕上げるポイントについて書いていきます。

ポイントは3つあります。

  1. グレースケール化で小さく!軽く!
  2. 減色で小さく!軽く!
  3. 電子書籍(PDF)も小さく!軽く!

ポイント1:グレースケール化で小さく!軽く!

スキャン画像やDTP出力など、一般的な画像ファイルは、特に指定をしない限り
フルカラーフォーマットになっている場合が多く、特に、色の無い、
白黒とグレーしか使っていない画像なのにフルカラーで保存されているケースがあります
(スキャナによってはグレースケールに変換(モノクロ化)して出力する機能がついている
場合もあります)。

カラーを使っていないのにフルカラーの画像として保存すると、
必要以上に大きなサイズの画像ファイルになります。

フルカラーの情報を保存するにはモノクロの情報を保存するよりも3倍のデータ量を使います。
理論的にはフルカラーの画像をグレースケール化するだけで画像の容量が3分の1になるということです。
このことは、JPEG画像であっても(YUV→Y)、PNG画像であっても(RGB→Y)同じと言えます。
圧縮率を変えなくても、保存のオプションを変えるだけでファイルを小さくできるのです。

(一般的に、JPEGの圧縮オプションは90とか80とか圧縮しますが、
ここではJPEGもPNGも圧縮率は変えずに保存時のモードをフルカラーからグレースケールに
変えたときの変化を見てみます。圧縮に関しては、ポイント2で触れます)

たとえば、以下の画像はJPEGファイルですが、圧縮オプションは100でほぼ無圧縮で
グレースケールのオプションのみON/OFFしてみました。

ファイル フルカラー(KB) グレースケール(KB) 割合(%)
プリングルス
子供っぽい日常より)
254 248 96.9%
通販サイト
酔った!買った!少し後悔・・・より)
299 293 98.0%
凛子
ラブプラスな日々より)
314 309 98.4%

 

・・・失礼しました。
約98%と、思ったほど変化がありませんでした。
2~3%くらいの違いしかありませんね。

JPEG画像の圧縮アルゴリズムの場合、モノクロ画像はUVの値がすべて0になるので、
フルカラーであってもうまく圧縮されているということなのでしょう。

では、気を取り直してPNG画像ではどうでしょうか。

フルカラーのPNG画像では、RGB値を圧縮して保存します。
グレースケールでは、圧縮前のデータ量が1/3になりますから、
そのままファイルサイズに関係するはずです。

 

ファイル名 フルカラー(KB) グレースケール(KB) 割合(%)
プリングルス 353 155 43.9%
通販サイト 408 190 46.6%
凛子 428 194 45.3%

 

1/3にはなりませんでしたが、半分以下にはなっているようです。

(圧縮後のファイルサイズが1/3にならない理由は、PNGでは圧縮を行うからです。
フルカラーフォーマットにモノクロ画像を保存するという、無駄の多いフォーマットのほうが
圧縮率が上がるためです。
それでも、PNG圧縮で無駄を省くよりグレースケール化して無駄を省くほうが効果的だと言うことが
わかります)

グレースケール画像のファイルサイズ一覧

グレースケール画像のファイルサイズ一覧

ここで、着目してほしいポイントは、
モノクロ画像の場合は、特にPNG画像は、
フルカラー画像よりもグレースケールで保存したほうが小さく(軽く)保存されている

という点です。
覚えておいてください。

ポイント2:減色で小さく!軽く!優れた減色エンジンでより小さく!

「グレースケールな画像に減色?」「減色する意味があるの?」という話をときどき聞きますが、
意味はあります!

なぜなら、グレースケールな画像であっても、他の画像と同じように
使用している色の頻度は偏っているからです。

簡単に解説すると、一般的なグレースケールの画像は、
白色の付近と黒色の付近に色の利用頻度が集中していて、
中間色であるグレーの利用頻度は少ないのです。

たとえば、数学的に四捨五入するなどして、等間隔に近い色に割り振ってしまうと、
この色の利用頻度が無視されてしまうため、ガタガタした階段状の画像になり、
元画像からの乖離が激しくなってしまいます。

ここはやはり、色の利用頻度を意識した「減色機能」を使うべきです。
減色といえば「OPTPiX imestaシリーズ」の出番です。

グレースケールの画像であれば16色程度に減色しても、
元の品質と見た目には変わらないレベルを維持したまま、ファイルサイズを小さくできます。

上の解説で使用した画像を、Photoshopと、OPTPiX imesta でそれぞれ16色に減色した時の
画像ファイルのバイトサイズとPSNR値を書いておきます。

ファイル名 Photoshop (KB) OPTPiX imesta (KB)
プリングルス 88.5 80.9
通販サイト 101 94.4
凛子 105 99.9
ファイルサイズの比較

ファイルサイズの比較

 

ファイル名 Photoshop PSNR(db) OPTPiX imesta PSNR(db)
プリングルス 43.2 43.7
通販サイト 38.8 42.2
凛子 41.1 42.7
PSNR値の比較

PSNR値の比較

圧縮率(バイトサイズ)とPSNR値共に OPTPiX imesta のほうがよい結果が出ています。

ここでのポイントは、グレースケールであっても減色すればさらにファイルサイズが小さくなること。
そして、減色性能はツール(エンジン)によって異なる!ことを理解しておいてください。

ポイント3:電子書籍(PDF)も小さく!軽く!

あまり知られていない話なのですが、PDFファイルの中の画像形式は、
JPEGとZIPの2種類の形式が存在します。
特に意識しないと画像はすべてJPEGとして扱われるので、
PDFファイルの中にはJPEG画像しか入らないと思っている人もいるかもしれません。

ZIP形式の画像とは耳慣れない形式だと思いますが、PNG画像はZIP形式(zlib)で圧縮されていますので、
PNG画像がほぼそのまま入ると考えてもらってよいと思います。
(具体的なフォーマットは異なります)

PDFのZIP形式はPNGとほぼ同じ形式ですので、画像の圧縮率もPNGのときとほぼ同じになります。

また、減色した画像をそのままPDFに入れれば、その画像のサイズがほぼそのままPDFのサイズに
等しくなるため、PDF内の画像をキレイなままさらに小さくできるのです。

以下に、OPTPiX imesta 7 for Mobile & Social で同じサイズになるように画像を圧縮した2つのPDF、

1, JPEG画像を圧縮して作製したPDFと、

2, PNG画像を減色して作製したPDFを

比較してみます。

PDFの画質比較

PDFの画質比較

同じようなファイルサイズのPDFなのに、ノイズの量にあきらかに違いがあります。
(クリックすると拡大画像が見られます。)
以下のURLに入れておきますので、ぜひPDFファイルをダウンロードして表示して
比較してみてください。
グレースケールテスト画像JPEG版PDF(116KB)
グレースケールテスト画像PNG版PDF(111KB)

モノクロ電子書籍の容量を小さくする方法のまとめ

グレースケール(モノクロ)画像の容量を小さくする方法に関して、ポイントをまとめると

1 : グレースケール化で小さく!軽く!

JPEG画像、PNG画像共に、グレースケールに適した保存モードがある。
JPEGでは2~3%。PNGでは半分以下に小さくできる。

2 : 減色で小さく!軽く!

PNG画像は、グレースケール(モノクロ)画像であっても、
減色機能でさらに小さく圧縮できる。

画像の圧縮率や品質は、減色エンジンに依存する。

3 : 電子書籍(PDF)も小さく!軽く!

PDF内の画像もグレースケールに相当するインデックスカラーが扱える
ZIP形式が存在する。

ZIP形式はノイズが入らないので、画像によっては、
JPEG画像よりもキレイに小さく(軽く)作ることができる。

 

ちなみに、上のPDFをこの品質でこのサイズまでに小さくしたツールは「電子書籍・雑誌やコミックをキレイに!軽く!ハイブリッド画像作成ツール – OPTPiX imesta 7 for Mobile & Social」です。

ぜひ一度、使ってみてください。
よろしくお願いいたします。

 

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

CEDEC2011、ご来場ありがとーございました!

腰と足とその存在が痛い。ソリューション営業部の浅井でございます。
9/6~9/8までゲーム業界関係者の聖地”パシフィコ横浜”にて開催されました素敵な祭典『CEDEC』の件。お陰様で無事に、しかも大盛況のうちに出展終了、いたしました。

今回のテーマは話題の次世代ゲーム機”PlayStation® Vita”、また新たなプラットフォームとして注目を浴びるスマートフォン。この2つに狙いを定めまして、弊社の画像最適化プロダクトの新製品『OPTPiX imesta 7 for PlayStation® Vita”、および2Dアニメーション作成ツール 『SpriteStudio』、更に今話題のゲーム開発ミドルウェア”Unity”上に『SpriteStudio』で作成したアニメーションデータを取り込んじゃうアセット『SpriteStudio for Unity(仮称)』を展示。

SpriteStudioの採用事例に興味津々なお客様

・・・したんですが、ご来場いただくお客様の注目をかっさらったのは『SpriteStudio for Unity(仮称)』!
同じく弊社製品の『コミPo!』のキャラクター、”コミポちゃん”をデモ用素材として動かしていたせいなのか、足を止めてくださるお客様が多数。曰く、

『このドット絵がここまでなめらかに動くの?』
『このアニメーションの構造は?』
『スマートフォン実機に出力した時のファイルサイズは? 重たくない?』

などなど・・・ご安心くださいッ! 何しろこれからチューニングしますッ!

みたいな。
あとシャツの襟を強烈に立てた外人さんがお越しになって弊社ブース前に座り込んで”SpriteStudio for Unity(仮称)”について熱く質問してくるのでアラヤダどちら様かしらー、とか思ったらなんと”Unity”のCEO! いやはや弊社ブースに語学が堪能な者がおらず、しどろもどろに対応することになり大変恐縮・・・でしたが、その襟同様にかなりハイテンションにお褒めいただきました。

ともあれ、これまで多くのユーザー様各社に頂戴しました”採用事例”、こちらを展示していたお陰で『SpriteStudio』が如何に汎用的なアニメーションデータを作れるツールなのか、そしてミドルウェアだけでなくいろいろな開発環境に対して親和性の高いツールであるコトを多くの方々に知ってもらえる良い機会になったのは確か。ちょうど今回のCEDEC2011会場では、『SpriteStudio』をダイーブお安く購入できる限定割引チラシを配布していたこともあって、皆様『ひとまず試したい』と思っていただけたのが何よりの幸い。
改めて弊社一同、気を引き締めて機能強化だとか改善、新製品開発に打ち込むことで、ゲーム業界が『より楽に』素晴らしいゲームを作ることに集中できるよう、がんばっていく所存でございます。

ということで弊社ブースだけでなく、CEDEC2011に起こし下さいました方々、本当にありがとうございました。

ところでニコニコ生放送にうっかり出演したりしていい感じに生き恥を晒したワケですが。

 

ニコ生に出演してみた

ニコ生に出演してみた。ついでに”OPTPiX imesta 7”で16色に減色してみた。

っていうかね、髪型についてのどーのこーのなコメントがね、なんか気になったっつー。

カテゴリー: イベント | タグ: , , , , , , , , , | 2020/06/16 更新

田中圭一のゲームっぽい日常 ファミレスに居座るための秘密兵器

 

大震災の直後、計画停電があると聞いて「充電式LEDスタンド」を購入しました。・・・でも、なぜか私の住んでいるエリアでは計画停電が実施されずLEDスタンドは家でホコリを被るばかり。引っ越した際に、近所のファミレスの照明が暗くて(節電のため?)、本を読むことが困難で、長居できなかったのです。そこで!ホコリまみれの充電式LEDスタンドが大活躍!いやそうな顔のウェイトレスもなんのその、長時間居座るのにとっても便利!
カテゴリー: 田中圭一のゲームっぽい日常 | タグ: | 2020/06/16 更新

漫画作成ツール・コミPo!(コミポ) のポテンシャル

コミPo!(コミポ) を発売してから半年が経過し、色々な使い方に驚かされる日々です。

今回は、制作ツールとしてのコミPo! の可能性についてまとめました。

コミPo! は企画段階から漫画作品を作成するための「漫画作成ツール」として開発されました。

多くの人が小さい頃にあそびで漫画作成をした記憶があると思います。
しかし、描く表情はいつも一緒。せいぜい口が閉じてるか開いてるか。
顔の方向もみんな一緒で、右を向いている横顔と正面だけ。

会話をさせようにも、みんなが右を向くか正面しか向けないので1コマの中には
一人しか登場しないような見た目の拙い漫画しかできません。
毎週夢中になった少年週刊誌の絵の迫力に圧倒され
自分の才能のなさに気付かされ、いつからか読む専門になってしまった。

多くの方はこんな経験を最後に漫画作成から離れてしまったのではないでしょうか。
私もそんな一人です。

コミPo! は漫画作成に革命を起こす! と意気込んで発売しましたが意外にも、
マンガ作品の制作だけにとどまらず色々な使い方があります。

今回はそんな、制作ツールとしてのコミPo! の利用事例を紹介します。

最初に紹介したいのは、

HTML5 の解説にコミPo! 漫画作成機能が利用されている例

この利用例はコミPo! の漫画作成機能の中で、もっとも王道と思っています。
つまり難解な内容を分かりやすく伝えるというものです。
公開されているものはマンガなので、思わず読んでしまいます。
その結果、HTML5 への理解が高まり、使ってみようかなと思わせるということは、
コミPo! が多少なりともお役に立っていると思いうれしくなります。

SII のプリンター紹介動画にコミPo! 漫画作成機能が利用されている例

コミPo! は漫画作成に特化しており動画出力には対応をしていません。
しかし、この事例では動画の中にキャラクターが自然に登場しています。
こちらの事例では、味気ないものになりがちな、事業所向けの機器の紹介
(今回はプリンタの紹介)でコミPo! のキャラクターを登場させることで
親しみやすさが増しているように感じました。

学校の標語や行事用の資料にコミPo! 漫画作成機能が利用されている例

仙台にある中学校では、授業や学校生活にコミPo! を取り入れていただいています。
先生曰く、「みんながプリントをよく読むようになりました」とのこと。
私の記憶では学校のプリントと言えばわら半紙に、黒い文字だけのもので、
印刷の油の臭いや、内容のつまらなさ(先生ゴメンナサイ)などから、
全く良いイメージがありません。あ、年齢バレた?(汗)

しかし重要な内容や読めば役立つような内容もたくさん含まれていると思います。
これらの情報にスッと入っていきやすくするためにコミPo! の漫画作成機能を
使っていただければ嬉しく思います。子どもたちはマンガが好きですからね。

その他色々、私が知らない利用事例も日々増えているようです。

 

コミPo! は当初マンガ作品を作ることを目的に考えていましたが、
いろいろなシーンで、この漫画作成機能が利用できることが分かってきました。
皆さんもぜひ、コミPo! の可能性に触れてみてください。

以下のページの過去の主な採用事例をまとめています。
ぜひご覧ください。

コミPo! 採用事例 

カテゴリー: コミPo! | タグ: , , , , , | 2020/06/16 更新

さ~て今年のCEDECは? 『烏丸です。今年はスマー(後略』

個人的にはトレンドに乗っかるのが冗談みたいに苦手。ソリューション営業部の浅井でございます。

さて本年も近づいて参りました、ゲーム開発者の祭典『CEDEC』!
昨年は思いがけずお知らせいただいた採用事例をネタに、弊社製品「SpriteStudio」を一押し! したんですが、そのお陰なのかその後も「SpriteStudio」に関しての採用事例がどしどし。 しかもその採用事例が今時のトレンド「スマートフォン」にうまいこと乗っている、というコトもございまして・・・今年は「スマートフォン」、それに「PlayStation® Vita」をテーマにお送りいたします、というのが弊社ブースでございます。

展示内容、簡単にご紹介いたしますと、

「OPTPiX imesta 7 for PlayStation® Vita」【新製品

まず話題の「PlayStation® Vita」。
国内携帯ゲーム機としては初の”有機EL”搭載かつ高精細。より表現力の増した新ハードですが、”OPTPiX imesta 7″シリーズももちろん対応。
“PVRTC”高画質圧縮エンジンを実装、また画像により圧縮先のテクスチャ形式を自動的に選択する機能、これまでどおり多機能なマクロにより、「PlayStation® Vita」タイトル開発のサポート

※ところでなんで「PSP® go」みたいなスライド式にしなかったんでしょうか
※好きなんですがPSP® go

 

●「OPTPiX imesta 7 for Mobile Contents」【Ver.UP】

フィーチャーフォン向け画像コンテンツ制作ツールがバージョンアップ。
スマートフォンの表現力に合わせて、新たに「アルファチャンネル対応減色」機能を実装、加えて3Dポリゴンなどを使ったリッチなアプリケーション開発向けに、”PVRTC”および”ETC”などのテクスチャ圧縮機能を追加

※ところでなんで「IS01」みたいなクラムシェル式なスマフォはでないんでしょうか
※好きなんですがIS01

 

●「SpriteStudio 4 Professional」

各種コンシューマに加え、スマートフォンでの活用事例が続々!
従来通り「多目的」に使える2Dアニメーションデータの制作・出力に加え、Windows上での単体ビューア+iPhone/Android用サンプルコードを添付。
コンシューマ機と同等以上のアニメーションを表現するのに最適なツールです

※ところで来年あたりは「WindowsPhone」の採用事例とか期待していいんでしょうか。
※好きなんですがWindowsPhone。っていうかWindowsCE

 

に、加えまして、

○「SpriteStudio for ※※※※」

この”SpriteStudio”と今話題のミドルウェア「※※※※」の連携ツールを鋭意開発中、ということでプレビューを予定しております。

この「※※※※」というのも、今年のゲーム業界では実にトレンドワード。乗るしか無いこのビッグウェーブ、というか本件もとあるお客様からのご要望で実現した、弊社っぽいネタでございます

と、実に盛り沢山でお送りいたします。

また、今回の弊社展示ブースでは、「スマートフォン」を対象にゲーム開発を予定・決定されているお客様に対して、「SpriteStudio」を特別価格でご提供します。詳しくは弊社ブースにて!
ものすごくご期待ください。

最後に、プレゼントのお知らせ~でございます。
CEDEC2011会期中、「スポンサーシップセッション」「展示コーナー」「インタラクティブセッション」「コ・ロケーテッド イベント」などに参加できる「エキスポパス」を抽選でプレゼントいたします。
お申し込みは以下のフォームより。ふるってお申し込みくださいませ。
(受付は終了いたしました)

カテゴリー: ゲーム開発 | | 2020/06/16 更新