画像の符号化

画像を符号化するとき、情報量を圧縮してファイルサイズを小さくすることができます。圧縮方法には、可逆圧縮と非可逆圧縮の2種類があります。

可逆圧縮とは

画像データの圧縮前（ファイルを作成するとき）と伸張後（実際に表示する時）とで情報が完全に一致する圧縮方法。

非可逆圧縮とは

画像データの圧縮前と伸張後とで情報が完全に一致しない圧縮方法。

---

画像の種類

ウェブ上で表現できる画像やグラフィック表現はビットマップ形式とベクター形式に大きく分けられます。

ビットマップ形式とは

画像を方眼紙のように細かく区切り、色の点（ピクセル）の集まりで表現する形式。ピクセルの密度の細かさを解像度 [1] といい、単位はppiやdpiで表す。ウェブ画像では、一般的に72ppi(dpi)が利用される。拡大すると（点が大きくなり）画像が粗くなるが、これを「解像度に依存している」という。

ベクター形式とは

数式で描くグラフのように拡大しても画像が粗くならない保存形式。ベクトル画像、ベクターイメージ、ベクタグラフィックス、ベクタデータ などともいわれる。点と点を線で結ぶことによって画像を表現するため、綺麗な表現が描ける。Illustratorなどのドローツールで描くことができる。

---

ウェブで使用する「ビットマップ形式」

ウェブで使用するビットマップ形式は GIF、JPG、PNG で、これらに変換することを「画像の最適化」と呼びます。ボタンやイメージにテキストも含めて、1ページのトータルファイル容量は200～300KBをガイドラインとして設定しています。企業が多いウェブ画像の解像度は、72ppi（pixcel per inch）を基準にしています（AI、PS、FWのデフォルト設定）。

GIF形式とは

グラフィック インターチェンジ フォーマット（Graphics Interchange Format）の略。1ピクセルあたり8bitの色情報があり、1つの画像ファイルの中で色数を256色（2の8乗）まで使用できる。インデックスカラーという方法で色を指定している。減色することでファイルサイズをカットでき、1色のみ透過として扱うことも可能。可逆圧縮で画像の劣化（ノイズ）がなく、色数が限られているのでイラストやアイコンなどに向いている。拡張機能に透過GIF [2] 、インタレースGIF [3] 、アニメーションGIF [4] がある。GIF規格には1987年に公開されたGIF87aと1990年に公開されたGIF89aの2種類があり、GIF89aでは、「透過GIF」と「アニメーションGIF」がサポートされた。

JPG形式とは

ジョイント フォトグラフィック エクススポーツグループ（Joint Photographic Exports Group）の略。画像の圧縮方式のひとつでファイル形式ではない（ファイル形式としてはJFIFが採用されている）。1ピクセルあたり24bit（GIFの3倍）の色情報がある。フルカラー1,677,216色（2の24乗）が使用でき、写真やグラデーションなどに向く。圧縮前の状態には戻らない非可逆圧縮で、8×8ピクセルのブロック単位で扱われる。圧縮率を高くするとデータサイズは小さくなるがブロックノイズなどが発生し画質が低下する（画質とファイルサイズはトレードオフの関係）。JPEG2000圧縮という後継方式があり、低圧縮の場合には可逆圧縮方式もサポートされているが一般的ではない。拡張機能にプログレッシブJPG [5] があり、低速なインターネット回線からの閲覧者を考慮して採用される場合がある。

PNG形式とは

ポータブル ネットワーク グラフィックス（Portable Network Grahics）の略。ピングと読む。W3Cが開発（標準化）した画像形式で勧告されており、ISO、IEFEで標準仕様とされている。GIFとJPGの性質をあわせもつ。GIFと同じく画像が劣化せずデータを損なわない可逆圧縮で、JPGと同じくフルカラー表現が可能。透過はアルファチャネルという形で情報をもつことができる。ファイルサイズはJPGよりも大きくなり表示が遅い。非対応のブラウザもあり、携帯向けコンテンツを除き普及していないのが現状。拡張機能に「透過PNG」「インタレースPNG」がある。PNGのアニメーション版「MNG」は、ほとんどのブラウザがサポートしていないため一般的に使用しない。

