サイトマップ(全ページ一覧)

JPGとPNG、ブログに画像を貼るならどっちがいい?使い分けが大事だよ

JPGとPNG、ブログに画像を貼るならどっち?使い分けが大事だよ!

「画像を貼るならJPGで」と聞いたからJPGにしたのに、なんだか画像が重い…。

画像に文字を入れてアイキャッチを作ったら、文字がぼやけて読みにくい…。

 

こんな思いをしたこと、ありませんか?私はありますぞ!(笑)

ウェブ上に写真を載せる時には圧縮するという知識はあったけど、JPGとPNGの使い分けはイマイチできていませんでした。

写真はJPGで、背面透過のイラストはPNGで、という程度。

 

よし、この際どっちを使えばいいのか、キッチリ検証してやろうじゃないか!

本記事では、JPGとは?PNGとは?という解説はしません。百聞は一見に如かず。

色んなタイプの画像で比較してみたので、ぜひご参考にしてください^^

― スポンサーリンク ―

写真はJPG

同じ写真をJPG、PNG、圧縮JPG、圧縮PNGの4パターンに変換して比較しました。

サイズはすべて300×200px、スマホで見た時に縮小表示されない大きさ。
変換や圧縮に使用したのは、オンラインサービスのiLoveIMGです。
環境によってサイズは多少変わるので、誤差はご容赦ください。

まずはデータサイズの比較です。

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-花の写真

300×200px

  • 未圧縮JPG:37.9KB
  • 未圧縮PNG:118KB
  • 圧縮済JPG:26.8KB
  • 圧縮済PNG:42.8KB

JPGを圧縮したファイルが最小値になりました。

 

続いて、画像を300倍に拡大したらどう見えるか?の比較です。

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-花の写真

300倍にしたのは、最近スマホがRetinaディスプレイを導入し、従来比2~3倍の高解像度のものが増えているから。

スマホを買い換えたら、バナーなどの画像がぼけて見えるようになった…のは、ザックリ言えばこういうことだと思います、多分。

この件については話が脱線してしまうので、参考記事を貼り付けておきます。↓

Retina対応のWebデザインをするときの注意点
Retina対応のWebデザインをするときの注意点。PhotoshopやIllustratorでWebデザインをつくるときの、Retina対応の方法ちゃんとわかっていますか?Retinaってなに?とりあえず2倍でつくればいいの?なんていうWebデザイナーさんの為にRetina対応の方法についてまとめたので見てください。
いまさら聞けないRetina対応のための「ピクセル」の話
個人的には高解像度ディスプレイへの対応より、表示パフォーマンスのほうが大切だと考えているので、あまり積極的に高解像度ディスプレイへの対応について考えてきませんでした。ところが、最近発売される端末を見ていると、ほとんどの端

 

写真はJPGでもPNGでも、圧縮しても、見た目にはほとんど差が出ません。

であれば、圧縮済JPGをブログに貼り付けるといいでしょう。

画面のスクリーンショットは、ほぼPNG

通常はPNGがベター

ブラウザのトップ画面のような画像を作ってみました。

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ

300×200px

  • 未圧縮JPG:22.7KB
  • 未圧縮PNG:15.1KB
  • 圧縮済JPG:15.1KB
  • 圧縮済PNG:4.84KB

圧縮PNGが一番軽量となりました。

未圧縮PNG=圧縮済JPGという結果にちょっと驚き。

 

パソコンのソフト(アプリ)やウェブサイトは今、シンプルなデザインが多いですよね。

使われている色の数が少なく、背景も単色ベタ塗りとかだと、JPGよりもPNGの方が軽くなります。



写真の面積が広いなら、JPGの方が軽い

では、次の場合はどうでしょうか。

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ

300×200px

  • 未圧縮JPG:12.8KB
  • 未圧縮PNG:29.3KB
  • 圧縮済JPG:6.42KB
  • 圧縮済PNG:9.04KB

圧縮JPGが一番軽量となりました。写真の面積が広くなったためですね、多分。

ここで大事なのは、全体の雰囲気を見せたいのか、文字を読ませたいのか、目的を決めるということ。

 

拡大してみます。

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ

写真部分は、先ほどと同じような感じ、と思ってください。

問題は文字。JPGにすると、白い部分にもゴミが入り、少しボケて読みづらくなります。

文字を読ませたいのであれば、多少データサイズが大きくなっても、PNGを選ぶ方がいいです。

写真を含まないならPNG

ちなみに、写真を含まないスクリーンショットはどうか?

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ

