画像の表示サイズが大きければ、その分ファイルサイズが大きくなる。これは、色数が256色より多い画像であればたいていはそうなります。今回も、JPEGとPNGのファイルサイズの違いについて、調べてみました。

画像の表示サイズにかかわらず、Photoshopから書き出したJPEG最高画質でも1.4倍も差がある

今回の比較画像は美味しそうなピザ。食べ物の画像、はシズル感が損なわれないようにすることが重要。

結果としては、画像の表示サイズが異なっても、その割合に大きな変化はみられませんでした。JPEGの最高画質と比べ、PNGの方が約1.4倍ほどファイルサイズが大きくなります。

表示サイズが大きな場合ほど、そのファイル容量は肥大します。大きな画像では約3MBもの差がありました。サムネイル画像程度であれば、今回のケースで40KBほどの差があります。

比較対象は、それぞれ以下の様になっています。

1. JPEG最高画質・・・PhotoshopのWeb用に書き出しで、JPEG画質100
2. JPEG高画質・・・PhotoshopのWeb用に書き出しで、JPEG画質80
3. PNG最高画質・・・PhotoshopのWeb用に書き出しで、PNG-24
4. LightFile標準画質・・・JPEG最高画質のものを、LightFile標準画質で処理

画像の表示サイズごとのファイルサイズの差

Photoshopでは書き出す際に、2アップや4アップでプレビューすると画質とファイルサイズを確認することができて便利です。

長辺が2400pxの場合。右下のPNGはなんと7MBも。

長辺が1200pxの場合。JPEGの最高画質でも1MBを超えてしまう。

長辺が600pxの場合。スマホではこのサイズがディスプレイのフルサイズ表示に近いかも。

長辺が300pxの場合。記事の挿絵などに利用されることが多いサイズですが、100KBを超えるので枚数次第では無視できない容量。

LightFileシミュレータで、JPEG最高画質を処理してみる

弊社の画像最適化ツールで、Photoshopから書き出した最高画質の画像を、標準品質で処理してみました。LightFileは画質評価指数SSIM値を利用して処理をするので、画質を落とさずにファイルサイズを軽量化してくれます。

1が長辺300pxの画像、その下に600px、1200px、2400pxと続く。

一番下の4をみると、JPEG最高画質の画像が3.86MBとなっています。

LightFileでは、標準画質で-3.01MBの削減を行っており、結果として888KBになっています。削減割合としては78%もの削減ができています。画質のコントロールはとても重要であり、劣化しすぎると印象が悪くなってしまいます。画質の劣化を極力行わず、ファイルサイズを最大限まで引き下げることができれば、画像最適化は完璧にできていると言えます。

JPEGの最適化・軽量化にはLightFileがおすすめ

JPEG画像はツールを使うことで、さらに軽くすることができます。弊社のLightFileなら、画質をキレイに保ったまま、ファイルサイズを軽くすることが可能です。無料のシミュレータを利用して、どのぐらい軽くなるのか、せひ試してみてください。

LightFile Simulator β版

無料で使える画像最適化チェックシミュレータ。チェック結果がレポートになるので、URLを共有すればみんなでみれる。

https://simulator.lightfile.net/

最後に

PNGはとても優れた画像形式であり、汎用性も非常に高いです。しかしその分、ファイルサイズが重くなってしまうケースが多くあります。まずは、管理されているウェブサイトがどのような構成になっているのかを確認して、画像最適化を一歩づつ進めていきましょう。

画像最適化をすることで、ウェブサイトの表示は高速化し、不要な転送量を抑えることができます。