クリエイター入門

「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. 制作ツール

    「Form2」卓上サイズのハイクオリティ3Dプリンターのご紹介!

    自宅で本格的な3Dプリントをしたい、そんな方へ卓上サイズのハイクオリ…

  2. premiere講座の画像

    クリエイター入門

    【目指せYouTuber】Adobe Premiere Pro CCでYouTube用動画を編集をし…

    こんにちは、CREMAGAライターの渡部学です!! Premiere…

  3. 制作ツール

    角丸加工が自分でできる!コーナーカッター かどまるPRO!

    名刺やショップカードを角丸にしたいとき、印刷会社に加工をお願いすると…

  4. 制作ツール

    Illustrator(イラストレーター)データを、ひとつのPDFファイルにまとめる方法!

    Illustrator(イラレ)で作成したデータをクライアントにお見…

  5. 制作ツール

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

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

  6. Hotcorner

スポンサーリンク

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. CROWNの画像

    制作ツール

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

    一冊は持っておきたい!紙の種類と厚さがわかる紙見本帳!
  3. 制作ツール

    デザインアプリ「Canva」がすごい!! SNS用画像作成から名刺・フライヤー制…
  4. クリエイター入門

    Udemyで新しい技術を習得しよう!動画学習で効率UP!
  5. トップ画像

    クリエイター入門

    Illustrator(イラストレーター)で共通オブジェクトをまとめて選択する方…
PAGE TOP