画像変換101の最近のブログ記事

こんにちは、マーケティング部の川野です。(^_^)

皆さん、画像に関することで困っていること、疑問に思っていることはありませんか。

ちょっと自慢が入っちゃいますが、ウェブテクノロジには「画像」のプロフェッショナルが揃っています。そこで、画像に関して困っている方や、疑問がある方の助けになればと願い、

「画像なんでも質問箱」

を始めました～。(^_^)v

皆さんが、画像なんでも質問箱のフォームに入力すると、ウェブテクノロジのプロフェッショナルが、このブログで解答していきます。

あなたが疑問に思っていることは、きっと同じ疑問を100人が持っている、と僕は思っています。気軽に質問してみてください。このブログで答えることによって、同じ疑問を持っている方の悩みが解消できるかもしれません。

プロフェッショナルといえども、すべての疑問には答えられないと思いますが、できるだけ答えたいと思います。まずは、始めてみようということで、（β）付きですが、「画像なんでも質問箱」フォームを公開しますので、皆さんの投稿をお待ちしています。

「画像なんでも質問箱」入力フォームはこちら

     --> 「画像な んでも質問箱」

JPEGは、ダイレクトカラー画像およびグレースケール256階調をサポートしたフォーマットです。
デジタルカメラやスキャナーなど多くのPC周辺機器で採用されていますし、ウェブサイトでも非常によく利用されていますので、非常になじみの深いフォーマットと言えます。

一般的な用途で写真画像を圧縮するには最適なフォーマットですが、決して万能ではありません。

(JEPG圧縮に関しての細かな内容は、後日に譲ります)

 ◆輪郭のはっきりした画像には向かない

JPEGは写真などの自然画像の保存には向いていますが、輪郭のはっきりしたイラストやアニメ調の絵、画面キャプチャなどにはあまり向いていません。
特に圧縮率を高く設定して保存(ファイルサイズを小さく)した場合、画像の劣化が目立ちます。

JPEGは、「人間の目は色の変化よりも明るさの変化に敏感である」という特性を利用した圧縮をおこなっています。

• 画像中の明るさを優先的に保持し、色自体の変化は間引く
• 高周波成分(画像中の細かな変化が該当)を削除している

そのため、圧縮率を高くすればするほど、色や明るさが急激に変化する部分が多い画像は劣化が激しくなります。モスキートノイズやブロックノイズが目立つようになります。

ウェブページ内のサムネイル画像で使用する場合も、同様の現象が発生しやすくなります。
元画像を小さくする(サムネイルにする)ということは、色や明るさの急激な変化をより狭い面積内で発生させることを意味しますので、画像内に大きな段差が発生しやすくなります。

画像にテキストを重ね合わせてJPEGで保存した場合も同じ理由から、ノイズが発生しやすくなります。

輪郭のはっきりした画像には、インデックスカラー画像(GIF、PNG など)が向いています。


[JPEGで高圧縮保存した場合：21.7KB]文字の周囲にモスキートノイズ

[64色へ減色後、GIFで保存した場合：19.0KB]

[ブロックノイズの例：JPEGで保存]

[上の画像を400%に拡大] ブロック状のノイズ

◆元に戻せない

JPEGフォーマットを利用する上で、もう一つ「不可逆圧縮である」という点にも、注意が必要です。
JPEGは一度保存をすると必ず劣化(保存前の画像とデータが微妙に異なってしまう現象)が発生します。JPEG画像を開いて上書き保存を実行するだけで劣化が発生してしまうのです。

「画像編集途中でJPEGで保存し、これを読み込んで編集再開」といった手順を踏んでしまってはいけません。

