当サイトは広告収入で運営しています

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

このページにいいね!する
  • 「画像を貼るならJPGで」と聞いたからJPGにしたのに、なんだか画像が重い
  • 画像に文字を入れてアイキャッチを作ったら、文字がぼやけて読みにくい

こんな思いをしたこと、ありませんか?

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

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

この際どっちを使えばいいのかハッキリさせよう!と思い、色んなタイプの画像をJPG、PNG、圧縮JPG、圧縮PNGの4パターンに変換して検証してみました。

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

写真はJPG

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-花の写真
  • 未圧縮JPG:37.9KB
  • 未圧縮PNG:118KB
  • 圧縮済JPG:26.8KB
  • 圧縮済PNG:42.8KB

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

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

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

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

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

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

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

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

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

通常はPNGがベター

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ
  • 未圧縮JPG:22.7KB
  • 未圧縮PNG:15.1KB
  • 圧縮済JPG:15.1KB
  • 圧縮済PNG:4.84KB

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

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

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

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

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

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ
  • 未圧縮JPG:12.8KB
  • 未圧縮PNG:29.3KB
  • 圧縮済JPG:6.42KB
  • 圧縮済PNG:9.04KB

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

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

拡大してみます。

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

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

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

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

写真を含まないならPNG

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-ブラウザのスクリーンショットイメージ
  • 未圧縮JPG:9.83KB
  • 未圧縮PNG:11.1KB
  • 圧縮済JPG:5.09KB
  • 圧縮済PNG:3.62KB

なんと圧縮PNGが3.62KB!

拡大。

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

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

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

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

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

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

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

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

パターンを使ったイラスト
  • 未圧縮JPG:23.1KB
  • 未圧縮PNG:62.4KB
  • 圧縮済JPG:10.8KB
  • 圧縮済PNG:11KB

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

拡大します。

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

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

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

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

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

テクスチャを重ねたイラスト
  • 未圧縮JPG:38.1KB
  • 未圧縮PNG:97.1KB
  • 圧縮済JPG:24.6KB
  • 圧縮済PNG:24.5KB

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

拡大します。

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

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

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

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

グラデーションや半透明を使用したイラスト
  • 未圧縮JPG:6.7KB
  • 未圧縮PNG:34.6KB
  • 圧縮済JPG:3.52KB
  • 圧縮済PNG:10.5KB

拡大します。

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

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

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

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

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

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

ボールペンと色鉛筆で描いたうさぎのイラスト
  • 未圧縮JPG:35.1KB
  • 未圧縮PNG:136KB
  • 圧縮済JPG:14.7KB
  • 圧縮済PNG:45.3KB

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

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

拡大します。

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

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

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

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

最後に

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

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

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

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

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

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