Sai.のイラスト

イラスト特化ブログです。イラストの無料配布、描き方などについて。

「JPGやPNGって何?」【ファイル形式の種類】イラストを描くなら知っておこう!

Sai.です。

 

今はPCや色んな端末で気軽にイラストを描いたり加工できるようになりましたね。

でも画像データを保存する時、こんな疑問を持ったことはありませんか?

Sai.
JPGやPNGって何だっけ?どっちで保存すればいいの?
 

 

さらに、画像データがぼやけてしまい、困ったり…。

Sai.
何で!?どうすればいいの〜?(泣)
 
う〜ん
まずは基本からおさらいだね。
 
ねこさん
この記事で分かること【イラストデータを扱うための】
  • 画像データの基礎知識。
  • ファイル形式の種類、そして特徴。

 

ペンを持つネコ

 

 

画像のファイル形式と拡張子

イラストや写真などの画像をデジタルデータとしてファイル化したもの。

ファイル名の後に「.jpg」「.psd」という文字がついていますよね。これは拡張子と言って、ファイル形式を識別する文字列のことです。

 

プチ知識

同じJPG(ジェイペグ)形式のなかでも「.jpg」や「.jpeg」のように異なる拡張子を使っている場合があります。

これはMS-DOSという1980年代に普及していたOSの仕様が関係しており、ファイルの拡張子は3文字までという制約があったからです。

現在普及しているOSでは4文字も利用できるため「.xlsx」「.html」のように4文字の拡張子もあり、それが混在しています。

表記以外の違いはありません。

 
 
 
Sai.
なるほどね!
じゃあ、それぞれのファイル形式の特徴を教えて!
自分で描いたイラストを保存するのはどれがいいの?
 
あまり焦らないで。
次は画像の種類について説明するね。
これが分からないと、画像が荒れたりする原因が分からないよ。
 
ねこさん

 

ラスター画像とベクター画像 

ラスター画像(ビットマップ画像)

ラスター(ビットマップ)画像は、ピクセルまたはドット各点のあつまりで作成されています。拡大、縮小するとエッジのピクセルが見え、滑らかに見えなくなります。

写真や絵画的なイラストなど、複雑な表現に適しています。

 

ベクター画像(ベクトル画像)

ベクトル画像は、点と曲線を定義して作成されています。拡大・縮小されても、サイズに関係なくエッジが鮮明でシャープに保たれます。

ロゴ、アイコン、地図、図形、などの表現に適しています。

 

Sai.
ふーん…?
ベクターのほうが綺麗なんだ。
でも言葉で言われてもよく分からないなぁ。
  
じゃぁ、画像の例で説明するね。
 
ねこさん

ラスターとベクターの比較

まず、それぞれの画像を100%の大きさで表示します。

ラスター100%のネコイラスト

ラスター画像(100%)

ベクター100%のネコイラスト

ベクター画像(100%)

こちらは違いがほぼ分かりません。 

 

 

次に、それぞれの画像を拡大して並べてみましょう。

ラスター画像拡大

ラスター画像(拡大)

ベクター画像拡大

ベクター画像(拡大)

ベクターは変化がないのに対し、ラスターはギザギザしてぼやけて見えますよね。

 

ちなみに、ラスター画像を扱うソフトウェアの代表としてAdobe Photoshop、ベクター画像の代表としてAdobe Illustratorがあります。

Sai.
そうなんだ!
ちなみに、画像データでよく見るJPGやPNGはどっちなの?
  
それは両方ともラスター画像だよ。
だから拡大しすぎると汚くなるんだ。
 
ねこさん

 

プチ知識

【ラスター画像と画像解像度】

前述のとおり、ラスター画像はピクセル、またはドットの各点でできており、この密度を表す単位が画像解像度です。

デジタル画像の場合は、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.
これから私は、Webにイラスト画像をあげる時、基本はJPG、汚かったらPNGにしようかな。
 
画像によって保存するファイル形式の種類を変えて対応しよう!
 
ねこさん