Blog

WEB制作時の画像サイズは?

こんにちは。開発部・アニマル部署統括のPです。

さて今日はWEB制作者のお悩みのタネでもある画像サイズについてお話したいと思います。

皆様ホームページを作る方であればご存じのとおり、SEO的な観点からも
ページの表示速度は早ければ早いほど良いとされていますので、
リソース類はなるべくサイズを小さくしたいですよね。

表示スピードの観点から見れば、1ページにつき、リソースのサイズはだいたい1MB以内が理想といわれています。

画像のファイル形式ですが、頻繁に利用するのは「JPEG」と「PNG」の2種類かと思います。
こちらの2種類の利用目的を明確にし、最適な形式の画像ファイルを使うようにしましょう。

【JPEG形式】
主に写真などに使用
【PNG形式】
ロゴ・イラスト類やテキストが多い画像に使用。背景を透過したい場合にも。

PhotoShopなどの画像加工ソフトを使用する際は、
ファイル形式以外にも画質や出力オプションにも注意し、
見た目(画質)とサイズのバランスが取れたものを選びましょう。

こちらのキュートなわんちゃんの写真ですが、それぞれのサイズを比較してみたいと思います。

ちなみに元データは、5.71 MB。
これをまず幅:600×高さ:800pxへトリミング。
画像解像度は72pixel/inchとします。

【PNG形式(24bit)】864KB

【PNG形式(8bit)】302KB

【JPEG(高画質)】212KB

【JPEG(中画質)】60KB

【JPEG(低画質)】38KB

結果:PNG(8bit)やJPEG低画質は流石に粗さが目立ちますが、
大きな画像じゃなければ、JPEGの中~やや高画質くらいでいけそうな感じですね。

最後に、こちらの画像をご覧ください。

PNG形式(24bit)と同じくらいきれいな画像ですよね。

これは↑のPNG形式(24bit)の画像をwebp形式に変換したものです。
webp形式だと写真だけでなく、透過画像、イラストも綺麗に表示してくれます。
さらに驚きなのはそのサイズ。67KBです。

無料のWEBP変換ツールもありますので、
是非お手持ちの画像でためしてみてください。
https://lab.syncer.jp/Tool/Webp-Converter/

これは使うしかない!と言いたいところですが、
残念なことに現時点(2020年09月)ではSafari・IOSでは未対応なので、
もし使う場合は対応ブラウザ以外は今まで通り、
JPEG・PNGの画像を表示するようにしなければいけません。。

まだまだ画像サイズとの戦いは続きそうです。

えーちなみに冒頭で「リソースのサイズはだいたい1MB以内が理想」と言いましたが
現時点の弊社のサービス紹介ページの結果です。

3.9MB…これは社長に怒られる案件。

…こっそり直していこうと思います。

2020.09.17