Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.
What You Need to Know
Lazy loading is useful for images well below the visible part of a page. Do not lazy-load the main hero image that someone needs immediately, or you may delay the first useful impression.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h1>School gallery</h1>
<img src="images/hero.jpg" alt="School entrance" width="900" height="500">
<img src="images/gallery-2.jpg" alt="Art class" loading="lazy" width="900" height="500">Let’s Read the Code
- loading: Loading can ask the browser to defer a resource that is off screen.
- <h1>: A top-level heading explains what the page is about.
- <img>: The img displays a picture; its alt is the text alternative.
- src: Src identifies a resource path for images, frames, or media.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.
Your Turn
Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.
Key Takeaways
- Lazy loading is useful for images well below the visible part of a page.
- loading: Loading can ask the browser to defer a resource that is off screen.
- If the resource cannot load, users still need enough text to understand what was meant to be there.