クリエイター入門

「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. Marbleの画像
  2. スキルアップ

    無料で使える3Dソフト「Fusion360」のご紹介!

    3Dモデリングって興味はあるけど難しそうだな、ソフトも高いんだろうな…

  3. クリエイター入門

    PANTONE指定ってなに?PANTONEカラーの使い方!

    印刷物やグッズ制作の依頼時に「PANTONE指定」という言葉を聞いた…

  4. 光沢の画像

    クリエイター入門

    光沢とマット(つや消し)が生まれる理由!質感の原理を知ろう!

    立体物でもイラストでも、必要になってくる質感の知識。今回は、「光沢」…

  5. 制作ツール

    Evernote(エバーノート)の便利なスキャン機能!LINEスタンプ作成にも!

    スキャナーを使ったスキャンって結構面倒ですよね。特に何枚もある場合や…

  6. クリエイター入門

    クリエイターになるために具体的に行動をしよう

    自分の作品が商品化されることを夢見る人も多いと思います。どこかの会社…

スポンサーリンク

CREMAGAとは

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

CREMAGAライター

渡部学/クリエイター
2015年 株式会社ワンダーマーク設立。​2022年現在「もにまるず」「Ambiance Paper」「TRFG」などオリジナルブランドの運営をしながら、グラフィックデザイン・WEBデザイン・Udemy講師などをしています。武蔵野美術大学 視覚伝達デザイン学科 2010年度卒。
https://www.watabemanabu.com/

最近の記事

  1. 通販用の商品撮影に最適!小物撮影用の背景紙Ambiance …
  2. ラフスケッチ専用ノート「Roughly (ラフリー)」で快適…
  3. Illustrator(イラストレーター)傾いたオブジェクト…
  4. Illustrator(イラストレーター)で共通オブジェクト…
  5. 一枚からオリジナルTシャツを制作!!ショップ制作も簡単な「p…

スポンサーリンク

  1. クリエイター入門

    Illustratorでのステッカーのカットパスの作り方!
  2. UV

    制作ツール

    パテでの穴埋めが一瞬でできる!!光硬化パテの使い方!!
  3. クリエイター入門

    Illustrator(イラストレーター)文字のアウトライン化をする方法!
  4. クリエイター入門

    「トリムマーク(トンボ)」や「塗り足し」ってなに?正しいトリムマークの作り方!
  5. クリエイター入門

    レトロ印刷JAMで、凝った印刷のZINEを作ろう!
PAGE TOP