デザインを作って、書き出してクライアントに確認してもらう時に書き出す画像のことを「デザインカンプ」と言います。
IllustratorでもPhotoshopでも書き出す際に保存形式が選べます。
その際に「png形式」にするか「jpeg形式」にするか迷ったことはありませんか？
WEB制作においてというよりも、「グラフィックデザインをクライアントに確認してもらう際の書き出し」という観点で形式の違いを紹介します。（デザインカンプにおいてgifに書き出すことはまずないですが、参考にgif形式についても紹介します）
PNG・JPEG・GIFのメリット・デメリット
| メリット | デメリット | |
| PNG | 透明にできる 圧縮でデータを失わない 画質がJPG、GIFよりキレイ |
保存形式の中で一番サイズ容量が大きくなる |
| JPEG （JPG） |
多色でサイズの大きい画像でも保存容量を小さくできる | 保存ごとに画像が劣化するので、繰り返しデータ保存が不可能透明にできない |
| GIF | 動画・簡単な透過画像を作ることができる | 表現の色数が256色と少ない |
PNG・JPEG・GIFの保存形式の違いと特徴
| PNG | JPEG・JPG | GIF | |
| 読み方 | ピング | ジェーペグ | ジフ |
| 正式名称 | Portable Network Graphics |
Joint Photographic Experts Group |
Graphics Interchange Format |
| 拡張子 | .png | .jpg | .gif |
| 表現可能色数 | 約1670万色 （24bit/フルカラー） |
約1670万色 （24bit/フルカラー） |
256色 （8bit） |
| 画像ファイルサイズ | 重い | 軽い | 軽い |
| 透明色 | できる （半透明可） |
できない | できる （半透明不可） |
| 圧縮でデータが失われるか | 失われない （色情報を完全に維持） |
失われる （劣化する） |
失われない （色情報を完全に維持） |
| 適している画像 | 色数が少ないもの イラスト系（人工物） |
色数が多いもの 細密な画像 グラデーション ぼかしが多い画像 写真系（自然物） |
アニメーション ベタ塗りアイコン 簡単な透過画像 グレースケール画像 |
| 適さない画像 | 特になし （アニメーションは不可） |
アイコン 平坦なイラスト 輪郭が鮮明なもの |
写真 |
| 使用例 | イラスト ベクターデータ |
写真 ビットマップ画像 |
GIFアニメ |
使い分け
GIFはアニメーション以外に使わないので、PNGにするか、JPGにするか。簡単に言うと
- 塗りつぶしの多い画像（イラストやアイコン）はPNG
- 複雑な色の画像（写真やグラデーション）はJPG
と覚えいておくと良いでしょう。
ペタっとしたイラストやアイコンは、色数が少なく輪郭がはっきりしていているので、輪郭がキレイに書き出され、少ない色数でデータ容量も軽く書き出されるPNGが向いています。
また、写真のように複雑な色で表現しないといけない場合は、再現するための色数の多いJPEGを選択すると、鮮明に再現されたものが書き出されます。
PNG-24とPNG-8
PNGにはPNG-24（約1670万色）とPNG-8（256色）の2種類があります。
書き出す時に迷われた方もいるかもしれません。
PNG-24は色数がPNGの中でも多く、容量の重い画像が書き出されます。
上記で記述したように、PNGはイラストに向いていますが、PNG-24にすると写真やグラデーションもキレイに保存が可能です。
PNG-8は色数がGIFと同じ256色しかありませんので、イラスト系ならキレイに書き出されますが、写真やグラデーションには向きませんので注意が必要です。
実際のところ
クライアントによっては「JPG形式でください」など指定があることが多いです。
記述したような違いがありますが、クラインアントの指示に従いましょう。
書き出したものの、画質が悪ければ臨機応変に形式を変えてみましょう。
