PNGとJPG? どっちがいいの? 画像の保存形式をわかりやすく解説‼

PNGフィルJPGファイルのアイキャッチ
PNGフィルJPGファイルのアイキャッチ

PNGとJPG? どっちがいいの? 画像の保存形式をわかりやすく解説‼

今回は画像を扱うときに
避けては通れない「拡張子」を簡単にシェアしていきたいと思います。

拡張子と聞くと字体からして難しそうと思いますよね。
でも、そんな事は全くないので気軽に見て下さい!

ちなみに拡張子とは、
画像の名前がkyosiro.jpgだとしたら、.jpgの部分の事です。
※スマホの写真を見たら、名前の最後に「.jpg」
もしくは「.jpeg」がついているはずです。

.jpgやらpngやらいろいろありますが
それらの種類も見ていきたいと思います。

それでは
今回も楽しくシェアしていきましょう!

拡張子とは?

拡張子とは、コンピューターなどのデータファイルの属性や内容を表すための文字列

うーん、全然ピンとこない。

ざっくり「ファイルの種類」と覚えておけば大丈夫です。

例をあげると

・kyosiro.jpg←写真
・kyosiro.txt←テキストファイル(メモ帳など)
・kyosiro.pdf←PDFファイル
・kyosiro.mp3←音楽ファイル

などなど他にもあるのですが
今回は画像系のファイル形式であるPNGJPG(JPEG)GIFの3つをシェアしていきます。

詳しく知らなくてもざっと知ってれば色々と役立つ事と思います!

ワンポイント
山田太郎で例えると
山田太郎.日本人と最後についているようなニュアンスです。
※.日本人の部分が拡張子になります。

PNGとJPG(JPEG)が画像系ファイル二強!

画像を示す拡張子も色々あるのですが
今回のメインは見出しにもあるこの2つの拡張子です。

例えばネットなどでイラストレーターさんにイラストを依頼すると
納品ファイルはPNGファイルでいいですか?」とか
PNGかJPGのどちらがいいですか?」などきかれます。

このように画像をやりとりする際も拡張子は必須になります。

今回はPNGJPG、それとGIFの特徴を見ていくのですが
特徴を見ていく前にPNGとJPGの大きな違いである透過処理を図でわかりやすく見ていきましょう!

透過処理を図で見てみよう!

PNGはJPGにはない透過処理ができます。

どういう事かというと透明色を用いる事ができるという事です。

文字だけだとわかりにくいので
画像でみていきましょう!

画像説明01

今回はフリー素材サイトのイラストACさんから
お借りしたこの夏っぽいさわやかな画像を使っていきたいと思います。
この画像はJPGファイルです。

PNGとJPGの画像を比べます。

画像説明02

同じ画像でJPG画像PNG画像の2つを用意しました。

左の画像がJPG、右がPNGです。

おわかりいただけただろうか?(某ホラーっぽく)

二次きょーしろ

二次きょーしろ

うーん、わかりにくいかな

なるほど。
わかりやすくするために背景を黒にしましょう!


背景を黒にしたのがこちら

画像の重なり説明

おお!これだったらはっきりわかりますね!

左のJPGは背景の白がそのままに対し
右のPNGは背景が透明で後ろの黒が見えます。

泡のような水玉もところどころ、半透明になっていますね!


ではこれにお魚さんの画像を重ねてみましょう!

画像の重なり説明

おお!お魚さんが心なしか気持ち良さそうに見える!(笑)

JPG(左)のほうは、画像の背景に重なってまったく見えないですね。

対して、PNGはいい感じに泡とお魚さんが融合してます!
これが透過処理です。

こういった透過処理も大きな違いのひとつです。

PNGの特徴

特徴

・透過ができる
・色数の多い画像やグラデーションに最適
・少しばかりデータ容量が重くなりがち

読み方は「ピング
表示は「.png

フルカラー1670万色を扱え、透過も可能。
「可逆圧縮」※1の画像形式なので、低画質で保存しても元の画質に戻すことができる。

JPGとGIFのメリットを取り入れた出来る子ですが、
JPGやGIFに比べて若干データ容量が重くなります。

※1 可逆圧縮「圧縮でデータが失われない」

※2 非可逆圧縮 「圧縮すると元に復元できない」

PNGのまとめ

メリット
・透明色を用いることができる。
・圧縮でデータを失わない。
・画質が、JPGやGIFより綺麗。

デメリット
・保存形式の中でサイズ容量が一番大きい。

JPG(JPEG)の特徴

特徴

・色数の多い画像や、グラデーションに最適。
・大きな画像を小さなファイルにできる。
・保存する度に画質が劣化。

読み方は「JPEG←ジェイペグ
表示は「.jpgもしくは.jpeg

フルカラー1670万色まで扱える。
色数の多い写真や、グラデーションのように色が細かく変化する画像の保存に適している。
色の透過はできません。

最大の特徴は、大きな画像を小さなファイルサイズにできる事です。

ただ「非可逆圧縮」※2の画像形式なので、
低解像度で保存すると元の画質に戻すことができない。

保存をする度に画質が劣化するので保存のタイミングには注意が必要。
念のため元のデータを保管してリスクを減らすのがオススメ。

※1 可逆圧縮「圧縮でデータが失われない」

※2 非可逆圧縮 「圧縮すると元に復元できない」

JPG(JPEG)のまとめ

メリット
・多色、サイズ大の画像では保存容量を小さくできる。

デメリット
・保存する度に画質が劣化するため、繰り返しデータ保存が難しい。
・文字やシャープなラインを含む画像はぼやけて粗くなりがち。

GIFの特徴

特徴

・一度低画質で保存しても元の画質に戻せる。
・色数の少ない画像の保存に適している。
・アニメーションが作れる。
・色数の多い画像やグラデーションには不向き。

読み方は「ジフ」表示は「.gif」

最大256色で表現されるため
ロゴやアイコンなどの色数が少ない画像の保存に適している。色の透過も可能

「可逆圧縮」※1の画像形式のため、
一度低画質で保存しても元の画質に戻すことができる。

※1 可逆圧縮「圧縮でデータが失われない」

※2 非可逆圧縮 「圧縮すると元に復元できない」

最大の特徴は、アニメーション画像を作れる!
色数の少ないシンプルなアニメーションを作成する際には重宝します。

二次きょーしろ

二次きょーしろ

あっ!あれか!ネットでよく見る、
画像が繰り返す動くやつ!

GIFのまとめ

メリット
・アニメーション(要するに動きます)
・簡単な透過画像を作れる。

デメリット
・表現の色数が256色で少ない。

とりあえずはPNGとJPGの二つを押さえておこう

いかがだったでしょうか?

ひとまず
PNGはイラスト系に強い
JPGは写真系に強い
これだけでも覚えておけば大丈夫です!

それぞれの特性を知っておけば自分のPCなどに保存するときに最適なファイルを選び、保存できます。

ご自身でサイト運営やブログ運用されている方も最適な画像形式を使うことによってサイトが最適化され、
スムーズに動いたりする場合もあります。

違いを知ったうえでネット上でこれらの拡張子を見かけたときは
「ふむふむ、なるほど」と呟いてくださいね(笑)

関連記事