【JPEG・PNG】特徴や違いを解説！最適な形式で画像を保存しよう

こんな疑問にお答えします。

 

今回の記事では、JPEG・PNGの特徴や違いについてバッチリ解説していきます。

画像を保存する際に「どっちを選べば良いの？」と迷った経験はありませんか？

サイトやブログで使う画像に関しては、ユーザビリティにも関わる事項であるためぜひ覚えていただきたい知識です。

最後まで読んで、参考にしてみてくださいね。

 

 

JPEG・ PNGとは

JPEGやPNGといった言葉は、
「画像の保存形式」を表すものです。

画像の保存形式には、多くの種類がありますが、
それぞれ画像の圧縮方法や色の数といった特性の違いによって分けられています。

 

特に、JPEGとPNGはWebで使う画像の保存形式として最も代表的なものです。

 

拡張子とは、ファイル名の後ろの「.（ドット）＋英数字」で表される画像の形式を表す記号のことです。

JPEGとPNGの拡張子はこのように表記されます。

 

画像を編集したりイラストを描いたりして保存する際には、これらの形式を自分で選択することができます。

 

先ほど、JPEGとPNGは”Webの画像の形式の代表例”と述べましたが、

Webで求められる「理想的な画像」とは、いったいどのようなものでしょうか？

ズバリこの3点に集約できます。

 

とはいえ、この3点を完璧に満たす画像を使うというのはなかなか難しい話です。

それゆえ適切な形式で保存することによって、
できるだけ「大きい・高画質の・軽い画像」にすることが重要になってきます。

 

このことを踏まえて、JPEG・PNGの各々の特徴や違いをみていきましょう。

 

JPEG・PNGの違い

 

まずは、JPEGとPNGの違いについて大事な点をおさえましょう。

JPEGとPNGには、それぞれ得意・不得意とする画像のジャンルがあります。

 

しばしば、「サイトに貼るならJPEGの方が良い！」といった極端な意見を目にしますが、

JPEGとPNGは、そもそも得意な画像の分野が異なるということを覚えておきましょう。

 

具体的にどんなものなのかを、メリット・デメリットとともに詳しく説明していきます。

 

JPEGの特徴（メリット・デメリット）

 

JPEGは、”Joint Photographic Experts Group”の略で、「ジェーペグ」・「ジェイペグ」と読みます。

写真や複雑なイラストを扱うのが得意な保存形式です。

 

メリット

まずはメリットからお伝えします。

 

多色で表現できる

JPEGは、フルカラーの1670万色を扱うことができます。

PNGも最大の色数は同様ですが「グラデーションが得意」といった特性も加わって、より色味豊かな表現が可能になります。

色数の多い写真や複雑なイラストに適しているのも納得ですね。

 

グラデーションが得意

グラデーションや、光と影のニュアンスを綺麗に表現できるのが特徴です。

（一方のPNGの場合は、複雑な表現が苦手なため、グラデーション部分がボーダーのように写ってしまうことがあります。）

 

軽くしやすい

容量を軽くしやすいのも大きなメリットです。

人間には判別できない細かな色の違いをカットし、ファイルのサイズをかなり小さく圧縮することができます。

 

デメリット

一方、デメリットはこのようなものが挙げられます。

 

保存の度に画質が劣化する

JPEG形式の画像は、保存される度に画質が劣化するという性質を持っています。

 

例えば、こんな場合でも画像は劣化してしまいます。

 

このように、データが更新されるたびに滲んだように荒い画像になってしまうことが、デメリットと言えます。

 

小→大にできない

JPEGは、大きいファイル（高画質）を小さいファイル（低画質）として圧縮することはできますが、

一度小さく圧縮したファイルを、
再び元の大きいファイルに戻すことはできません。

画像を圧縮する際には、元の画像のデータも残しておくことをオススメします。

 

透明色を使えない

透明色を扱うことができないということも覚えておきましょう。

以下の画像をご覧ください。

仮にツールやソフトで透明を指定しても、
その部分は真っ白で塗られた状態で保存されてしまいます。

保存する時には、きちんとチェックをしましょう。

 

