劣化と容量も「保存形式」で異なる！GIF・JPEG・PNGの使い分け基本編

2015.12.01

拡張子って？

拡張子とは「データがどんな状態で保存されているか」を示すファイル形式です。ファイル名の後ろに付いている「.jpg」「.txt」「.pdf」などの文字を見たことはある方も多いでしょう。特に「.gif」「.jpg」「.png」「.psd」「.ai」はWEBサイトやゲームのお仕事でよく使われる形式です。イラストの用途に合わせて保存をすればデータ容量の無駄が減り、画像の劣化も防ぐことができます。

今回はデジタルイラストで頻出の拡張子の特徴を総ざらい！

gif、jpeg、pngの違い
各形式のメリット&デメリット
その他の拡張：psd、ai

をご紹介します。気になる違いやオススメ形式をまとめてチェックしましょう。

全ての基礎「.gif 」「.jpg 」「.png」を使い分ける

gif・jpg・pngの特徴まとめ

保存形式による特徴は以下の通りです。

gifとjpegとpng8とpng24の比較

※2015/12/01 アンチエイリアスの情報を削除致しました。

新しい技術により、これらに該当しない保存形式がある場合もございます。

各形式の特徴を詳しく見てみましょう。

gifの特徴

読み方は「ジフ」、または「ギフ」と呼ぶ人もいます。
Twitterやお絵かきサイトで話題の動く画像は、この拡張子で保存されたイラストがほとんどです。単純かつ動きのあるイラストに向いており、アイコンやドット絵に適しています。

【gifのメリット】

コマ割りのアニメーションに対応している（複雑なアニメは不向き）
背景が透過できる
単色のベタ塗りが綺麗に表示される
容量が軽い

【gifのデメリット】

色情報は256色までしか持てない

gifのサンプル例

△gif形式で保存されたアニメ

jpg（jpeg）の特徴

読み方は「ジェイペグ（ジェーペグ）」。
色数が多く、色と色との境界線が曖昧なイラスト、グラデーションのあるイラストに向いているため、写真やリアルテイストな絵の保存に適しています。

【jpgのメリット】

複雑な画像をきれいに保存、表示できる
圧縮率を設定できる（必要に応じて容量、クオリティを変えた保存が可能）
色情報を1670万色持てる

【jpgのデメリット】

圧縮しすぎるとノイズがでる
アニメーションができない
背景を透過できない

pngの特徴

読み方は「ピング」「ピーエヌジー」。
pngには「png-8」「png-24」の２種類があり、同じpngでもそれぞれ要素が異なります。透過ができるため、ゲームやWEBサイトの素材で多く使われる保存形式です。

png-8の特徴

png-8はgifに近い性質があり、アイコンやボタンなど単純かつ他の画像に載せるのに適しています。

【png-8のメリット】

背景が透過できる
単色のベタ塗りが綺麗に表示される
容量が軽い

【png-8のデメリット】

色情報は256色までしか持てない
アニメーションができない

png8のsample

△png-8で保存したボタン

png-24の特徴

png-24は複雑かつ背景がないイラストに向いているので、大容量のゲームやスマホアプリなどで高品質な画像を表示したい際に使用するとよいでしょう。

【png-24のメリット】

背景が透過できる
アルファチャンネル（半透明色）が使える
色情報を1670万色持てる
jpeg、その他のpngファイルに比べ最もきれいに保存できる

【png-24のデメリット】

容量が重い
アニメーションができない

png24のサンプル例

△png-24で保存した画像

保存形式による画質の比較

色情報が少ないgifとpng-8は画像がやや荒れてしまいます。

その他の代表的な拡張子「.psd」「.ai」

「psd」と「ai」は画像の制作データを保存することができます。レイヤーを使用した際に、その他の拡張子で保存すると制作データが残らないので注意が必要です。

psdについて

読み方は「ピーエスディー」。
『Adobe Photoshop（フォトショップ、フォトショ）』で利用される画像ファイル形式のひとつです。レイヤーデータを保持できる上、画像が劣化しないので制作中のイラストはこの形式で保存することをおすすめします。「psd」を閲覧、編集することができる対応ソフトは限られており、通常のフォトビューワーでは閲覧することができません。psd形式はPhotoshop以外にも、『CLIP STUDIO PAINT』『メディバンペイント』『SAI』などペイントソフトで閲覧、編集することができます。イラストの仕事ではこの形式で納品することが多いので、Photoshop以外のソフトを使用する際はファイルの互換性に気をつけましょう。

aiについて

読み方は「エーアイ」。
『Adobe Illustrator（イラレ）』で利用される画像ファイル形式のひとつです。こちらもIllustratorで作成したデータを保持することができます。Adobe Illustratorの利用はデザイン業界で広く使われていますが、対応ソフトが少なく通常のフォトビューワーでは閲覧することができません。指定された時以外は「.ai」でのファイルの送信は避けましょう。