🧮

画像のアスペクト比を維持したまま遅延読み込みする方法【サンプルコード付き】SEO対策

に公開
CSS
SEO
frontend
development
developer
tech

画像のアスペクト比を維持したまま遅延読み込みする方法【サンプルコード付き】

Webサイトで画像を遅延読み込み（lazy loading）しつつ、読み込み前でもレイアウト崩れを防ぎたい…そんなときに便利なのが loading="lazy" と aspect-ratio の組み合わせです。

この記事では実装例と、便利なアスペクト比計算ツールも紹介します！

✅ 結論：loading="lazy" ＋ aspect-ratio が超便利

  • loading="lazy" … 画像が画面内に入った時だけ読み込まれる
  • aspect-ratio … 読み込み前でも画像の縦横比をキープ、レイアウト崩れ防止
  • SEO対策にも効果的 … Cumulative Layout Shift（CLS）のスコア改善にも繋がり、検索エンジン評価の向上が期待できます。

📌 シンプルな実装例

<img src="example.jpg" alt="Example Image" loading="lazy" style="aspect-ratio: 16 / 9;">
  • 16:9の比率をキープしたまま、遅延読み込み！

🎁 おまけ：アスペクト比自動計算ツール

「でも実際の画像サイズからアスペクト比ってどう出すの？」という方向けに、入力するだけでアスペクト比がすぐ分かるツールを作りました👇

👉 アスペクト比計算ツールはこちら

画像の幅と高さを入力すると、自動で aspect-ratio の値を表示します。手計算不要！

また、幅か高さから16/9, 3/2, 4/3などのよくある比率の数値を同時に計算もしてくれます。

画像表示のパフォーマンス最適化やSEO改善に、ぜひ活用してみてください！

Discussion