画像の重さとサイト表示速度: 見落としがちな影響と選び方
「綺麗な写真だから」と高解像度の画像をそのまま使うと、サイトの表示速度が落ちて離脱の原因になることがあります。画像形式・サイズの選び方の基本を整理します。
写真1枚の重さが、サイト全体の体感速度を左右する
Webページの表示が遅い原因の多くは、実はテキストやプログラムではなく画像です。特にヒーロー画像やアイキャッチのように、ページを開いた瞬間に読み込まれる大きな写真は、ファイルサイズが数MBあると、それだけで表示に数秒かかることがあります。ユーザーは表示に3秒以上かかるとページを離脱しやすくなるとされており、綺麗な写真を選んだつもりが、逆に機会損失につながっているケースは少なくありません。
PNGとJPEGはどちらが適しているか
画像形式には主にPNGとJPEGがあり、それぞれ得意分野が異なります。PNGは可逆圧縮で画質の劣化がない代わりにファイルサイズが大きくなりやすく、ロゴやアイコンのように背景を透過させたい画像、輪郭のはっきりした図解に向いています。一方JPEGは非可逆圧縮ですが、写真のような自然なグラデーションを含む画像では、見た目上ほとんど劣化を感じさせないまま大幅にファイルサイズを縮小できます。
つまり、人物や風景などの実写素材であれば、基本的にJPEG(またはさらに軽量なWebP)を選ぶ方が理にかなっています。透過が必要な場合を除き、写真素材をPNGでそのまま使い続けると、無駄にサイトを重くしてしまうことになります。
表示サイズに対して大きすぎる画像を使っていないか
もう1つ見落とされがちなのが、実際の表示サイズと元画像の解像度のミスマッチです。幅400pxで表示する予定のサムネイルに、幅2000px超えの元画像をそのまま読み込ませていると、ブラウザは不要に大きなデータをダウンロードすることになります。表示先の最大サイズに応じて、あらかじめ複数解像度を用意しておく(レスポンシブ画像)か、少なくとも用途に応じたサイズで書き出しておくことが望ましいです。
ダウンロードする側が確認しておきたいこと
素材サイトから画像をダウンロードする際は、用途に対して適切なサイズ・形式を選べるかどうかも確認しておくと良いポイントです。当サイトでもS・M・Lの3サイズを用意しており、Webサイトのサムネイル用途であれば無理にLサイズを使う必要はありません。用途に合わせて小さいサイズを選ぶだけでも、サイトの表示速度改善に直結します。