More than 3 years have passed since last update.

Webページの表示速度を向上するために、画像のファイルサイズを考えなければならない

Last updated at 2021-06-14Posted at 2021-06-14

##はじめに
若干通信速度が遅い環境で自身のサイトを確認したときに、画像がゆっくり表示され「表示が遅い」と感じました。
ですが、他のサイトはそこまで遅くはなかったので、画像のファイルサイズが大きすぎるのではないかと思い、画像の適正なファイルサイズについて調べてみました。

##画像の適正なファイルサイズ
こちらのサイトに目安が書かれていました。

実際に色んなサイトやブログを調べてみればわかると思いますが、だいたい一つの画像サイズの目安は15KB〜80KBです。あとは画像の大きさと画質とのバランスで決めることになります。

引用元：
ウェブサイトを作る上で欠かせない画像の圧縮。ベストな方法は？

ちなみに私が遅いと感じた画像は概ね200KBでした。

##画像比較
15KB〜80KBということであれば画像のリサイズや、画質を落とすことはほぼ必須となります。
Webサイトに合う大きさにリサイズするのであれば問題ありませんが、画質を落とした場合は、どのくらい影響が出るのか気になったので、illustratorでサンプル画像を作成しました。

個人的には、写真よりも文字の方が影響を受けている気がしたので、文字だけの画像になります。

画質はillustratorの書き出し時にクイック選択できる5パターン（100%, 80%, 60%, 30%, 10%）と、画質50%を合わせた6パターンで比較します。
なお、「画質」の項目からは0~100で細かく設定できます。

最高画質（画質:100%）

高画質（画質:80%）

やや高画質（画質:60%）

（画質:50%）

中画質（画質:30%）

低画質（画質:10%）

##画質とファイルサイズ
Illustratorで書き出した時の画質とファイルサイズは以下の通り。
画像の大きさはすべて、高さ200px・幅900px。すべてJPEGファイルです。

##あとがき
個人的な感想になりますが、画質100%・80%・60%はあまり区別がつきませんでした。目に見える画質の劣化は50%くらいから始まるような気がします。
これからは画像のリサイズと、画質を60%くらいに落としてファイルサイズを確認し、様子を見て調整するようにしようと思います。