現在の活動について

保存したら荒くなった・・・デザインカンプの最適な保存形式

デザインを作って、書き出してクライアントに確認してもらう時に書き出す画像のことを「デザインカンプ」と言います。

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形式でください」など指定があることが多いです。

記述したような違いがありますが、クラインアントの指示に従いましょう。
書き出したものの、画質が悪ければ臨機応変に形式を変えてみましょう。

ABOUT US

mmm-designグラフィックデザイナー
mmm-design(スリーエムデザイン)代表のフリーランスグラフィックデザイナー。日々の制作実務の経験を元にグラフィックデザインスクールの講師やチラシ講座を開催しています。初心者の方にもわかりやすくをモットーに記事を書いています。