PNGとJPEGどっちがいいのか?「画像の違いとベストな保存形式」

photography 2188440  340 - PNGとJPEGどっちがいいのか?「画像の違いとベストな保存形式」

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

今回は、PNGとJPEGの違いについて
わかりやすく紹介しようと思います。

スポンサーリンク

PNGとJPEGの違い

画像や写真等を編集したのは良いが、
保存形式をPNGにするかJEPGにするか
正直迷っている。

そういった疑問を解決していきます。

JPEGの方が画像容量が軽いから、
JPEGの方がPNGよりいいとかは
もしかしたら聞くかもしれませんね。

ですが、容量が軽いのは事実でも
PNGの方がいい場合だってあるんです。

理解せずにとりあえず、
JPEGで保存しているともしかしたら、
画像が余計に粗くなっている恐れも。

なので、これから適切な画像形式を理解し
使い分けれるようになりましょう。

スポンサーリンク

そもそもPNGやJPEGとは

PNGやJPEGとは、
それぞれ画像を圧縮するファイル形式
(ファイルフォーマット) のことです。

画像データは、元のままの状態だと
膨大なファイルサイズ(容量)になるので、
圧縮することで軽くしないといけません。

「PNG・JPEGの圧縮方式」

  • PNGの圧縮方式
    同じパターンを再度保存することはせずに、
    同じ色を1つの括りとして処理し、圧縮する。

  • JPEGの圧縮方式
    画質が維持できる程度に不要なデータを削除して
    質を保ちながら画像データを軽量化し、圧縮する。

PNG・JPEGの
メリットとデメリット

「PNG・JPEGのメリットとデメリット」

   PNG  JPEG (JPG)
 メリット  透明色を用いることが可能
 圧縮でデータを失わない。
 輪郭がはっきりしている。
 多色・サイズ大の画像で、
 保存容量を小さくできる。
 デメリット  保存形式の中で容量が
 一番大きくなってしまう。
 保存毎に画像が劣化するため
 繰り返しデータ保存が不可能
 透明色を使えない。

次に「違い・特徴」を詳しく紹介します。

PNG・JPEGの
保存形式の違い・特徴

それぞれの違いはデータを圧縮し、
ファイルを軽くするための仕組み
(圧縮アルゴリズム) が異なる点です。

なので、同じ画像ファイルであっても
中身のデータはだいぶ違ってくるので、
状況によって使い分けが必要。

「保存形式の違いと特徴」

   PNG  JPEG/JPG
 読み方  ピング/ピーエヌジー/ピン  ジェー(イ)ペグ
 正式名  Portable Network
 Graphics
 Joint Photographic
 Experts Group
 拡張子  .png  .jpg/.jpeg
 表現可能色数  約1670万色 ※ 1 
 (24bit/フルカラー)
 約1670万色
 (24bit/フルカラー)
 画像ファイル
 サイズ 
(容量)
 多い (重い)  少なめ (軽い)
 透過処理
 (透明色)
 できる
 (半透明可、PNG-24不可)
 できない
 逆圧縮  可逆圧縮 ※ 2
 (画像劣化なし)
 非可逆圧縮 ※ 3
 (画像劣化あり)
 適してる画像  色数が少ないもの
 (アイコン・イラスト)から
 写真まで幅広く対応
「特にイラスト系」
・多色・細密画像
・グラデーション
 (色調が連続し変化)
・ぼかしが多い画像
「特に写真系」
 適さない画像 ・特になし
 (アニメーション不可)
・アイコン
・平坦なイラスト
・輪郭が鮮明なもの
 使用例  図解イラスト  デジカメで撮影した写真
 EXIF
 (位置情報) 
 埋め込めない  埋め込める

※ 1 最大280兆色(48bit)
PNGは8bitなど規格を変更できる。

※ 2 可逆圧縮「圧縮でデータが失われない。」
つまり、色情報を完全に維持できます。
PNGの際でも元々色数が多い画像をPNG-8に

変更するなどの場合は色情報を失うこともある。

