サイトマップ

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

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

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

ちびこママです!
icon-twitter Chibiko_mama

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

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

 

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

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

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

 

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

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

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

 

なお、本記事用に用意した画像を、ウェブサイト向けのフリー素材として無料でご提供いたします。

【OK】切り抜き、リサイズ、ぼかし、文字入れなどの加工、アイキャッチやイメージ画像としてのご利用
【NG】直リンク、自作発言、再配布、常識外・モラルに反する利用

著作権は放棄いたしません。

こちらに迷惑が掛からないようご配慮いただければ、基本的に自由にお使いいただいて構いません。

ご質問があればお問い合わせフォームよりどうぞ。

写真はJPG

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

サイズはすべて300×200px、スマホで見た時に縮小表示されない大きさ。解像度は72dpi、ウェブサイト向けの一般的な解像度です。
変換や圧縮に使用したのは、オンラインサービスのiLoveIMGです。

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

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

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

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

 

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

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-花の写真

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

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

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

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

 

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

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

 

ダウンロードOKの素材は以下のボックスで表示します。画像は必ずご自身のパソコンやスマートフォンに保存の上、ご利用ください。

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

通常はPNGがベター

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-スクリーンショット

300×200px、72dpi

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

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

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

 

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

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

 

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

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-スクリーンショット

300×200px、72dpi

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

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

 

 

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

 

拡大してみます。

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-スクリーンショット

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

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

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

写真を含まないならPNG

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

JPG/PNG/圧縮JPG/圧縮PNGデータサイズの比較-スクリーンショット

300×200px、72dpi

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

なんと圧縮PNGが3.62KB!

 

拡大。

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-スクリーンショット

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

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

 

【背面透過PNG 個別ダウンロード(各1KB前後)】

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

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

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

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

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

動物の顏アイコン

・・・すいません、目がチカチカしますよね(笑)実験用なので悪しからず。

300×200px、72dpi。ファイルサイズは、以下のようになりました。

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

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

 

拡大します。

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-動物の顏アイコン

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

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

【背面透過PNG・白フチ付き 個別ダウンロード(3~5KB)】

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

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

季節のアイコン

300×200px、72dpi

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

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

 

拡大します。

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-季節のアイコン

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

【背面透過PNG 個別ダウンロード(10~20KB)】

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

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

女性のイラスト

300×200px、72dpi

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

 

拡大します。

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-女性のイラスト

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

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

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

 

圧縮なしのJPG、PNGを置いておきますので、比較してみてください。↓

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

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

うさぎと紅葉

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

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

200×300px、72dpi

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

ちなみに、スキャナで読む場合、200~300dpiは必要です。はじめから72dpi前後で読むと、画像が小さすぎて編集が大変なので。

このイラストは、比較のため後から72dpiに落としています。

 

拡大します。

JPG/PNG/圧縮JPG/圧縮PNGの300倍の比較-手描きのイラスト

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

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

 

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

 最後に

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

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

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

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

と、使い分ければOK、と分かりました。やれやれ。お疲れ私☆

 

なお、最初にお伝えした通り、本記事で用意した画像はフリー素材としてご提供します。

使い勝手は微妙かもですが(笑)、何かのお役に立てたら嬉しいです。

 

また、「イラストAC」、「写真AC」にもフリー素材を提供しています。

あまり数はないし素人作品ですが、無料でダウンロードできますので、よかったら覗いてみてください^^

 

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