JPEG（Joint Photographic Experts Group）
続いて、写真によく利用されるJPEG形式について紹介します。
JPEGの特徴
JPEGは非可逆圧縮形式なので元の画質と全く同じ状態には戻すことができません。代わりに高い圧縮率でファイルサイズを抑えることができます。
ちなみに、JPEGの圧縮方式は8×8画素のブロックに分割され、そのブロック単位で圧縮が行われます。そのため急激な色の変化やベタ塗りは苦手です。
また、圧縮率を調整するオプションがあるのでユーザーの判断で画質を変更することができます。圧縮率を上げすぎるとファイルサイズを抑えることができますが、代わりにブロックノイズが発生するので注意が必要です。
JPEGを拡大すると、はっきりと8×8のブロックを確認することができます。
| 圧縮形式 | 非可逆圧縮形式 |
|---|---|
| 圧縮技術 | 離散コサイン変換（DCT：Discrete Cosine Transform） |
| データ形式 | ラスター形式 |
| 拡張子 | .jpg .jpeg |
| 最大色深度と色数 | 24bit（16,777,216色） |
| インデックス化 | 非対応 |
| 透明色（Transparent） | 非対応 |
| 透過処理（Alpha Channel） | 非対応 |
| 段階的表示 | 対応（プログレッシブ） |
| アニメーション | 非対応 |
補足
8×8画素のブロックを意識し、画像上の色が変化する部分に境目を持ってくることで圧縮時のノイズを軽減し画質を維持しつつ高い圧縮を実現できます。このように理論的には可能ですが実際に8×8画素のブロックを意識して画像を作ること現実的ではありませんね。
また、JPEGは保存するたびに非可逆圧縮により劣化するということを覚えておきましょう。
JPEG形式が向いている用途
- 写真などのフルカラーまたはモノクロ写真
PNG-8/24/32（Portable Network Graphics）
最近ではやっと古いIEの対応も減り、一般的になったPNGについてです。
PNGの特徴
PNGはJPEGなどの非可逆圧縮と違い、圧縮による劣化がない可逆圧縮形式です。
PNGには、PNG-8、PNG-24、PNG-32と3つの種類（この種類は仕様で定義されているわけではありません）があり、PNGはWebサイトで使われる一般的なラスター形式で透過処理が利用できる唯一の形式です。
| カラータイプ | PNG-8 | PNG-24 | PNG-32 |
|---|---|---|---|
| 圧縮形式 | 可逆圧縮形式 | ||
| 圧縮技術 | Deflate | ||
| データ形式 | ラスター形式 | ||
| 拡張子 | .png | ||
| 色深度と色数 | 8bit（256色） | 24bit（16,777,216色） | 24bit（16,777,216色） |
| インデックス化 | 対応 | 非対応 | 非対応 |
| 透明色（Transparent） | 対応 | 非対応 | 対応 |
| 透過処理（Alpha Channel） | 対応 | 非対応 | 対応 |
| 段階的表示 | 対応 | 対応 | 対応 |
| アニメーション | 非対応 | 非対応 | 非対応 |
PNGの仕様で定義されていても、PhotoshopやIllustratorなどのツールによって書き出しのオプション指定ができない場合があります。
補足
Photoshopではできませんが、画像に適したフィルタを指定することでDeflationの圧縮率を上げることが可能です。
具体的に言うとGIFは横方向のストライプのみに対して圧縮率が高くなりますが、PNGはフィルタ形式の選択により、縦方向のストライプの圧縮率を上げることもできます。
Photoshopからの書き出しについて
残念ながらPhotoshopではPNG書き出しの細かな指定ができません。私も多々誤解をしていましたが、Photoshopでできることが仕様のすべてではないことを知っておきましょう。
多くの方が知っていることだと思いますが、Photoshopの「Webおよびデバイス用に保存」のダイアログではPNG-32のことをPNG-24と表記しています。
Photoshopの場合、PNG-24（Photoshop上の表記）はPNG-32を指しています。オプションの透明部分からチェックを外すと本来のPNG-24となります。
PNG形式が向いている用途
- べた塗りの多い色数の限られた画像（GIFと比較しましょう）
- 透明度（アルファチャネル）を指定したい画像