※ 3 非可逆圧縮「圧縮すると元に復元できない。」
しかし、大きいデータをとても小さく圧縮でき
圧縮率を自由に設定することも可能です。

(小さく圧縮する場合は元データのバックアップを)

PNG-8・PNG-24・PNG-32の違い

「PNG-8・PNG-24・PNG-32の違い」

   PNG-8  PNG-24  PNG-32
 表現可能色数  256色 + 透過  約1677万色  約1677万色 + 透過
 (=約280兆色)
 画像ファイル
 サイズ 
(容量)
 PNGの中で
 一番軽い
 PNG-8より
 大きい
 PNG-24より
 大きい
 透過処理
 (透明色)

 できる  できない  できる
 適してる画像  アイコン等の
 単調イラスト
・単調イラスト
・色変化の多い
 写真,グラデーション
・単調イラスト
・色変化の多い
  写真,グラデーション

PNGは表現できる色数の違いによって、
「PNG-8」「PNG-24」「PNG-32」の
3種類に分かれます。

結局どっちを使えばいいのか?

PNG、JPEGどちらのフォーマットも
WebやPCのOS上で広くサポートされ、
用途における制約はそこまでありません。

ただ、画質と容量の面で選べばいいのですが、
そこが画像により変わるので正解はないです。

ですが、主に次のような感じで選択すれば、
あまり失敗はないかと思います。

  • PNG-8
    ∟ 塗りつぶしの多い画像 (イラスト等) で、
     画像の色数が少ない場合

  • PNG-24
    ∟ 塗りつぶしの多い画像 (イラスト等) で、
     画像の色数が多く、透明な部分がない場合
  • PNG-32
    ∟ 塗りつぶしの多い画像 (イラスト等)で、
     画像の色数が多く、透明な部分がある場合
    ∟ 色変化が多い画像 (写真・グラデーション等) で、
     透明な部分がある場合

  • JPEG
    ∟ 色変化が多い画像 (写真・グラデーション等) で、
     透明部分がなく、画質よりデータの軽さ優先の場合
  • PNG-24またはJPEG
    ∟ 色変化が多い画像 (写真・グラデーション等) で、
     透明部分がなく、データの軽さは優先していない場合

PNG・JPEGの容量を
下げる時のポイント

MacやiPhoneのスクショはPNG-24なので
PNG-8 (256色) に容量を軽くするなら、
「TinePNG」「MacアプリImageOptim」

JPEGのイラスト系の画像を軽くするなら
「JPEGGmini」等を使うのがおすすめです。

しかし、どちらの場合も軽くなりますが、
画質はどうしても落ちてしまいます。

なので、注意として安易にブログなどの
画像容量を一括に減らすのは控えましょう。

軽さを優先するならWeb上 (ブログ等) で
1番いいのは1枚1枚適切な形式を選んで、
アップロードをすることが大切です。

2714 - PNGとJPEGどっちがいいのか?「画像の違いとベストな保存形式」  補足「iPhoneの保存形式」

  • スクショを撮る・・PNG

  • 写真を撮る・・JPEG

PNG・JPEGの変換やリサイズを
行える便利なツールやソフト

少しだけ便利なものを紹介。

   ツール・ソフト名
  ブラウザ型  BUNNER KOUBOU
 Image Resizer
 I Love IMG
 PNG圧縮
 ソフトウェア型  XnConvert()
 Multisize Resizer

他にもネット上に沢山のツールがあるので
探してみるといいかもしれませんね。

まとめ

「PNG・JPEGの特徴要点」

  • PNGはイラスト・テキスト系画像、
    透過可能、容量が重いが画質は1番綺麗い。

  • JPEGは写真・グラデーション系画像、
    容量が軽いが保存する度に劣化していく。

イメージ的にはこのような感じですね。

個人的には、編集中はPNGを使用して、
最終的な出力だけJPGにするのがおすすめ。
(劣化を一回で抑えることができます。)

PNGかJPEGどっちが絶対良いはないので
ある程度それぞれの特徴を覚えていて、
状況に応じて使い分けていきましょう。

忘れたときは、違いの表とかを
見ていただければいいかと思います。

スポンサーリンク

シェアする