HTMLで画像読み込みを高速化する方法

2025.07.22

Webサイトの表示速度を上げる方法はいくつかありますが、中でも画像の最適化は非常に重要です。表示速度が上がれば離脱率の低下やSEO効果にもつながるため、ぜひ以下の方法を実践してみてください。

loading=”lazy”による遅延読み込み

<img src="/images/img.jpg" width="100" height="100" loading="lazy" alt="読み込み遅延画像">

imgタグにloading=”lazy”を付けることで、画像の遅延読み込みが実現できます。これは、画像が実際に画面に表示されるタイミングで読み込まれる仕組みです。ページ読み込み時にすべての画像を読み込む必要がないため、初期表示が速くなります。
ただし、以下の点には気をつけましょう。

MVなど最初に見える位置の画像にlazyを使うと、逆に表示が遅れ、体感速度が落ちてしまいます。ファーストビューの画像には使わず、それ以外の画像に限定しましょう。

画像サイズを指定していないと、ブラウザは読み込み完了まで領域を確定できず、レイアウトシフト（ズレ）が発生します。CSSでサイズを指定する場合でも、imgタグにwidthとheight属性を付けるのが望ましいです。

background-image: url(./images/bg-img.png);
background-size: 100px 100px;
background-repeat: no-repeat;

background-imageは装飾的な背景画像の指定に使われますが、以下の点で注意が必要です。

特に文字が含まれた画像や重要なビジュアルは、imgタグで挿入すべきです。装飾や繰り返しパターンの背景画像に限定してbackground-imageを使うようにしましょう。

画像形式を適切に選ぶことで、ファイルサイズを削減し、表示速度を向上させることができます。

写真などの画素が多い画像に向いています。

イラストや文字など、輪郭がくっきりしている画像に適しています。

ベクター形式で、拡大しても劣化しません。アイコンやロゴに最適です。

Googleが推奨する画像形式で、透過・可逆・非可逆圧縮すべてに対応。非常に高圧縮で軽量ですが、一部古いブラウザには未対応です。
pictureで以下のように使用すれば、WebPに対応していないブラウザでは自動的にJPEG画像が表示されます。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="代替テキスト">
</picture>

画像の最適化は、Webサイトのパフォーマンス向上とユーザー体験の改善、さらにはSEO評価の向上にもつながります。
一つひとつの工夫が、サイト全体の品質を大きく向上させてくれます。ぜひ取り入れてみてください。