「JPGやPNGって何？」【ファイル形式の種類】イラストを描くなら知っておこう！
Sai.です。
今はPCや色んな端末で気軽にイラストを描いたり加工できるようになりましたね。
でも画像データを保存する時、こんな疑問を持ったことはありませんか？
Sai.
さらに、画像データがぼやけてしまい、困ったり…。
Sai.
何で！？どうすればいいの〜？（泣）
う〜ん
まずは基本からおさらいだね。
まずは基本からおさらいだね。
ねこさん
この記事で分かること【イラストデータを扱うための】
- 画像データの基礎知識。
- ファイル形式の種類、そして特徴。
画像のファイル形式と拡張子
イラストや写真などの画像をデジタルデータとしてファイル化したもの。
ファイル名の後に「.jpg」「.psd」という文字がついていますよね。これは拡張子と言って、ファイル形式を識別する文字列のことです。
プチ知識
同じJPG（ジェイペグ）形式のなかでも「.jpg」や「.jpeg」のように異なる拡張子を使っている場合があります。
これはMS-DOSという1980年代に普及していたOSの仕様が関係しており、ファイルの拡張子は3文字までという制約があったからです。
現在普及しているOSでは4文字も利用できるため「.xlsx」「.html」のように4文字の拡張子もあり、それが混在しています。
表記以外の違いはありません。
Sai.
なるほどね！
じゃあ、それぞれのファイル形式の特徴を教えて！
自分で描いたイラストを保存するのはどれがいいの？
じゃあ、それぞれのファイル形式の特徴を教えて！
自分で描いたイラストを保存するのはどれがいいの？
あまり焦らないで。
次は画像の種類について説明するね。
これが分からないと、画像が荒れたりする原因が分からないよ。
次は画像の種類について説明するね。
これが分からないと、画像が荒れたりする原因が分からないよ。
ねこさん
ラスター画像とベクター画像
ラスター画像（ビットマップ画像）
ラスター（ビットマップ）画像は、ピクセルまたはドット各点のあつまりで作成されています。拡大、縮小するとエッジのピクセルが見え、滑らかに見えなくなります。
写真や絵画的なイラストなど、複雑な表現に適しています。
ベクター画像（ベクトル画像）
ベクトル画像は、点と曲線を定義して作成されています。拡大・縮小されても、サイズに関係なくエッジが鮮明でシャープに保たれます。
ロゴ、アイコン、地図、図形、などの表現に適しています。
Sai.
じゃぁ、画像の例で説明するね。
ねこさん
ラスターとベクターの比較
まず、それぞれの画像を100%の大きさで表示します。
ラスター画像（100％）
ベクター画像（100％）
こちらは違いがほぼ分かりません。
次に、それぞれの画像を拡大して並べてみましょう。
ラスター画像（拡大）
ベクター画像（拡大）
ベクターは変化がないのに対し、ラスターはギザギザしてぼやけて見えますよね。
ちなみに、ラスター画像を扱うソフトウェアの代表としてAdobe Photoshop、ベクター画像の代表としてAdobe Illustratorがあります。
Sai.
それは両方ともラスター画像だよ。
だから拡大しすぎると汚くなるんだ。
だから拡大しすぎると汚くなるんだ。
ねこさん
プチ知識
【ラスター画像と画像解像度】
前述のとおり、ラスター画像はピクセル、またはドットの各点でできており、この密度を表す単位が画像解像度です。
デジタル画像の場合は、1 インチあたりのピクセル数（ppi）で表し、プリントする場合は、1 インチにプリントされるドット数（dpi）で表します。
解像度が高いほど、ファイルサイズが大きくなります。
解像度の目安はこちら。
- WEB → 72ppi(dpi)
- 印刷物 → 350~400dpi(dpi)
画像ファイル形式の種類
JPG形式
| 正式名称 | joint Photographic Experts Group |
| 読み方 | ジェイペグ |
| 画像の種類 | ラスター画像 |
| Web上の表示 | 可 |
フルカラー（約1,677万色）で、画像を圧縮して保存するため、データが軽く、写真や色数の多いイラストに向いています。
データを間引いて圧縮するため、編集を繰り返したり、JPGで上書きを繰り返すと、ぼやけたり色あせるので注意が必要です。
インターネットを介して素早く送ることなどが重視される場合に最適です。
PNG形式
| 正式名称 | Portable Network Graphics |
| 読み方 | ピング、ピン |
| 画像の種類 | ラスター画像 |
| Web上の表示 | 可 |
フルカラー（約1,677万色）対応で、データを復元したときに、完全に元に戻すことができる圧縮方法を用いています。
そのため、編集を繰り返す画像はJPGよりもPNGが適していますが、データ容量は少し重くなります。
また、透過処理ができるため、背景を透明にすることが可能です。
以上の特徴から、イラストやロゴに適した保存形式です。
GIF形式
| 正式名称 | Graphics Interchange Format |
| 読み方 | ギフ、ジフ |
| 画像の種類 | ラスター画像 |
| Web上の表示 | 可 |
最大256色の限られた色数で構成され、透過処理が可能。
動きをつけたアニメーション画像などを表現することもできます。
容量が小さく、Webページでの表示スピードが早いのが特徴です。
ロゴやアイコン、イラストなど2次元の画像に適しており、写真や色数の多いイラストには向きません。
PSD形式
| 正式名称 | Photoshop Document |
| 読み方 | ピーエスディ |
| 画像の種類 | ラスター画像 |
| Web上の表示 | 不可 |
Adobe Photoshopの標準フォーマットです。
レイヤーなどの画像編集に関わる情報を同時に保存でき、編集を繰り返しても画像が劣化することがないため、写真の補正やイラストなどの用途に使われます。
基本的にAdobe Photoshopのソフトウェアで作成と編集が可能です。Photoshop以外で閲覧が可能なフリーソフトもありますが、機能面で劣ることもあるので注意が必要です。
AI形式
| 正式名称 | Adobe Illustrator |
| 読み方 | エーアイ |
| 画像の種類 | ベクター画像 |
| Web上の表示 | 不可 |
Adobe Illustratorの標準フォーマットです。
ベクター形式であることから拡大・縮小の画像変化に強く、ロゴ、イラスト、名刺、ポスターパンフレットなどに使われます。
デメリットとしては、Illustrator以外のソフトでは基本的に開くことができません。（PDFと互換性を持たせることはできます）
また、ソフトのバージョンやパソコンの環境によって、正しく表示されない場合があるので注意が必要です。
EPS形式
| 正式名称 | Encapusulated PostScript |
| 読み方 | イーピーエス |
| 画像の種類 | ベクター画像 |
| Web上の表示 | 不可 |
Adobe Illustratorでしか開けないAI形式と違い、あらゆるグラフィック系のソフトウェアで開くことができます。
PostScript（テキスト形式）で記述されているため、安定性が高いですが、再編集には不向きです。
TIFF形式
| 正式名称 | Tagged Image File Format |
| 読み方 | ティフ |
| 画像の種類 | ラスター画像 |
| Web上の表示 | 不可 |
圧縮を使わず、フルカラーでデータの汎用性があるため、高品質の画像を保存するのに適したフォーマットです。
印刷業界で使われることが多く、写真や大きな画像の用途で使われる保存形式です。
SVG形式
| 正式名称 | Scalable Vector Graphics |
| 読み方 | エスブイジー |
| 画像の種類 | ベクター画像 |
| Web上の表示 | 可 |
テキスト形式のため、シンプルな画像であればデータが小さくて済みますが、複雑なオブジェクトはデータが重くなります。
JavaScriptやCSSでアニメーションとして動かすこともできます。
拡大、縮小をしても画像が荒れることがなく、後からサイズや色の編集もしやすいので、Webサイトで使うロゴや簡単なイラストの用途として使われます。
PDF形式
| 正式名称 | Portable Document Format |
| 読み方 | ピーディーエフ |
| 画像の種類 | ベクター画像・ラスター画像 |
| Web上の表示 | 可 |
紙と同じくページの概念を持つフォーマットで、ベクターとラスターの両方を保存することができます。
印刷用としてPDF形式が推奨されることも多いです。
Web上だと、カタログをPDFに変換して掲載する使用例があります。
Web上でイラスト画像を表示したいなら
Web上でイラスト画像を扱うにあたり、特に覚えておきたいのは「JPG」「PNG」「GIF」です。
容量で見ると、PNGが一番重く、次にJPG、GIFが最も軽いです。
Web上では容量が軽いほど表示速度が速くなるので、まずはJPG保存で試してみて、画像が荒れて見える場合はPNG保存が良いでしょう。
「GIF」は、アニメーションを使いたい場合は便利ですが、色数が限られているので、単色で直線的な図形以外は綺麗に表示されない可能性があります。
Sai.
画像によって保存するファイル形式の種類を変えて対応しよう！
ねこさん
