ブログ

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

JPEGとPNGの違いを理解しよう

・JPEGとPNGって何が違うの?
・そもそもJPEGとかPNGって何?
・サイト用の画像はどっちがいいの?

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

 

ぽむ
ぽむ
こんにちは!ぽむ(@kurashigoo_pom)です。

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

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

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

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

 

記事の信頼性
・当ブログ『くらしぐ』運営

・Illustrator,Photoshop経験
・広告制作のインターン

 

JPEG・ PNGとは

JPEG・PNGとは

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

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

 

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

うさちゃん
うさちゃん
「どの形式で画像が保存されているのか」はどうやってわかるの?
ぽむ
ぽむ
「拡張子」を見てみるといいよ!

 

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

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

  • .jpg  (.jpeg)
  • .png
くまくん
くまくん
あ、よく見るね!コレ!

 

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

 

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

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

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

  1. 大きくて見やすい
  2. 画質が良い
  3. 軽い(容量が小さい)
うさちゃん
うさちゃん
キレイな景色の写真を使ったサイトとかは、思わずウットリしちゃうよね!
ぽむ
ぽむ
そうだね。Webにおいては、軽くて読み込みが早いというのも大きな魅力になるよ!

 

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

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

 

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

 

JPEG・PNGの違い

 

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

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

  • JPEG:写真・複雑なイラスト向き
  • PNG:ロゴ・簡単なイラスト向き

 

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

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

ぽむ
ぽむ
両方をうまく使い分けるのが大事ってことだね!

 

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

 


JPEGの特徴(メリット・デメリット)

JPEGの特徴

 

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

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

 

メリット

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

  • 多色で表現できる
  • グラデーションが得意
  • 軽くしやすい

 

多色で表現できる

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

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

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

 

グラデーションが得意

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

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

うさちゃん
うさちゃん
色合いに境界がないものは、JPEGが良いんだね!

 

軽くしやすい

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

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

 

デメリット

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

  • 保存の度に画質が劣化する
  • 小→大にできない
  • 透明色を使えない

 

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

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

くまくん
くまくん
えっ!保存する度に?!

 

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

  • JPEGの画像に対して「名前をつけて保存」や「上書き保存」を押す
  • サイトの読者が、サイトに貼ってあるJPEGの画像を保存する

 

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

ぽむ
ぽむ
編集の際には、保存のタイミングに注意が必要だね!

 

小→大にできない

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

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

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

ぽむ
ぽむ
このタイプを「非可逆圧縮」というよ!

 

透明色を使えない

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

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

JPEGとPNGの透過

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

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

 

PNGの特徴(メリット・デメリット)

PNGの特徴

 

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

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

 

メリット

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

  • 透明色を使える
  • 大⇄小で劣化しない
  • 高画質である

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

 

透明色を使える

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

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

うさちゃん
うさちゃん
だからロゴに向いているんだね!

 

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

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

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

ぽむ
ぽむ
このタイプを「可逆圧縮」というよ!

 

高画質である

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

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

 

デメリット

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

  • 容量が重くなりがち
  • 印刷時に色味が変わる
  • 古いブラウザで非対応(ごく稀)

 

容量が重くなりがち

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

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

 

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

 

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

  1. 2色のロゴ
  2. カラフルなロゴ
  3. 写真

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

 

JPEGとPNGの容量の比較

 

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

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

くまくん
くまくん
ホンマや!
ぽむ
ぽむ
同じ理由でこの記事に使っているアイキャッチも、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種類あります。

  • PNG−24→多色だが重くなりやすい
  • PNG-8→少色で軽く仕上げられる

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

 

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

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

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

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

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

 

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

 

 

ぽむ
ぽむ
最後まで読んでくれてありがとう!

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です