画像はJPEG?PNG?どちらがいいの?

こんにちは。内定者の村越です。

サイトを読みやすくするためには、画像をほどよく取り込むことが意外と大切なんです。
ところがいざ画像をいれてみようとすると、JPEG、PNGどちらを入れた方がよいのか分からなくなりますよね。とりあえずJPEGのままにしようであったり、キャプチャを撮ったらPNGだったからそのまま、のようにしていませんか?

実際のところどちらが向いているのかを調査してきました!

基本の“き”。画像はきれい!軽い!大きい!

「きれい」「軽い」「大きい」
この三銃士が揃えば、サイトの魅力が上がります!しかし、その分ファイルのサイズが大きくなり、「重い」状態になって、サイトの読み込み速度が遅くなり、お客様の離脱へと繋がってしまうのです。

重いと言われる時は、ほとんどが以下のパターンです。

  • 画像のサイズ(縦横サイズ)が大きいほど、重くなる
  • 画像内で使われている色数が多いほど、重くなる

サイトを運営する際には、以上のことに注意しつつ、「きれい」「大きい」「軽い」にできるだけ近づけるようにするということを意識して、ここから下を読み進めてください。

静止画は基本、JPEGとPNG

ファイル名の最後の“拡張子”がどちらになっているかを確認してくださいね。

  • PNG(ピーエヌジー)、拡張子は「.png」
  • JPEG(ジェーペグ)、拡張子は「.jpg」や「.jpeg」

こちらのフォーマットは性質が違うため、各々に合った画像タイプがあります。

撮影した写真/漫画やアニメ~サイト内写真

それではいよいよタイプ別に見ていきましょう。

JPEG

およそ1670万色(フルカラー)まで再現が可能となっています。つまり、多様な色が連続して変化をするような自然のものを再現するのが得意なのです。人物や景色を撮影した写真やグラデーションがきれいな写真は、JPEGがオススメです。

画像サイズも基本的には、PNGよりも小さく、軽いことが特徴です。

PNG

漫画やアニメのような色数の少ないものから、写真まで幅広く対応してくれます。

しかし、WEBで利用するPNGは8ビットになります。8ビットPNGは、WEB内で使える色数が最大256色となっているため、JPEGのような様々な色が複雑に混ざり合っている画像は向いていません。JPEGと反対に、色が連続的に変化している部分が少なく、直線や塗りつぶしで構成されている部分が多いものに合います。例えばコンピュータの画面は線と塗りつぶしで作られていることが多いですよね。このような画像を利用したい場合は、できるだけ少ない色数で(保存する情報を少なくして)かつ連続部分をうまく圧縮できるPNGが強いのです。

WEBサイト内の人物画像をキャプチャするときはどっちがいいの?

WEBサイトを見ていた時に、人物の画像が掲載されているからJPEGかな?でもキャプチャをしたいからPNGかな?と迷うときがあるかもしれません。

そんな時は!
・写真が中心→JPEGで保存

・写真が多少つぶれて見えても特に問題ない→PNGで保存

このように判断すると良いでしょう。
最終的には両方のフォーマットで保存してみて、見栄えとファイルサイズを見比べて決めるでも良いでしょう。

JPEGの2つの弱点

ここまでを読んでいただいて、飲食店やエステサロン、製品を紹介することをお仕事とされている場合はJPEGの方が向いているかな?と思われている方も多いのではないでしょうか。しかしここで2点JPEGの弱点をお伝えします。

1.赤色の再現は不得意

景色やグラデーションをきれいに映せるとお伝えしましたが、赤色は上手く再現できないのです。JPEGで保存をした場合、きれいだった赤色がくすんで朱色のような色になってしまうのです。そのため、赤を主役にしたいなど強調したい場合は、PNGを選ぶとイメージ通りの画像になりますよ。

2.不可逆性

気に入った画像などは度々保存を繰り返すこともあるのではないでしょうか。実は、JPEGは人間の目では恐らく違いが分からないくらいですが、繰り返すたびにオリジナル画像よりも品質が悪くなっていくのです。例えば、細部がつぶれていたり、もやもやとしたノイズが乗ったり、四角形のパターンが見えるようなノイズが乗ったりと、元の画像と比べて品質が落ちています。
つまり一回JPEGで保存すると、二度と元とまったく同じ画像には戻せません。
そのため、細かな点まで再現したい場合や、元の画像の品質を100%保った状態で保存しておきたい場合は、写真であってもPNGで保存しておくと良いでしょう。

まとめ

いかがでしたか?今までは何の気なしに選択をしていたJPEGやPNG。実は得意分野があり、それも結構大きな違いがあったんですね。
今回ご紹介したように、
色の数が多くなる、いわゆる実写真にはJPEG
イラストなどあまり色の数が多くないものにはPNG がそれぞれ大きな得意分野になります。しかし、WEBサイトを運営するうえで、お客様に商品やサービスの良さが伝わり、サイトの使い心地も良いに越したことはありません。
実際にサイトを運用しながら、サイトに合った画像、ファイルサイズに変更をしてみてください。

▼参考資料▼
ウェブ画像はPNG? JPEG? 新人Web担当者に伝えておきたい使い分けの基本
聞くは一時、聞かぬは一生

参考になったらシェアをお願いします!