こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回は、PNGとJPEGの違いについて
わかりやすく紹介しようと思います。
この記事の目次
PNGとJPEGの違い
画像や写真等を編集したのは良いが、
保存形式をPNGにするかJEPGにするか
正直迷っている。
そういった疑問を解決していきます。
JPEGの方が画像容量が軽いから、
JPEGの方がPNGよりいいとかは
もしかしたら聞くかもしれませんね。
ですが、容量が軽いのは事実でも
PNGの方がいい場合だってあるんです。
理解せずにとりあえず、
JPEGで保存しているともしかしたら、
画像が余計に粗くなっている恐れも。
なので、これから適切な画像形式を理解し
使い分けれるようになりましょう。
そもそもPNGやJPEGとは
PNGやJPEGとは、
それぞれ画像を圧縮するファイル形式
(ファイルフォーマット) のことです。
画像データは、元のままの状態だと
膨大なファイルサイズ(容量)になるので、
圧縮することで軽くしないといけません。
「PNG・JPEGの圧縮方式」
-
PNGの圧縮方式
同じパターンを再度保存することはせずに、
同じ色を１つの括りとして処理し、圧縮する。
- 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枚適切な形式を選んで、
アップロードをすることが大切です。
補足「iPhoneの保存形式」
-
スクショを撮る・・PNG
- 写真を撮る・・JPEG
PNG・JPEGの変換やリサイズを
行える便利なツールやソフト
少しだけ便利なものを紹介。
| ツール・ソフト名 | |
| ブラウザ型 | BUNNER KOUBOU |
| I Love IMG | |
| PNG圧縮 | |
| ソフトウェア型 | XnConvert (エックスエヌコンバート) |
他にもネット上に沢山のツールがあるので
探してみるといいかもしれませんね。
まとめ
「PNG・JPEGの特徴要点」
-
PNGはイラスト・テキスト系画像、
透過可能、容量が重いが画質は1番綺麗い。 - JPEGは写真・グラデーション系画像、
容量が軽いが保存する度に劣化していく。
イメージ的にはこのような感じですね。
個人的には、編集中はPNGを使用して、
最終的な出力だけJPGにするのがおすすめ。
(劣化を一回で抑えることができます。)
PNGかJPEGどっちが絶対良いはないので
ある程度それぞれの特徴を覚えていて、
状況に応じて使い分けていきましょう。
忘れた時は、違いの表とかを
見ていただければいいかと思います。