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

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

ついに、という感じで新しい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 &ampl Social トライアルフォーム

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

田中圭一のゲームっぽい日常 「費用対効果」という側面で栄養を摂る

昼食に「カップ焼そば」を食べています。

それも週に5回。

なぜそんなに食べるのか?

好きだから?

・・・・・・いえ、答えはNoです。

特に嫌いってワケじゃないですが、毎日食べるほどのものか!と、自分でも思います。

では、なぜ食べ続けるのか!?

それは、カップ焼そばが「偉大」だからです。

カップラーメンは、偉大じゃありません。

カップ焼そばだけが偉大です。

それはなぜか?

たったの200円で730kcalも栄養が摂れるからです!

なんという費用対効果の高さ!

牛丼なんか足元にも及ばない!!

じつに素晴らしい。

その魅力に負けて、今日も食べちゃいました。

・・・でも、周囲の誰ひとりとして、私の意見に賛同する人はいません。

実に残念だ。

 

カテゴリー: 田中圭一のゲームっぽい日常 | タグ: | 2018/06/22 更新

漫画作成ツール「コミPo!」で本が出ました!

先日9月22日に、「コミPo!」を利用した初の本格的な書籍がリリースされました。

魔法でわかる労働法

「魔法で分かる労働法」 ~ 間違いだらけの労働現場 ~ 特定社会保険労務士 曽利 和彦 著

タイトルは楽しげ?ですが、著者は特定社会保険労務士の方・・・。内容は労働現場にありがちな間違った認識を正しく解説するもの。

見た目がオールカラーの萌え系マンガというところが異色です。以前から企画そのものは聞いていたのですが、実物を見るのは初めてでオールカラーの漫画が書籍としてできあがるとちょっと感動です。

全190ページで、6章構成です。1章あたり約30ページ程度という分量を基本的には2,3日で作成したそうです。

コミPo! の漫画作成ツールとしての威力を存分に発揮していると思いました。隣の席の、漫画家田中圭一先生に同じ分量の作業時間を確認したところフルカラーなら2週間はかかるページ数とのこと。

ここが漫画作成ツール「コミPo!」の素晴らしいところです。

なお、著者の曽利さんは漫画作成に関しては完全に素人だったそうで、「魔法で分かる労働法」を出版するにあたって初めて、漫画作成方法を勉強したそうです。ご本人は素人が漫画を描いたため「見苦しいところがありお恥ずかしい」とお話ししていましたが、そんなことはありません。

曽利さんは漫画としてはまだまだ上達したいと思っているようですが、それがあっても発行を決意したのは

「難解な内容を分かりやすく伝えたい」

という信念からだそうです。

これは漫画作成ツール「コミPo!」を提供している私たちも同じ思いで日々頑張っています。

このような取り組みにご興味を頂き9月16日、読売新聞の朝刊で「魔法で分かる労働法」 が「くらし家庭面」の特集記事で紹介されました。

また、この書籍の出版元であるハーヴェスト出版さんは「むずかしい」から「たのしくわかる」へというキャッチコピーの出版社でまさに3者とも同じ方向を向いている訳です。

もともとはPC98シリーズ向けの記事などを書いていた当社ですが、この度久しぶりに本格的な書籍が身内から出たような気がして思わず記事に書いてしまいました。

コミPo! 公式ブログでも記事を紹介しているので、そちらもご覧ください。

これからも漫画作成ソフト コミPo! にご期待ください。

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

OPTPiX iMageStudio 6 for Mobile Contentsがバージョンアップします!

こんにちは、ソリューション営業部の嶋です。

続々と出てくる携帯の新機種情報。今年の春くらいからでしょうか、リリースされる端末はAndroid端末が中心となり、気が付けばフィーチャーフォンのラインナップのほうが少なくなっている状態に。コンテンツを提供する側も大急ぎでスマートフォン対応を進めているのではないでしょうか。

とはいえ、スマートフォンはフィーチャーフォンとは勝手が違います。特にアプリの開発にあたっては全く別物と言ってもいいくらいです。画像のファイルサイズに悩まされたり、画像処理の関係で十分な処理速度が得られなかったり……。

そんな、スマートフォンならではのお悩みを解決すべく、OPTPiX iMageStudio 6 for Mobile Contentsがバージョンアップ。新たに「OPTPiX imesta 7 for Mobile & Social」と名称も変わり、スマートフォン向けのサイト製作や、スマートフォンアプリ開発に効果的な機能を搭載しました。

アルファチャンネル付き画像の減色に対応

OPTPiX imesta 7 for Mobile Contents アルファチャンネル対応減色
半透明の画像には必須の「アルファチャンネル」ですが、フルカラーのアルファチャンネル付き画像はとかくファイルサイズが大きくなりがち。OPTPiX imesta for Mobile & Socialではこのアルファチャンネル付き画像の減色に対応、美しい画像を維持しつつファイルサイズを最大1/4程度まで小さくすることができます。

スマートフォンの機種情報も配信開始

iPhone4、GALAXY S、Xperia Arcなどのスマートフォンに最適な画像を自動で出力できる機種情報の配信もスタート。アプリだけでなく、スマートフォン向けサイトの製作の効率がアップします。

端末自身のスペックも高く、メモリも豊富にあるため「フルカラーの画像をそのまま使っても大丈夫」と思われがちなスマートフォン。でも、PCと同じようにサイトやアプリを作っていませんか?

Webコンテンツも、アプリも、ファイルサイズの大きな画像をそのまま使ってしまうと、「もっさり」してしまいます。コンバージョンやアプリの評価にだって、影響が出てきます。

画像の最適化で3G回線でも快適なサイトを。
どんな端末でもサクサク動くアプリを。

OPTPiX imesta 7 for Mobile & Socialではすべての機能を1ヶ月間お試しいただけるフルトライアルもご用意しています。詳細はOPTPiX imesta 7 for Mobile & Socialのページをご覧ください。

カテゴリー: OPTPiX imesta | タグ: , | 2018/07/03 更新

モノクロ(白黒)電子書籍(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」です。

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

 

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