PNGの特徴（メリット・デメリット）

 

一方のPNGは、”Portable Network Graphics”の略です。「ピーエヌジー」・「ピング」と読みます。

こちらは、ロゴや簡単なイラストを扱うのが得意な保存形式です。

 

メリット

PNGのメリットはこのようなものが挙げられます。

順番にご説明していきます。

 

透明色を使える

PNGでは、透明色を表現できます。

透明色というのは、先ほどの画像のように背景を透過したい場合や、透かしの表現をしたい時に使われる色のことです。

 

大⇄小ファイルで劣化しない

JPEGの画像と違って、
圧縮したファイルから（低画質）元のファイル（高画質）への書き換えも可能です。

何度も画像を利用しやすいというメリットがあります。

 

高画質である

PNG形式は、くっきりとした印象の高画質な画像に仕上がります。

線で輪郭が描かれたものやベタ塗りで色の境界がはっきりしているものを、鮮明に表現できるのが特徴です。

 

デメリット

続いては、デメリットです。

 

容量が重くなりがち

PNG形式は高画質である分、容量が重くなりがちです。

重い画像は、サイトの読み込みが遅くなる原因にもなりますので注意が必要です。

 

とはいえ、JPEGに比べてPNGの方が軽くなる場合もあるので注意！

 

参考のために比較画像を作成しました。

を全て「縦150×横150」の大きさの画像をJPEG・PNGで書き出した結果です。

 

 

容量の面においては、色が多いイラストや写真はやはりJPEGの圧勝ですが、

一方で色の少ないイラストは、PNGで書き出した方が軽い画像になるということがお分かりいただけると思います。

 

基本的には、「PNGは重く、JPEGが軽い」という認識でOKなのですが、そのまま鵜呑みにしてしまうのは危険です。

この辺りの特性をうまく使い分けることが、画像の最適化のポイントになります。

 

印刷時に色味が変わる

PNGのデメリットとしては、
印刷したときの色味が少し変化してしまうことも挙げられます。

これは、印刷物がCMYK（シアン・マゼンタ・イエロー・ブラック）と呼ばれる4色の配合で表現されるのに対し、

PNG形式の画像は、RGB（レッド・グリーン・ブルー）と呼ばれる3色の配合によって表現されるためです。

 

古いブラウザで非対応（ごく稀）

PNG形式は、古いブラウザでは対応していない可能性もあります。

とはいえ、稀なケースですので、
「そういうこともあるのね」程度で知っておいていただければOKです。

 

JPEG・PNGの比較一覧表

 

ここまで解説してきたことを一覧表にまとめました。

しっかり読んでくださった方は、スッと頭に入ると思います。

 

一覧表

	JPEG	PNG
読み方	ジェーペグ・ ジェイペグ	ピーエヌジー・ ピング
拡張子	.jpg/.jpeg	.png
色の数	1670万色	1670万色 ( PNG-24 )  256色 ( PNG-8 )
容量	小さめ(軽い）	多め(重い）
透明色	不可能	可能
圧縮	非可逆圧縮 （劣化あり）	可逆圧縮 (劣化なし)
得意	・多色 ・グラデーション ・写真・複雑なイラスト	・色が少ないもの ・背景透過・透かし ・ロゴ・簡単なイラスト
不得意	輪郭がはっきりした図や絵	連続的な色の変化（グラデーション等）

 

1つだけ補足

先ほどは説明を省きましたが、PNGには2種類あります。

と覚えておき仕上がりを見て差がなければ、後者を選ぶというのが無難です。

 

JPEG・PNGの違いを理解して画像を保存しよう

今回の記事では、JPEG・PNGの特徴や違いを解説してきました。

繰り返しになりますが、どちらが良い・悪いではなく画像によって使い分けるのがポイントです。

これらを理解し適切な形式で保存した画像をWeb上で使用すれば、より利用しやすいサイト・ブログ作りも可能になります。次回、画像を保存する際には参考にしてみてくださいね。

 

※Webの画像の最適化に関しては、【alt属性】に関する知識も必須です。よろしければ合わせてご利用ください。