CampusDownWiki
累計引用 16,205한국어KO 2,699EnglishEN 11,189日本語JA 774中文ZH 1,543
CampusDown(韓国語)↗
日本語

画像の遅延読み込み

⚙️ 工学・技術 執筆 CampusDown ウィキ編集部 最終更新
画像の遅延読み込みとは、全画像を一度に取得せず、スクロールで画面に近づいた画像だけを読み込む性能手法です。
目次
  1. 1. なぜ後で読むのか
  2. 2. 実装と例外
  3. 3. ずれとプレースホルダー
  4. 4. よくある質問
  5. 5. 参考文献

なぜ後で読むのか

一度に読むと初期表示が遅れます。初期表示が速いと速く感じます(Nielsen, 1993; Card et al., 1991)。無限スクロールやカルーセルで効果的です。

実装と例外

loading="lazy"(web.dev, n.d.-a)やIntersection Observer(MDN, n.d.)。最初の応答が重要なので(Miller, 1968)メイン画像は即時に。

ずれとプレースホルダー

CLS(web.dev, n.d.-b)を防ぐため幅と高さを指定し、ぼかしやスケルトンで埋め、代替テキストを(WCAG 2.2 1.1.1)。

よくある質問

全画像に使う?
いいえ、ファーストビューは即時読み込みです。
SEOに不利?
標準的な実装なら読まれます。

出典確認日:2026-10-27

参考文献

  1. web.dev. (n.d.-a). Browser-level image lazy loading for the web. Google. loading=lazyの仕組みです。
  2. web.dev. (n.d.-b). Cumulative Layout Shift (CLS). Google. レイアウトのずれ指標です。
  3. MDN Web Docs. (n.d.). Lazy loading. Mozilla. 遅延読み込みの手法です。
  4. Nielsen, J. (1993, January 1). Response time limits. Nielsen Norman Group. 応答時間の限界です。
  5. Card, S. K., Robertson, G. G., & Mackinlay, J. D. (1991). The information visualizer, an information workspace. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 181–186). ACM. 知覚時間の基準です。
  6. Miller, R. B. (1968). Response time in man-computer conversational transactions. In Proceedings of the December 9–11, 1968, Fall Joint Computer Conference, Part I (pp. 267–277). ACM. 遅延と期待の古典です。
  7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.1.1代替テキストです。

この理論を使ったレポート・資料(韓国語)

この理論だけを扱った資料はまだありませんが、CampusDown 資料室(韓国語)で関連レポートを検索できます。

レポートをもっと探す・「이미지 지연 로딩」の検索結果 →

あわせて読みたい理論

最新記事すべて見る ›

大学の勉強・課題に役立つ新着記事(韓国語)

この記事は2026年10月27日に最終更新されました。内容は広く知られた原典と教科書に基づいて整理していますが、レポートで引用する際は参考文献の原典を必ず確認してください。