300×200px

  • 未圧縮JPG:9.83KB
  • 未圧縮PNG:11.1KB
  • 圧縮済JPG:5.09KB
  • 圧縮済PNG:3.62KB

なんと圧縮PNGが3.62KB!

 

拡大。

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ

写真を含まないスクリーンショットの場合、JPGで保存すると劣化が激しい上に、データサイズが大きい、という状態になります。

PNGは圧縮前と圧縮後で、ほとんど見た目の変化はないようです。

イラストはケースバイケース

シンプルなアイコン系のイラストはPNGが適していることが分かりました。

イラストの種類別に、さらに細かく検証したいと思います。

パターンを含むイラストはPNG

たとえば、こんなイラスト。

パターンを使ったイラスト

300×200pxの場合

  • 未圧縮JPG:23.1KB
  • 未圧縮PNG:62.4KB
  • 圧縮済JPG:10.8KB
  • 圧縮済PNG:11KB

圧縮JPGが一番軽くなりました。

 

拡大します。

パターンを使ったイラスト-拡大

パターンを含むイラストの場合、JPGで保存すると圧縮後の劣化が激しく、色も全体的にくすんでしまいます。

PNGは圧縮なしだと一番重いですが、圧縮すればほぼ画質を保ったまま、データサイズは圧縮JPGとほぼ変わらないことが分かりました。

テクスチャを貼ったイラストもPNG

イラストにテクスチャを重ねた場合はどうでしょう。

テクスチャを重ねたイラスト

300×200pxの場合

  • 未圧縮JPG:38.1KB
  • 未圧縮PNG:97.1KB
  • 圧縮済JPG:24.6KB
  • 圧縮済PNG:24.5KB

こちらは、圧縮PNGが一番軽く、24.5KBでした。でも、パターンの時と同様、圧縮JPGとほぼ変わりません。

 

拡大します。

テクスチャを重ねたイラスト-3倍

テクスチャを貼ったイラストの場合でも、圧縮PNGが一番良さそうですね。

グラデーション等を含むイラストは、圧縮なしのJPGがいいかも

グラデーションやぼかし、半透明などの効果をいれたイラストを用意しました。

グラデーションや半透明を使用したイラスト

300×200pxの場合

  • 未圧縮JPG:6.7KB
  • 未圧縮PNG:34.6KB
  • 圧縮済JPG:3.52KB
  • 圧縮済PNG:10.5KB

拡大します。

グラデーションや半透明を使用したイラスト

JPGでもPNGでも、圧縮をかけると劣化が激しいことが分かりました。

一番きれいに見えるのは、圧縮なしのPNG。ただし、結構色味が変わります。PNGは蛍光っぽい鮮やかさが出ました。

総合的に考えると、ブログに載せるのであれば圧縮なしのJPGが良いかな、と思います。

アナログイラストをスキャナで読んだ場合はJPGで

ボールペン+色鉛筆のイラストをスキャナで読んでみました。

ボールペンと色鉛筆で描いたうさぎのイラスト

200×300pxの場合

  • 未圧縮JPG:35.1KB
  • 未圧縮PNG:136KB
  • 圧縮済JPG:14.7KB
  • 圧縮済PNG:45.3KB

・・・すいません、こんなのしか無くて(笑)

大昔に描いた絵ですが、完全にオリジナルキャラクターで権利的に問題ないので、この絵をサンプルにm(_ _)m

 

拡大します。

ボールペンと色鉛筆で描いたうさぎのイラスト-3倍

多少、JPGにゴミが入りますが、圧縮してもそれほど気になりませんでした。

これ位の差であれば、JPGを選んだ方がいいと思います。PNGだと、圧縮済みでもデータサイズが大きく、これまで検証してきた中で最大サイズでした。

 

なお、スキャナの性能にもよりますが、最初からJPGで読み込むより、PNGで読んでからJPGに変換した方が色がきれいでした。ご参考までに。

最後に

今回、細かく比較しましたが、データサイズって結構あいまいな部分があります。

保存した環境、圧縮に使ったソフトによってもガラッと変わるし、同じ環境・同じソフトを使ったにも関わらず、若干サイズが変わってしまうこともあります。

でも、数字でキッチリ比較したことで、

  • 色が多く複雑な、写真のような画像はJPG
  • 色が少なくシンプルな、イラストのような画像はPNG

と、使い分ければOK、と分かりました。ご参考までに。

最後までお読みいただき、ありがとうございました。

タイトルとURLをコピーしました