---

ウェブで使用する「ベクター形式」

ウェブで公開できるベクター形式は SVG、PDF などがあります。

SVG形式とは

スケーラブル ベクター グラフィックス（Scalable Vector Graphics）の略。XMLによって記述されたベクター画像を描画するためのマークアップ言語。2001年にW3C勧告された。SVGはXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという形態を取っている。このため、テキストエディタでSVGファイルを作成して画像を表現することも一応可能になっている。また、アニメーション機能などもあり、Flashのような簡単なインタラクティブコンテンツが作成できる。

PDF形式とは

ポータブル ドキュメント フォーマット（Portable Document Format）の略。2008年にISOによって標準化されたAdobe社の電子文書フォーマット。PDF形式のファイルには文字情報だけでなく、フォントや文字の大きさ、字飾り、埋め込まれた画像、それらのレイアウトなどの情報を保存できる。PDF文書の作成ソフトとしてAdobe Acrobatを、表示ソフトとしてAdobe Readerを提供しており、他社の互換ソフトを利用することもできる。

---

ウェブで使用しない画像形式

制作のために使用するウェブでは公開しない画像形式として AI、PSD などがあります。

AI形式とは

Adobe Illustrator の標準ファイル形式。エーアイと読む。各バージョンごとに保存形式が異なり、編集できない場合がある。Illustratorは画像をベクトル画像として作成し、比較的軽量で拡大や変形にも強い。

PSD形式とは

PhotoShop Data の略。「Adobe Photoshop」の標準ファイル形式。レイヤーやパス、印刷情報や著作権情報などを付加して保存できる。Photoshop以外にIllustratorやFireworksで保存・読み込みができ、画像の編集や元データの保管に使用される。

TIFF形式とは

タグドイメージファイルフォーマット（Tagged Image File Format）の略。ティフと読む。比較的アプリケーションソフトに依存しない画像フォーマット。互換性のある保存形式で、圧縮をしないので画像の劣化もないがファイルサイズが大きい。1枚の画像データを、解像度や色数、符号化方式の異なるいろいろな形式で一つのファイルにまとめて格納できる。

BMP形式とは

ビットマップ（Bitmap Image）の略。Windowsが標準でサポートしている画像形式。TIFFのWindows版といった感じのもの。

EPS形式とは

エンカプセルド ポストスクリプト（Encapsulated Post Script）の略。イーピーエスと読む。印刷向けデータの作成に適したファイル形式。AI形式と違い、新旧のバージョンに依存しない共通のファイル形式となる。印刷イメージなどに使われるPostScript [6] で画像ファイルを構成するための形式で、ベクタデータとビットマップデータを組み合わせた画像を保存することができる。

PICT形式とは

Apple社のMac OSで用いられていた画像ファイル形式。Mac OSにおいてはほとんどのアプリケーションでサポートされており、汎用的に利用できる。WindowsにおけるBMP形式に相当する立場の画像ファイル形式といえる。Mac OS Xでは、画像ファイル形式の標準としてPDFが採用されている。

---

画像処理に関する用語

制作現場で画像処理に際によく使われる用語をピックアップしました。

アンチエイリアスとは

文字や図形などを滑らかにきれいに見せる機能のこと。アンチエイリアスがオンになっていると、曲線のエッジを中間色で補間することでギザギザがなくなる。

アウトライン化とは

文字データを線画（ベクトルデータ）に変換する機能のこと。アウトライン化により文字の輪郭を図形化させることで、データのフォントの情報が自分のコンピュータに無い場合でも文字化けを予め防ぐことができる。

レンダリングとは

画像や画面の内容を指示するデータの集まり(数値や数式のパラメータ、描画ルールを記述したものなど)をコンピュータプログラムで処理して、具体的な画素の集合を得ること。

レタッチとは

画像データ、特に写真を取り込んだデータを加工・修正する作業。細かな汚れを取り除いたり明るさや色調を調整したり、拡大や縮小、合成などコンピュータによる画像データ加工の意味で用いられる。

DTPとは

版物のデザイン・レイアウトをパソコンで行い、電子的なデータを印刷所に持ち込んで出版（机上出版）すること。