[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

表示サイズごとにファイルサイズを比較!画像最適化は、表示サイズと画質調整が重要!

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

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

2018-06-18-imagesize-jpeg-png-ogp.jpg今回の比較画像は美味しそうなピザ。食べ物の画像、はシズル感が損なわれないようにすることが重要。

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

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

画像(長辺のサイズ)2400px1200px600px300px
JPEG最高画質 3,855KB 1,234KB 364KB 100KB
JPEG高画質 1.926KB 652KB 197KB 57KB
PNG最高画質 7.094KB 1,970KB 537KB 141KB
LightFile標準画質 888KB 484KB 140KB 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アップでプレビューすると画質とファイルサイズを確認することができて便利です。

2018-06-18-imagesize-jpeg-png01.png長辺が2400pxの場合。右下のPNGはなんと7MBも。

2018-06-18-imagesize-jpeg-png02.png長辺が1200pxの場合。JPEGの最高画質でも1MBを超えてしまう。

2018-06-18-imagesize-jpeg-png03.png長辺が600pxの場合。スマホではこのサイズがディスプレイのフルサイズ表示に近いかも。

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

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

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

2018-06-18-imagesize-jpeg-png05.jpg1が長辺300pxの画像、その下に600px、1200px、2400pxと続く。

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

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

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

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

LightFile Simulator β版

LightFile Simulator β版

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

最後に

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

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

前へ前へ

レスポンシブ・ウェブ・デザインにおいて、画像最適化が意味するもの。高速回線ではない環境で、不要なデータサイズをダウンロードさせない事が重要。

次へ次へ

メディアサイトは84%が対応済み!Lighthouseで調べたモバイルフレンドリーなサイトの割合