【雑記】JPEG(JPG)とPNGの画質と容量を少し比べてみた

ブログに載せる画像はいつもJPEG形式を使っていたが、画像のタイプによってはPNGのほうが容量が軽く、画質も良いらしいので試してみた。

気になる画像のノイズ・粗

先日書いた「WeBoX」の記事に使った画像もそうだったけど、ノイズが酷く、粗が目立っているのが気になっていた。ザラザラとした粗々しさ！

ブログを始めた当初、PNGでキャプチャーした画像は容量が大きくて、一つの記事の中にいくつも載せるのはあまりよろしくないのかな？と思ったり、「PageSpeed Insights」でも修正を勧められたので画質より容量の小ささを重視していた。

そんなこんなで、もっぱらJPEG画像ばかり使っていたが、実際は形式によって得手不得手があるらしく、使い分けが肝要らしいので、自分がブログに載せそうな画像で少し試してみた。

いつもお世話になっているスクリーンキャプチャーソフト「WinShot」を使い、「JPEG(品質60)」と「PNG(24ビット)」の2種類の保存形式で画質と容量をざっくりと比較してみた。

●「Claunch」のオプション画面の上部の画像。
・JPEG　16.56KB　はっきりとしたノイズが目立つ感じ。

・PNG　6.35KB　JPEGに比べると綺麗な上に容量も半分以下に。

●「艦これ」任務画面の一部を指定して撮った画像
・JPEG　6.14KB　やっぱりノイズが目立つ、輪郭もぼんやりして滲んでいるが、軽い！

・PNG　43.41KB　粗がなくて綺麗に見えるが、容量が大きくなった。意外と色数多いのかな？

●「艦これ」梅雨バージョンの高波
軽さ重視のJPEGは粗く、PNGのほうが確かに綺麗。でもデータサイズには10倍くらいの差が。

JPEG　25.05KB	PNG　252.74KB

キャプチャーソフト側の設定や保存時の細かい種類によって結果が変わりそうだけど、自分の状況から考えると、文字や線で構成された色数の少ないシンプルなものは「PNG」、それ以外は「JPEG(JPG)」で保存する形になりそうかな。

ゲーム画面のスクリーンショットなんかはPNGだとさすがに容量が大きくなりすぎるし、ブログの幅に合わせて縦・横幅を調整すれば、低画質JPEGの粗さも多少は目立たなくなるので、とりあえずはこういう方針でやっていこうかな。しかし結構変わるものだなあ、面白い！

画質についての印象は、ディスプレイの解像度とかによっても違うのかもな～。自分は軽い近視なので、視力が高い人にはノイズが気になっている可能性もあるか！軽くてキレイな画像を載せられるように少しずつ工夫していきたいと思います。