クリエイター入門

「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. スキルアップ

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

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

  2. クリエイター入門

    WindowsとMac。パソコンの違いは?どっちを選べばいい?

    WindowsとMacどちらを選んだらいいかという問題は、よく話題に…

  3. クリエイター入門

    RGBとCMKYの違いとは?

    IllustratorとPhotoshopで何かを作成する時に、必ず…

  4. クリエイター入門

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

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

  5. クリエイター入門

    一冊は持っておきたい!紙の種類と厚さがわかる紙見本帳!

    印刷屋さんに印刷をお願いする際に、紙の種類や暑さで悩む方も多いと思い…

  6. クリエイター入門

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

    ステッカーを制作する際、四角や丸で切り抜くのも良いですが、キャラクタ…

スポンサーリンク

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. gradationmesh

    制作ツール

    Illustrator(イラストレーター)のグラデーションメッシュで自由なグラデ…
  2. Ambiance Paper

    制作ツール

    通販用の商品撮影に最適!小物撮影用の背景紙Ambiance Paperで快適な撮…
  3. sq

    イベント出展・展示

    Squareでクレジットカード決済をしよう!!売り上げUPも期待できる!!
  4. イベント出展・展示

    イベントに来るバイヤーさんはココを見ている!
  5. 制作ツール

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