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

こんにちは、京獅郎です！

さぁ今回は画像を扱うときに

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

拡張子と聞くと字体からして難しそうと思いますよね。

でも、そんな事は全くないので気軽に見て下さいね！

ちなみに拡張子とは、

kyosiro.png←この.pngの部分の事です。

それでは今日も楽しく

シェアしていきましょう！

Let's share！

拡張子とは？

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

うん、ムズい(笑)

全然ピンとこない。

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

例えば、

・kyosiro.jpg←写真

・kyosiro.txt←テキストファイル(メモ帳など)

・kyosiro.pdf←PDFファイル

・kyosiro.mp3←音楽ファイル

などなど

他にもあるのですが

今回は画像のファイル形式である

PNG・JPG(JPEG)・GIFの3つをシェアしていきます。

詳しく知らなくても

ざっと知ってれば色々と役立つ事と思います！

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

画像を示す拡張子も色々あるのですが

今回のメインは見出しにもあるこの2つの拡張子です。

そうですね、例えば

ココナラさんで出品されている絵師さんで

「納品ファイルはPNGファイルになります」とか

「PNGかJPGのどちらかになります」

など、見たことはありませんか？

このように画像をやりとりする際も

拡張子は必須になります。

今回はPNGとJPG、それとGIFの特徴を見ていくのですが

特徴を見ていく前に

PNGとJPGの大きな違いである透過処理を

図でわかりやすく見ていきましょう！

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

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

どういう事かというと

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

実際にみていきましょう！

---

今回はイラストACさんから

お借りしたこの夏っぽいさわやかな画像を使っていきたいと思います。

この画像はJPGファイルです。

---

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

同じ画像で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などに保存するときに

最適なファイルを選び、保存できます。

ご自身でサイト運営やブログ運用されている方も

最適な画像形式を使うことによって

サイトが最適化され、スムーズに動いたりする場合もあります。

今回で、違いを知ったうえで

ネット上でこれらの拡張子を見かけたときは

「ふむふむ、なるほど」

と呟いてくださいね(笑)

今日はこの辺で！

では！

提供サービス一覧