2020年1月9日スポンサーリンク・JPEGとPNGって何が違うの?・そもそもJPEGとかPNGって何?・サイト用の画像はどっちがいいの?こんな疑問にお答えします。ぽむこんにちは!ぽむ(@kurashigoo_pom)です。今回の記事では、JPEG・PNGの特徴や違いについてバッチリ解説していきます。画像を保存する際に「どっちを選べば良いの?」と迷った経験はありませんか?サイトやブログで使う画像に関しては、ユーザビリティにも関わる事項であるためぜひ覚えていただきたい知識です。最後まで読んで、参考にしてみてくださいね。「画像の保存形式」を表すものです。画像の保存形式には、多くの種類がありますが、それぞれ画像の圧縮方法や色の数といった特性の違いによって分けられています。JPEGとPNGはWebで使う画像の保存形式として最も代表的なものです。うさちゃん「どの形式で画像が保存されているのか」はどうやってわかるの?ぽむ「拡張子」を見てみるといいよ!拡張子とは、ファイル名の後ろの「.(ドット)+英数字」で表される画像の形式を表す記号のことです。JPEGとPNGの拡張子はこのように表記されます。(.jpeg).pngくまくんあ、よく見るね!コレ!画像を編集したりイラストを描いたりして保存する際には、これらの形式を自分で選択することができます。先ほど、JPEGとPNGは”Webの画像の形式の代表例”と述べましたが、Webで求められる「理想的な画像」とは、いったいどのようなものでしょうか?ズバリこの3点に集約できます。大きくて見やすい画質が良い軽い(容量が小さい)うさちゃんキレイな景色の写真を使ったサイトとかは、思わずウットリしちゃうよね!ぽむそうだね。Webにおいては、軽くて読み込みが早いというのも大きな魅力になるよ!とはいえ、この3点を完璧に満たす画像を使うというのはなかなか難しい話です。それゆえ適切な形式で保存することによって、できるだけ「大きい・高画質の・軽い画像」にすることが重要になってきます。このことを踏まえて、JPEG・PNGの各々の特徴や違いをみていきましょう。JPEG・PNGの違いまずは、JPEGとPNGの違いについて大事な点をおさえましょう。JPEGとPNGには、それぞれ得意・不得意とする画像のジャンルがあります。JPEG:写真・複雑なイラスト向きPNG:ロゴ・簡単なイラスト向きしばしば、「サイトに貼るならJPEGの方が良い!」といった極端な意見を目にしますが、JPEGとPNGは、そもそも得意な画像の分野が異なるということを覚えておきましょう。ぽむ両方をうまく使い分けるのが大事ってことだね!具体的にどんなものなのかを、メリット・デメリットとともに詳しく説明していきます。Group”の略で、「ジェーペグ」・「ジェイペグ」と読みます。写真や複雑なイラストを扱うのが得意な保存形式です。メリットまずはメリットからお伝えします。軽くしやすい多色で表現できるJPEGは、フルカラーの1670万色を扱うことができます。PNGも最大の色数は同様ですが「グラデーションが得意」といった特性も加わって、より色味豊かな表現が可能になります。色数の多い写真や複雑なイラストに適しているのも納得ですね。グラデーションが得意グラデーションや、光と影のニュアンスを綺麗に表現できるのが特徴です。(一方のPNGの場合は、複雑な表現が苦手なため、グラデーション部分がボーダーのように写ってしまうことがあります。)うさちゃん色合いに境界がないものは、JPEGが良いんだね!軽くしやすい容量を軽くしやすいのも大きなメリットです。人間には判別できない細かな色の違いをカットし、ファイルのサイズをかなり小さく圧縮することができます。デメリット一方、デメリットはこのようなものが挙げられます。保存の度に画質が劣化する小→大にできない透明色を使えない保存の度に画質が劣化するJPEG形式の画像は、保存される度に画質が劣化するという性質を持っています。くまくんえっ!保存する度に?!例えば、こんな場合でも画像は劣化してしまいます。JPEGの画像に対して「名前をつけて保存」や「上書き保存」を押すサイトの読者が、サイトに貼ってあるJPEGの画像を保存するこのように、データが更新されるたびに滲んだように荒い画像になってしまうことが、デメリットと言えます。元の大きいファイルに戻すことはできません。画像を圧縮する際には、元の画像のデータも残しておくことをオススメします。ぽむこのタイプを「非可逆圧縮」というよ!透明色を使えない透明色を扱うことができないということも覚えておきましょう。以下の画像をご覧ください。仮にツールやソフトで透明を指定しても、その部分は真っ白で塗られた状態で保存されてしまいます。保存する時には、きちんとチェックをしましょう。Graphics”の略です。「ピーエヌジー」・「ピング」と読みます。こちらは、ロゴや簡単なイラストを扱うのが得意な保存形式です。メリットPNGのメリットはこのようなものが挙げられます。透明色を使える大⇄小で劣化しない高画質である順番にご説明していきます。透明色を使えるPNGでは、透明色を表現できます。透明色というのは、先ほどの画像のように背景を透過したい場合や、透かしの表現をしたい時に使われる色のことです。圧縮したファイルから(低画質)元のファイル(高画質)への書き換えも可能です。何度も画像を利用しやすいというメリットがあります。ぽむこのタイプを「可逆圧縮」というよ!高画質であるPNG形式は、くっきりとした印象の高画質な画像に仕上がります。線で輪郭が描かれたものやベタ塗りで色の境界がはっきりしているものを、鮮明に表現できるのが特徴です。デメリット続いては、デメリットです。容量が重くなりがち印刷時に色味が変わる古いブラウザで非対応(ごく稀)容量が重くなりがちPNG形式は高画質である分、容量が重くなりがちです。重い画像は、サイトの読み込みが遅くなる原因にもなりますので注意が必要です。いえ、JPEGに比べてPNGの方が軽くなる場合もあるので注意!参考のために比較画像を作成しました。2色のロゴカラフルなロゴ写真を全て「縦150×横150」の大きさの画像をJPEG・PNGで書き出した結果です。一方で色の少ないイラストは、PNGで書き出した方が軽い画像になるということがお分かりいただけると思います。くまくんホンマや!ぽむ同じ理由でこの記事に使っているアイキャッチも、PNGで書き出しているよ!基本的には、「PNGは重く、JPEGが軽い」という認識でOKなのですが、そのまま鵜呑みにしてしまうのは危険です。この辺りの特性をうまく使い分けることが、画像の最適化のポイントになります。印刷したときの色味が少し変化してしまうことも挙げられます。これは、印刷物がCMYK(シアン・マゼンタ・イエロー・ブラック)と呼ばれる4色の配合で表現されるのに対し、PNG形式の画像は、RGB(レッド・グリーン・ブルー)と呼ばれる3色の配合によって表現されるためです。うさちゃん印刷してみたら、色が違う!ってなったのはこのせいだったのか!ぽむそうそう。印刷の予定がなければ、ここは特に気にすることないよ。古いブラウザで非対応(ごく稀)PNG形式は、古いブラウザでは対応していない可能性もあります。「そういうこともあるのね」程度で知っておいていただければOKです。JPEG・PNGの比較一覧表ここまで解説してきたことを一覧表にまとめました。読んでくださった方は、スッと頭に入ると思います。先ほどは説明を省きましたが、PNGには2種類あります。PNG−24→多色だが重くなりやすいPNG-8→少色で軽く仕上げられると覚えておき仕上がりを見て差がなければ、後者を選ぶというのが無難です。JPEG・PNGの違いを理解して画像を保存しよう今回の記事では、JPEG・PNGの特徴や違いを解説してきました。繰り返しになりますが、どちらが良い・悪いではなく画像によって使い分けるのがポイントです。これらを理解し適切な形式で保存した画像をWeb上で使用すれば、より利用しやすいサイト・ブログ作りも可能になります。次回、画像を保存する際には参考にしてみてくださいね。※Webの画像の最適化に関しては、【alt属性】に関する知識も必須です。よろしければ合わせてご利用ください。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。『くらしぐ』管理人ぽむ『くらしぐ』では、あなたのくらしがGOODになる情報をお届けします。