HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Lazy loading</title>

  <style>

    img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin-bottom: 24px; }

    .spacer { height: 800px; background: linear-gradient(#f1f5f9, #e2e8f0); display: flex; align-items: center; justify-content: center; color: #64748b; border-radius: 8px; margin-bottom: 24px; }

  </style>

</head>

<body>

  <h1>Lazy loading demo</h1>

  <p>Scroll down — the image below loads only when it enters the viewport.</p>

  <div class="spacer">Scroll down &darr;</div>

  <img src="https://placehold.co/500x320/dc2626/white?text=Lazy+Loaded"

    alt="High-resolution photo loaded lazily"

    loading="lazy" width="500" height="320">

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Images — Lazy Loading