クリエイター入門

「JPEG」「GIF」「PNG」の拡張子の違いとは?画像ファイルの基本を学ぼう!

WEB制作やデザインなどをしていると必ず出てくる「.jpg」「.gif」「.png」など拡張子と呼ばれる言葉です。今回は拡張子について簡単にご説明いたします!

さて、お友達の結婚式に行くと、きっとこのようなお洒落な食べ物に遭遇し「綺麗だけどこれ何なんだろうな〜」と思いながら写真を撮ることになるでしょう。

そしてWEBサイトに掲載することになった時に重要になってくるのが、どの拡張子にするか、ということです。大切なことは、いかに軽く、綺麗な画像にするかということです。

上の写真では違いがわからないので、ひとつづつ拡張子の特徴をご説明いたします。

拡張子① JPEG(.jpgまたは.jpeg)

一番よく聞くのがこのJPEG(ジェーペグ)拡張子でしょう。.jpgと.jpegの拡張子は機能的には同じなので、同じものと思ってください。

jpgは一番一般的な画像ファイルです。スマホで撮影した写真もだいたい.jpgです。

JPEG画像

こちらが「.jpg」画像です。JPEGの特徴は1670万色の表現があり、写真やグラデーションのある画像に向いています。データ容量の大きさは様々です。

拡張子② GIF(.gif)

GIF画像

.gif(ジフ・ギフ)の拡張子は256色で表現されているため、データ容量は軽いのですが、写真やグラデーションの表現には向いていません。色数が少ないロゴマークやキャラクターに向いています。

写真としては基本的に使わないと思っていただいて大丈夫なのですが、GIFアニメーションが作れます。twitterなどで流れてくるアニメーションはGIFアニメーションです。

拡張子③ PNG(.png)

PNG(ピーエヌジー・ピング)には2種類があります。「PNG-8」と「PNG-24」です。

PNG-8

PNG-8は256色で、その分容量は軽いですが、やはり写真やグラデーションには向いておらず、色数が少ないロゴマークやキャラクターに向いています。

PNG-24

PNG-24は、1670万色でJPEGと同じく再現度が高いですが、データ容量は重めです。

ちなみにiPhoneのスクリーンショットはPNGデータです。

GIF・PNGは画像背景の透過ができる!

なんかよくわかんないけど、基本的に「.jpg」がいいんじゃね?と思ったあなた!だいたい正解です!写真やグラデーションのある凝ったグラフィックなどは「.jpg」にしておけばOKです!

ただ、「.jpg」にはできないのが背景の透過です。「.gif」「.png」は背景の透過が可能なのです。

灰色の背景にJPEGのロゴを入れると白い部分ができてしまいますが、GIF、PNG画像であれば画像背景を透明にすることができるので、下地の背景のグレーの上に乗っている状態になります。

つまり何かを透過したい場合は、単色ロゴであれは「GIF」か「PNG-8」、グラデーションロゴや切り抜き画像であれば「PNG-24」と覚えておけば良いでしょう。

IllustratorやPhotoshopでの画像の書き出し方

撮影した写真をPhotoshopで調整した後や、Illustratorで作成したロゴをWEB用に画像に書き出すのは以下の手順になります。

ファイル → 書き出し → Web用に保存

そしてプリセットのところで形式を選びましょう
PNGやGIFで背景を透明にするなら「透明部分」にチェックを入れましょう

拡張子の種類と特徴

さて、今までの情報をまとめて見るとこんな感じになります!

まとめ

さて、画像の拡張子は大きく「JPEG」「GIF」「PNG」があることがわかりましたね!WEB上にアップするときはこのどれかの拡張子でアップすることになるはずです。

まだデザインを始めたばかりで、拡張子がよくわからない方にお伝えしておきますと、IllustratorやPhotoshopの形式である「.ai」や「.psd」ファイルは、基本的にWEB上にはアップできないのでご注意ください!

綺麗なケーキを作ろうとしているのに、ボウルに袋ごと小麦粉を入れるような行為です。割ってない卵を入れるようなことです。

豚汁に生きた豚を入れるような行為です。

しかし、Adobe社のIllustratorやPhotoshopのデータを動画編集ソフトpremiereなど同士では、「.ai」「.psd」などをダイレクトに入れて、まさに袋のままの小麦粉と生きた豚とコラボレーションができるのですが、そろそろ喩えが意味不明になってきたので、これはまた別の機会に記事にしたいと思います!

それでは、拡張子について少しわかってきたと思うので、実際に様々な画像を書き出してみて、クリエイターとしての新しい一歩を踏み出しましょう!

この記事が面白いと思いましたらぜひシェアをよろしくお願いいたします!

関連記事

  1. クリエイター入門

    色相・明度・彩度ってなに?色の三属性を学ぼう!

    デザインやアートなどクリエイター活動をしていると必ず出てくる…

  2. 傾いたオブジェクトを戻す方法

    制作ツール

    Illustrator(イラストレーター)傾いたオブジェクトを正確な水平に戻す方法!!

    アウトライン化した文字・図形などのオブジェクトを傾けてデザインした後…

  3. 制作ツール

    デザインアプリ「Canva」がすごい!! SNS用画像作成から名刺・フライヤー制作まで!

    Illustratorを持っていないけど、ちょっとデザインをしたいな…

  4. 制作ツール

    編集しやすい!アウトラン化せずに正しい袋文字を作る方法!

    Illustrator(イラストレーター)で袋文字を作るのって意外と…

  5. Marbleの画像
  6. クリエイター入門

    「Wix」でポートフォリオサイトを作ろう!プログラミング不要!初心者でも簡単WEB制作!

    こんにちは、渡部学です。今回は、簡単に本格的なWEBサイトを作れる「…

スポンサーリンク

CREMAGAとは

これからクリエイターになる人のためのWEBマガジン CREMAGA(クリマガ)。日々のスキマ時間にサクッと読める記事を掲載します。 人に聞きにくいすごく初歩的なことから、クリエイターのリアルな気持ちまで。

CREMAGAライター

渡部学/クリエイター
2015年 株式会社ワンダーマーク設立 2015~2018年 武蔵野美術大学 インターンシップ演習 特別講師 ​2019年現在「もにまるず」「TRFG」など自身の作品の制作をしながら、グラフィックデザイン・WEBデザイン・講師などのお仕事もさせていただいております。 武蔵野美術大学 視覚伝達デザイン学科 2010年度卒。 https://www.watabemanabu.com/

最近の記事

  1. Illustrator(イラストレーター)傾いたオブジェクト…
  2. Illustrator(イラストレーター)で共通オブジェクト…
  3. 一枚からオリジナルTシャツを制作!!ショップ制作も簡単な「p…
  4. 【目指せYouTuber】Adobe Premiere Pr…
  5. 作品の固定に!!撮影時や展示に便利。透明なミュージアムジェル…

Twitter

スポンサーリンク

  1. クリエイター入門

    ネーミングを考える5つのポイント!考え方と気をつけること!
  2. クリエイター入門

    委託販売のはじめ方!販売までの流れ・専門用語・気をつけること!
  3. CROWNの画像

    制作ツール

    Illustrator(イラストレーター)の「クラウンツール」でハジけたグラフィ…
  4. クリエイター入門

    色相・明度・彩度ってなに?色の三属性を学ぼう!
  5. 反射光の画像

    クリエイター入門

    「反射光」と「陰影の色」を理解してイラストの表現の幅を広げよう!
PAGE TOP