♯15【JPEGとPNGの違いと使い分け】

記事
デザイン・イラスト
みなさんこんにちは!
Aimo Design、Webデザイナーのアイコです。
みなさん、JPEGとPNG、どちらで保存すればいいのか迷う時ないですか?
今日はJPEGとPNGの拡張子の違いと、どういう時にそれぞれの画像ファイルを選べば良いか、ご説明します!

1.JPEG(Joint Photographic Experts Group)

<特徴>
・フルカラーの1,677万色を表現できる拡張子で、微細なグラデーションまで美しく表現可能。一般的な画像や写真の保存に適している。
・ファイルサイズを小さくするためのデータ圧縮が可能。
△何度も保存すると画像が劣化してしまう
△透過ができない
△一度圧縮した画像は元に戻せない

<使用場面>
・カメラで撮影した写真やフルカラーで画像を美しく保存したいとき
・写真や一般的な画像をウェブ上で表示する場合
・ウェブサイトのバナーやスライドショー、プレゼンテーションなどで利用される写真や画像に適している。


2.PNG(Portable Network Graphics)

<特徴>
・色の劣化が少なく、透過(透明化)できる。
・単色のアイコン、イラスト、ロゴなどの画像に適している。
・可逆圧縮を使用しており、何度保存しても画像が劣化しにくい
△フルカラーの画像を保存する際にファイルサイズが重くなる

<使用場面>
・イラストやロゴなど色数が少ないファイルデータ
・背景などを透過するデータ
・高画質で色数が多いファイルデータは「PNG-24」もしくは「PNG-32」を使用

<ちなみに>
PNGは表現可能な色数の違いによって「PNG-8」「PNG-24」「PNG-32」の3つに分けられます。

PNG-8:
GIFと同様に256色を表現し、ファイルのサイズも軽い。色数が少ないイラストやロゴにも適している。
△透過もできるが、画像と背景の境目が粗く見える可能性がある。

PNG-24:
PNG-24は、JPEGと同様に1,677万色のフルカラーを表現することができる。グラデーションがある画像など、色数が多いデータに最適。
しかし色数が多い分、ファイルサイズは重くなる。
△透過情報がない。「透明を表現している」状態で、厳密な「透過」とは違う。

PNG-32:
PNG-32は、PNG-24をより高画質にしたもの。1677万色のフルカラーで、透過も可能。綺麗な状態で保存できる。
△ファイルサイズが大きいためWebには適していない。

→Webはデータの保存容量も限られるため、ファイルサイズは出来るだけ軽い方が好まれます。そのため、Webでは「PNG-8」もしくは「PNG-24」が主流です。

3.拡張子の選び方

基本的に、画像の拡張子は「JPEG」を使うといいですが、使用目的によって拡張子の使い分けが必要になることもあります。
以下の3つの視点で、画像の拡張子の選び方をお伝えします。

・色数が多い画像やイラスト→JPEG
色数はそのままの状態で、圧縮率を変更できる。高画質を保ったままファイルサイズを軽くすることができる。
画像の美しさを残したまま、ファイルのデータを軽くできるため、Webで使用する画像はJPEGで統一するのがおすすめ。

・色数が少ない画像→PNG
色数が少ない画像とは、
ロゴ/アイコン/グラフ/サイトメニュー など。
色の境目までハッキリと表現できるので、粗が少なく美しい仕上がりになる。
サイトで使用されるグラフィックは、色数が少ないものが多いため、サイト制作の際などはPNGで統一するのもおすすめ。

・透過した画像→PNG
透過とは、透明度を調整すること。
「画像・イラストの背景を透明にしたい」「切り抜いた部分だけ透明にしたい」というときはPNGで保存しましょう。
PNG-24は透過情報がないため、PNG-8もしくはPNG-32で保存しましょう。

簡単に言うと、
画像はJPEG、イラストやロゴはPNGと覚えておくといいです!
ですが、その時々によって使い分けをしていきましょう。


いかがでしたか?
少し長くなりましたが、みなさんのお力に少しでもなれると嬉しいです!


<出品サービスのご案内>
・画像制作は5月末まで1,500円のお値段です!
 迷われている方はお早めにどうぞ♪
・ココナラ出品画像の制作もしております。
・HP・LP制作も承っております!

WIX等でのHP・LP制作も承っています。
以下のページからどうぞ!

今までのブログはこちらから↓


最後までお読みいただき、ありがとうございました!
みなさまからのご依頼をお待ちしております!
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す