サイトで使用する画像容量は何KBが最適なのか？

ぼくはレビューサイトを運営しており、サイトに掲載する画像容量の削減に取り組んでいるのですが、今までは一括で最高レベルまで圧縮して掲載していました。

一番大きくても「320px」の画像で30KB程度、概ね10KB前後の画像ばかりを使用していたのですが、かなり軽いサイトに仕上がっていたものと思います。サーバースペックにも気を配っており、SSDサーバーで高容量メモリ搭載、CPUもコア数の多い低人数のレンタルサーバーを契約しているため、かなり快適なサイトだったと感じています。

けれども、最近はスマホからのアクセス数も多くなってきており、レスポンシブウェブデザインを採用するにあたり、最低でも「370px」程度の幅で掲載しないとスマホで閲覧した際にピンボケしてしまうのです。

PCサイトでは320pxで掲載してクッキリだったとしても、スマホでは最大に拡大して表示するように設定していますので、iPhone6あたりの370px幅の場合、320pxが370pxに拡大して表示されてピンボケしてしまいます。

仕方なく、デフォルトの画像を「400px」で使用するようにたのですが、400pxだとiPhone Plusなどの大きめの端末でもある程度はクッキリ表示されますし、それ以外の端末の場合は縮小されて表示されるため、概ね、どの端末でもクッキリした画像で表示されます。

けれども、この400pxの画像を使用するとなると、jpgの場合は100KBを超えてしまうケースもあり、今までと比べると5倍～10倍程度の容量になってしまいます。

そのため、この400pxで大幅に画質を落とした上で掲載することにしたのですが、以下のような違いがありました。

①今まで通り320px　→　低容量だが、スマホではかなりピンボケ
②400pxでそのまま →　高容量だが、スマホではクッキリ
③400pxで画質を大幅に落とす　→　中容量だが、スマホではわりとクッキリ

①と③を比較すると、多少は容量が大きくなったとしても、画像の表示自体はかなり改善されましたのでこれで対応することにしました。

この400pxの画質を落とすには、Photoshopなどでの書き出しの際に「低画質」、もしくは「中画質」を選択することをおすすめします。

それ以上の画質の場合、容量が大幅に増える割に画質には大した違いを感じられないため、コスパを考えると低画質が最適と感じました。

正直、低画質と高画質の違いもよく見ないとまずわかりません。売れ筋の人気商品の画像の場合は「中画質」を採用し、それ以外の商品レビューについては「低画質」で書き出しするのがよいと思います。