DTP・web制作で覚えておきたいファイル形式について

こんにちは。
ファイルを保存したい時、どの形式が相応しいのか？迷ってしまう時がありますよね。
今回、おおまかにファイル形式ごとの特徴などを分かりやすくまとめてみました。
ぜひ参考にしてみてください！

ビットマップ画像とベクトル画像

はじめに、理解しておかなければならない画像データの種類が大きく分けて２つありますので確認していきましょう。

ビットマップ画像（ラスター画像）

ピクセルごとに色が割り当てられており、繊細な色彩表現が可能です。
写真画像やグラデーションなどの表現に向いています。

ベクトル画像（ベクター画像）

オブジェクトの形状を数値で表すため、なめらかでスムースな輪郭を表現できます。
拡大時にも形状を崩すことなく表示されます。

web用画像で利用されるファイル形式

.JPG/.JPEG（ジェイペグ）

• ＜形式＞　ビットマップ
• ＜ファイルの容量＞　小
• ＜色数＞　1,677万色
• ＜透明化＞　×
• ＜使用場面＞　写真
• ＜その他＞　上書き・圧縮すると画質が劣化し特有のノイズが発生する

.GIF（ジフ）

• ＜形式＞　ビットマップ
• ＜ファイルの容量＞　小
• ＜色数＞　256色
• ＜透明化＞　○（半透明は×）
• ＜使用場面＞　ロゴ・アイコン・アニメーション
• ＜その他＞　圧縮すると画質が劣化する、写真には不向き

.PNG-8（ピング-8）

• ＜形式＞　ビットマップ
• ＜ファイルの容量＞　小
• ＜色数＞　256色
• ＜透明化＞　○
• ＜使用場面＞　イラスト・ロゴ
• ＜その他＞　画質がほとんど劣化しない

.PNG-24（ピング-24）

• ＜形式＞　ビットマップ
• ＜ファイルの容量＞　大
• ＜色数＞　1,677万色
• ＜透明化＞　○
• ＜使用場面＞　透明〜半透明
• ＜その他＞　画質がほとんど劣化しない、非対応ブラウザあり

.SVG（エスヴイジー）

• ＜形式＞　ベクトル
• ＜ファイルの容量＞　小
• ＜色数＞　256色
• ＜透明化＞　×
• ＜使用場面＞　イラスト・ロゴ・web用ベクター画像
• ＜その他＞　画質がほとんど劣化しない

簡単にまとめると・・・

・写真やグラデーション、繊細な色彩表現を求めるならJPG。

・アニメーションを作る場合や背景を透明にしたい場合はGIF。

上記のJPGとGIFは容量が軽いというメリットがありますが、圧縮方法が不可逆圧縮のため保存するたびに画質が劣化してしまいます。

PNGとVSGは可逆圧縮のため、上書き保存後も元の状態を保つことができます。しかし、その分JPGやGIFよりもデータ容量が大きくなってしまうデメリットもあります。

・PNG-8は、色数が少なく透明部分を持たせたい場合に。

・PNG-24は、透明〜半透明のグラデーションなどの表現に。

また、PNGは保存後等しく”PNG”の拡張子で保存されます。

・SVGは、色数の少ないロゴやイラストをベクターで表現したい場合に。

それぞれ特徴やメリットデメリットがありますので、それらを踏まえた上でファイル形式を決定していきましょう。

DTPで利用されるファイル形式

.AI（エーアイ）

• ＜形式＞　ベクトル/ビットマップ
• ＜ファイルの容量＞　大
• ＜カラーモード＞　ほぼ全てのカラーモード
• ＜透明化＞　△（要書き出し時の編集）
• ＜使用場面＞　ベクター画像での制作・編集に適している
• ＜その他＞　ほぼ全ての情報を保存できる、イラストレーター編集用

.PDF（ピーディーエフ）

• ＜形式＞　書類
• ＜ファイルの容量＞　大
• ＜カラーモード＞　ほぼ全てのカラーモード
• ＜使用場面＞　印刷物の入稿データとして広く一般的
• ＜その他＞　どんなプラットフォームでも製作時のレイアウトを保つことができる

.EPS（イーピーエス）

• ＜形式＞　ベクトル/ビットマップ
• ＜ファイルの容量＞　小
• ＜カラーモード＞　CMYK
• ＜透明化＞　×
• ＜使用場面＞　文字・イラスト、印刷物の入稿データとして扱いやすい
• ＜その他＞　レイヤーパネルは保存不可、クリッピングパスは保存可

.TIF/.TIFF（ティフ）

• ＜形式＞　ビットマップ
• ＜ファイルの容量＞　小
• ＜カラーモード＞　ほぼ全てのカラーモード
• ＜透明化＞　⚪︎
• ＜使用場面＞　高解像度の画像・大きな写真、印刷物の入稿データ
• ＜その他＞　画質がほとんど劣化しない、クリッピングパスは非対応の場合も

.PSD（ピーエスディー）

• ＜形式＞　ビットマップ
• ＜ファイルの容量＞　大
• ＜カラーモード＞　ほぼ全てのカラーモード
• ＜透明化＞　○
• ＜使用場面＞　写真・画像データなど色数が多く繊細な表現が必要なもの
• ＜その他＞　ほぼ全ての情報を保存できる、フォトショップ編集用

以上が、DTPの現場で多く使用されているファイル形式です。
入稿時の条件に照らし合わせて選択していく、という場面が多くなると思います。

まとめ

以上、やや簡潔にまとめてみましたがいかがでしたでしょうか？
これらの特徴をよく比較しながらベストなファイル形式を選択できるといいですね。