クリエイター入門

「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. Hotcorner
  2. クリエイター入門

    意外と知られていない!?絵の具の「色相・彩度・明度」の数値の確認方法!

    クリエイターの読者さまの中には、絵の具を使って作品を制作されている方…

  3. 制作ツール

    「フリクションいろえんぴつ」が想像以上に消える!

    こんにちは、CREMAGAライターの渡部学です。今回は、「フリクショ…

  4. クリエイター入門

    解像度って何だろう?画像の基本を学ぼう!

    画像を扱っていると「解像度」という言葉が出てきますよね。「dpi」と…

  5. 絵文字の画像

    制作ツール

    Illustrator(イラレ)で絵文字を使う方法!!

    Illustrator(イラストレーター)でiPhoneと同じ絵文字…

  6. 制作ツール

    複数のスクリーンショットを一枚の画像に自動で繋げてくれるアプリ!「Tailor」のご紹介!

    WEBサイトの記事や、インスタグラムのフィードを一枚の画像にしたい時…

スポンサーリンク

CREMAGAとは

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

CREMAGAライター

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

最近の記事

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

スポンサーリンク

  1. イベント出展・展示

    見やすいイベントブースの作り方 3選!ハンドメイド作家必見!
  2. 制作ツール

    複数のスクリーンショットを一枚の画像に自動で繋げてくれるアプリ!「Tailor」…
  3. クリエイター入門

    PANTONE指定ってなに?PANTONEカラーの使い方!
  4. クリエイター入門

    イラレってよく聞くけど、Illustrator(イラストレーター)ってどんなソフ…
  5. 絵文字の画像

    制作ツール

    Illustrator(イラレ)で絵文字を使う方法!!
PAGE TOP