画像編集をおこなう際は、JPEGではなく可逆圧縮フォーマット(PNG、BMP、PSDなど）を利用するのがベストです。

最終的にJPEGフォーマットの画像を使用する場合は、完全に編集が完了してからJPEGで保存する必要があります。

JPEGは非常に圧縮の効く(ファイルサイズが小さくなる)優れた画像圧縮フォーマットです。
しかし、上記のように画像の種類や使用方法によっては適さない場合もありますので、注意が必要です。

ここでは分かりやすく、ウェブの世界に限定して話しを進めたいと思います。

ウェブで使用される画像は「ダイレクトカラー画像」と「インデックスカラー画像」の二種類に大別することができます。

• ダイレクトカラー画像
  ダイレクトカラー画像とは、イメージ側に各ピクセルごとの色情報を直接持っている形式の画像です。
  ウェブで使用されるダイレクトカラー画像フォーマットの代表的なものとしては、JPEG, PNG(※１)があります。
イメージ側各ピクセルでRGB値を持つため、インデックスカラー画像と比較すると無圧縮の場合はファイルサイズは大きくなってしまいますが、通常RGB各色の要素に8bit（色深度、ビット深度とも表現します）ずつ使用するため、一枚の画像中で1677万色まで使用することが可能です。また、1ピクセルあたり「8bitx3=24bit」で表現するため、24bitフルカラー画像とも表現します。最近では1ピクセルあたり、「16bitx3=48bit」（最大281兆色）で表現するソフトウェアも出現しています。

長所：使用できる色数が多い
短所：ファイルサイズが大きくなりがち

下のサンプルは、画像を概念的に拡大したものです。黒枠で囲まれた部分が１ピクセルに該当します。



[画像の拡大概念図]

ダイレクトカラー画像では、各ピクセル単位にRGB値を保持しています。
 

[1ピクセル内の情報]

そのため、例えば256ピクセルx256ピクセルの画像を表現するためには、
8bitx3x256x256=1,572,864bit(196,608byte)が必要となります。（※２）

• インデックスカラー画像
  カラーパレットを持つ形式の画像です。
  カラーパレットとは、色が順番に並んだテーブルだとお考えいただければ良いと思います。
  ウェブで使用されるインデックスカラー画像フォーマットの代表的なものとしては、GIF、PNG（※１）があります。

カラーパレットには、1677万色の色空間から選ばれた最大で256色が並びます。256色には0番から255番までの番号が割り振られ、この番号をインデックス番号と呼びます。0～255のインデックス番号は8bitで表現可能なため、8bitインデックスカラー画像とも表現されます。

イメージ側の各ピクセルは、カラーパレットのインデックス番号のみを持っているため、無圧縮状態のダイレクトカラー画像と比較して、1/3程度のファイルサイズとなります。

長所：ファイルサイズが小さくなる
短所：使用できる色数が少ない

 

下のようにイメージ側ではインデックス番号だけを持っていて、



 [インデックスカラー画像のピクセル側イメージ]

RGB値はパレットが持っています。



[パレットのイメージ]

 

256ピクセルx256ピクセルの画像を表現するためには、
8bitx256x256+8bitx3x256=530,432bit(66,304byte)が必要になります。（※２）

(※１) PNGは、ダイレクトカラー画像とインデックスカラー画像の両画像に対応しているファイル形式です。

(※２）ダイレクトカラー画像、インデックスカラー画像とも、非圧縮時のファイルサイズです。

＜＜おまけ＞＞
下の画像は、ダイレクトカラー画像、インデックスカラー画像のどちらだと思いますか？

[サンプル画像]

実はこれはインデックスカラー画像です。
色数が多く見えるため、ダイレクトカラー画像のように思われるかもしれませんが、256色だけを使用したインデックスカラー画像です（右クリックで保存して、確認してみてください）。

この画像は、ダイレクトカラー画像を弊社製品OPTPiX imesta 7を使って減色（インデックスカラー画像化）したものです。
色数が少なくても表現力豊かな画像を作り出すことが可能な例と言えます。

(written by YK)

これから、画像に関する話題を「画像変換101」と題して、紹介させていただきます。
「101」とは、英語圏で「入門書」を意味する言葉です。
ここでは、画像に関する入門書レベルの話をさせていただければと思います。

#1: 画像を構成するもの
みなさんご存知の通り、コンピュータ上の画像は、点(ドット)の集合体で表現されています。

点は3種類の色を重ね合わせることで表現されています。
3種類の色というのは、それぞれR（赤）,G（緑）,B（青）のことです。
RGBは光の三原色とも呼ばれ、それぞれ0から255までの値を持つことができ、これらの値の組み合わせでさまざまな色を表現します。

R=0,G=0,B=0だと黒を現し、R=255,G=0,B=0だと真っ赤（純赤）を現します。

また、R=255,G=255,B=255だと白を現します。 

コンピュータ(電子機器)での色の表現方法には、RGBの他にもいろいろな表現方法があります。

例えば印刷用のデータではCMYKが使われます。
CMYKは、C（シアン）, M（マゼンタ）, Y（黄）, K（黒）の値で色を表現します。
これは、いわゆる色の三原色(赤青黄)に黒を加えたものです。
CMYKの場合、値がすべて0の場合は白を表現し、重ね合わせると黒になります。

家庭用インクジェットプリンタのインクの色もCMYKの４色からなっていますが、最近では、より高画質な印刷を目指してCMYK以外のインクを使用しているものもあります。
しかし、その場合もCMYKの色の世界に準拠して、それぞれを細かく表現できるように分割したものです。 

RGBやCMYKなど色の表現方法のことを色空間（カラースペース）といいますが、色空間にはRGB、CMYK以外にHSVやHLS、主に映像(テレビ)信号用に使われるYCbCr, YPbPr, YUVなど、用途に応じてさまざまなものがあります。