画像減色」カテゴリーアーカイブ

アニメーションGIFファイルサイズ縮小化機能で使った手法とは

ウェブテクノロジ R&D部 清水です。

OPTPiX imésta 7 for Mobile & Social Ver.7.60で追加した「アニメーションGIFファイルサイズ縮小化」機能では、実写動画などを元に、以下のような高圧縮のアニメーションGIFファイルを生成することができます。

実写映像をアニメーションGIF化したサンプル1 (画像クリックで比較ページが開きます)

アニメ調の映像をアニメーションGIF化したサンプル (画像クリックで比較ページが開きます)

実写映像をアニメーションGIF化したサンプル2 (画像クリックで比較ページが開きます)

アニメーションGIFファイルサイズ縮小化機能(以下、本機能)では、いくつかの縮小化手法を組み合わせた結果として高圧縮を実現しています。本記事では、どのような処理を行って実現しているのかを簡単にご紹介します。 続きを読む

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

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

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

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

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

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

続きを読む

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

モノクロ(白黒)電子書籍(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/12/11 更新

減らした色数が戻る不思議。「ディザ除去」とは?

「断捨離」をご存知でしょうか。

Googleで検索すると、なんと「2,540,000件」もヒットしちゃうトレンドワード、なんですが要は「物を捨てることで整理整頓、身軽になって快適な生活を送っちゃうぜイエー!」みたいな話だそうで。(→Wikipedia
なるほどなぁ、とか思ってもコレクターなんかしちゃってるソリューション営業部浅井としましては難しいお話。っていうか自室に沢山ある「物」もきれいに整理整頓している「つもり」だったりするので、これを捨てたらそれは身軽にはなるだろうけど快適かと言われると・・・? みたいな。

さて「捨てちゃう」つながりで”減色”の話題。
画像データを軽くしたくて”減色”、したデータ。実はこの”減色”で一度減ってしまった、捨てちゃった色を取り戻す方法があるのはご存知でしょうか。(もーなんか「断捨離」から対局にありますが)

ご紹介しますのがこちら、『減色後画像の復元(ディザ除去)』

ディザ除去の例

弊社製品”OPTPiX imesta 7″シリーズに搭載されている機能。
減色後のデータから「ディザ成分」だけを除去することで、減色して「インデックスカラー」化した画像データを「フルカラー」に復元することができちゃう・・・という・・・!

はてさてこの機能、どーいうタイミングで使うの?
ということで実際の活用事例からご紹介しますと、前世代の「据え置きゲーム機」から「高解像度な携帯ゲーム機」への『移植』。タイトル名を出すのは差し控えますが、旧作で作ったテクスチャデータ、でも減色「前」の元データがもう残っていない。なので、現物として残っているインデックスカラー化したテクスチャデータをこの『ディザ除去』でフルカラーに再変換、その後携帯ゲーム機向けに再度圧縮をかけた、という事例が。なので『減色→ディザ除去→再圧縮』と。

折りしも今年は新世代の携帯ゲーム機に加え、ゲーム専用機と遜色ないスペックを持ったスマートフォンが続々登場。旧作の「移植」や「リメイク」の話も多数。なのでこの『ディザ除去』で、過去の「断捨離」で捨てちゃったものを取り戻す、そんな事例が出てくる・・・予感・・・!

※今気づいたんですが、このエントリ、「アンチエイジング」とかにした方が良かったですかねぇ

『減色後画像の復元(ディザ除去)』

『減色後画像の復元(ディザ除去)』機能を持つ代表的な製品は、こちら。

“OPTPiX imesta 7 for PSP®”
“OPTPiX imesta 7 for Mobile & Social”

の他、もちろん今話題の新製品対応版”OPTPiX imesta 7″にも実装されます! のでお楽しみに!

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

画像容量を小さくする方法

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

突然ですが、今日は、画像容量の減らしかた!について書かせていただきたいと思います。

「画像容量」と書くと、難しく聞こえますが、写真などの画像ファイルのファイルサイズのことになります。
「写真容量」と書いても「画像サイズ」と書いても「画像ファイルサイズ」と書いても、
同じ画像の容量のことを指しています。

さて、画像容量を小さくしたい方は意外に多いのではないでしょうか。
たとえば、ブログに画像をアップロードしている方。

  • ブログにアップロードできる画像の1枚あたりの容量が、最大500KBまでとか、300KBまでとか、制限があったり。
  • ブログにアップロードできるフォルダの許容量が1GBまでとか、30MBまでとか、制限があったり。

制限が無かったとしても、容量を小さくおさえることは、サーバーの運営コストもおさえられますし、
通信コストもおさえられますし、なによりブログが表示されるまでの時間に影響します。

もちろん、サーバーを管理しているかたは常に気になる話題だと思います。
しかし、すべてのユーザが気にしていることではないので、
サーバーの容量はすぐにいっぱいになってしまうようです。

画像の容量を減らしたい方には、ぜひとも使っていただきたい機能があります。
それは「OPTPiX WebFree」のファイルサイズの上限を指定した画像容量の調整
(画像最適化)機能
です。

では、具体的に画像の容量の減らし方を解説します。

1.縦横サイズを調整する

たとえば、OPTPiX WebFreeのページでサンプル画像として使っている以下の画像ですが、
実は携帯電話で撮った画像なのです。

携帯電話で撮影した画像

携帯電話で撮影した画像

上の画像は
縦横サイズ : 816×612
画像容量 : 450KB

と、一般的なブログで表示するには、大きすぎる写真になっています。

この情報は、Windows 7 などでは、エクスプローラーなどで画像ファイルを選択したり、
マウスカーソルを乗せたりするだけで、プロファイル情報として表示されます。

サンプル画像プロパティ

サンプル画像プロパティ

最近は、デジタルカメラの性能が非常に高くなり、
標準で撮影しても 4000×3000 pix などと大きな画像も珍しくなくなりました。

そのようなデジカメで撮った大きな画像を知らずにアップロードすると、
必要も無いのにWebサイトが重くなり、表示に時間がかかったり、
スマートフォンなどでは表示できなかったり、いろいろ問題が起こります。

OPTPiX Webfreeの機能の一つとして、まずは、画像の縦横サイズを縮小することで
画像の容量を減らすことが可能です。
縦横それぞれ半分にすれば、画像容量は理論的には1/4になります。
ここでは、816×612 を 408×306 にしてみます。

画像の縦横サイズを50%にしてみる

画像の縦横サイズを50%にしてみる

縦横サイズ : 408×306
画像容量 : 53KB

と、この画像の場合はもとの容量の8分の1以下になりました。
予想外に小さくなりましたね。

 

2. 上限サイズを指定して圧縮する

実は、「OPTPiX WebFree」には、他の画像加工ツールには存在しない機能があります。
それが「画像容量の上限サイズを指定した圧縮機能」なのです。

他のツールでは、80とか、70とか、数字を指定して圧縮率を変えていきます。
このとき画像の容量(ファイルサイズ)がいくらになるのか、圧縮してみないと分かりません。

80を指定した時は80KBだったからといって、60を指定すれば60KBになるわけでは無いのです。
やってみないと分からないのです。

このため、作業効率が悪いのです。
希望する容量にするには何度も試行錯誤というやり直しが必要になります。

この点は「OPTPiX WebFree」や弊社の他のツール(たとえば「OPTPiX imestaシリーズ」)にアドバンテージがあります。
以下のように、上限サイズ(たとえば40KB以下)を指定できるのです。
試行錯誤はいりません。最適化された画像が手に入ります。

上限サイズ40KBを指定して圧縮

上限サイズ40KBを指定して圧縮

一回のボタンで、指定サイズ以下でもっとも高画質な画像になります。

JPEG以外の画像フォーマット、PNGでも、GIFでも、
どのファイル形式でも容量を指定した画像の圧縮(画像最適化)ができます

「OPTPiX WebFree」のもう一つのおすすめ機能である「エンハンストフィルター」も通して、
キレイに美味しそうにした40KB以下の画像を置いておきます。

40KB以下に調整した画像

40KB以下に調整した画像

いかがでしょうか。

ブログに画像をアップロードする際には、
ぜひ「無料画像加工サイト OPTPiX WebFree」をご活用いただき、
画像容量を小さく・軽く・そしてキレイに!していただきたいと思います。

また、たくさんの画像の加工処理を行ったり、減色の際に細かな設定を行いたい、
という方にはWindows用アプリケーションである「OPTPiX imesta 7 for mobile & Social」
おすすめします。

よろしくお願いいたします。

※ OPTPiX WebFreeはβ公開を終了しました。

カテゴリー: 画像減色 | タグ: , , , | 2019/01/07 更新