JPG・PNGの種類と特徴【この記事で知識0から博士へ】

  • JPGとPNGの違いって?
  • 実際にどう使い分けたらいいの?
  • 納品する時はどっちのデータで納品すればいいの?

と疑問を感じたことある方いますよね。

この記事を読めば、ファイル形式なんてちゃんと見れればなんでもいいじゃろ。
というくらいの知識の人が、一般の人から「博士」とよばれるくらい詳しくなれます。

てちこ

さぁ、レッツ博士!!!

目次

拡張子とは

へへ・・・
私くらいのパソコン苦手マンからしたら、「拡張子」という単語の時点で軽くえづきますよ。

はい。では、
拡張子」から確認します。

拡張子とは、「ファイルの種類を区別するためのもの」

ファイル名の最後にくっついている【.〇〇〇】です。

拡張子によって、開くアプリケーションが違います。

  • 【.html】はwebページ
  • 【.docx】はword
  • 【.mp3】は関連付けられた音楽再生アプリ

などですね。jpgやpngも拡張子です。

jpg(ジェイペグ)

jpgはデジカメのデータの保存などで一般的に使用される、ファイル形式です。
フルカラー(1670万色)に対応していて、写真などのグラデーションが多い画像をキレイに表現できます。
またCMYK、RGBどちらの色の情報も持つことが出来ます。
(CMYKは印刷用、RGBはディスプレイで表示させる用の色の設定)

人の目で見ても分かんないような、情報は捨てちゃえ!

という潔い性格の子なので、ファイルのサイズが小さくなります。(非可逆圧縮

情報を捨てちゃっているので、元のデータは戻らず【上書き保存】や【別名で保存】するごとに画像は劣化していきます。

てちこ

単に開いたり、コピーするだけでは画像は劣化しないよ!
数回の保存じゃ大した劣化じゃないよ!

上の画像はillustratorの画面ですが、【JPG〇〇】というように画質の圧縮率を調整できるのも特徴です。

jpgの後ろの数字が90を超えるあたりからファイルサイズがグッと大きくなります。
なのでillustratorでも80のところで刻んでるんですねぇ。

80より上だと肉眼での違いはもうありません。
ですので、普段はjpg80で書き出せば問題ないでしょう。
MacのプレビューのJPEG初期設定値は85みたいです。上記の理由からでしょう。

ちなみに私はブログに使うアイキャッチ画像は、少しでも早く表示されるようにjpg50で書き出しています。
そこまで鮮明に見えなくてもいいですしね、速くページが表示されることを優先しています。

Exif(エグジフ)に対応している

jpgはExifに対応しています。

Exifとは色んな撮影情報を保存できるというものです。

なんやよう分からんと思うので実際見てみましょう。

上の画像のとおり、日付、時間、場所、どんなカメラで撮影したか、どんなカメラの設定だったか
などが記録されています。

むかーし台湾に旅行した時の画像データです。

てちこ

はじめて見たときは、こわ!!!って思ったよ!笑

Exif情報がついたままの画像をアップしてしまうと、知られたくない情報が知られてしまうかもしれないので、セキュリティを考慮してjpgを避けてpngを使うという選択もアリかもしれません。

インスタグラム、TwitterなどのSNSは自動でExifデータを削除してくれています。

jpg・jpeg・JPG・JPEG

【.jpg】と【.jpeg】ですが

むかし、拡張子の文字制限があるOSと文字制限がないOSがあったため2種類あるそうです。

2つとも「Joint Photographic Experts Group」という組織の略称です。

続いて大文字と小文字の区別ですが、

てちこ

どちらでも同様に使えますので、気にしなくて大丈夫です。

png(ピング)

pngはjpgと違い、上書き保存しても画像が劣化しません(可逆性圧縮/ロスレス圧縮

【〇〇〇〇×××××〇〇】
という情報を
【〇4×5〇2】
と置き換える「ランレングス圧縮」というものです。

図形だけの方は11文字ですが、数字も使っている方は6文字に減らせていますよね。

また、元通りにできるということもイメージできます^^

補足ですが、ベタ塗りの多い画像の場合、pngの方がjpgより軽くなることがあります。
上記の圧縮の方法を読むとなんとなく分かる気もします。

気がするだけです。笑

jpgもそうですが、pngも1ピクセルごとに色の情報を持たせていますが、
pngは色の情報以外にも透過の情報も持たせることができます。(アルファチャンネル)

α=0を透明
α=最大を不透明

とすることにより、半透明も表現できます。

pngの大きな特徴は

  • データが劣化しない可逆性圧縮
  • 透過できる
  • CMYKの色の情報が持てない(印刷向きじゃない)

そして、pngの中にも3種類あります。

png8

256色しか表現できない代わりに、容量が軽いです。
透過はできるのでアイコンなどにいいですね。

表現できる色が少ないので写真などグラデーションが多い画像には向きません。

png24

jpgと同じく1670万色表現できます。
透過っぽい色を表現しますが、厳密に言えば透過はしていません。

てちこ

そしたら情報も劣化しないし、全部pngでいいじゃん!

と思うかもしれませんが、容量が重いです。

png32

1670万色表現できて、かつ透過も持ちます。

興味ない人は読み飛ばして欲しいのですが

png後ろの数字はbitの情報【2のn乗】を表していて

png8は2の8乗で256色表現できる
png24は2の24乗で約1670万色表現できる

というわけ。

png32はpng24に、8bit分(256段階)の透過の情報を更に持たせたものとなります。

実際のillustratorで画像を書き出す時の画面を見てみると

png8かpngの2択ですね。

フルカラー(1670万色)で透過を持たせる。持たせない。なんてややこしいですから
【png】で統一しているんですね。

またまた大文字小文字論争ですが、jpg同様気にしないで大丈夫です同様に使えます。

まとめ(使い分け)

それぞれの特徴分かっていただけたでしょうか。

一度でもjpgからpngへ変換するとExifの情報は失われ
一度でもpngからjpgへ変換すると透過の情報は失われます

また普段の使い分けとしては

高品質な画像を書き出したい時は【jpg】
↑のうち再編集するものや透過させたいものは【png】
ブログのアイキャッチなど、そこまで高品質じゃなくていいから軽くしたい時は【jpg50~80】
アイコンなど透過させたくて、色の数が少ないものは【png8】

こんな感じでどうでしょう。

これからお客さんに画像データを納品するときには、使用用途をお聞きしてより適切な拡張子で納品します!

私はある程度スッキリしましたが、皆さんはどうですか?笑

ここまで読んでいただきありがとうございました!!

この記事が気に入ったら
フォローしてね!

わたし、Twitterやってるよ!
  • URL Copied!
目次
閉じる