A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore image lazy loading and unexpected empty viewports using a short example that you can inspect and change.
The Idea in Plain English
Loading lazy images can save bandwidth, but the browser decides when to fetch them. For pictures already visible at first paint, omit loading="lazy" to avoid delays.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<img src="/images/hero.jpg" alt="School garden" width="1200" height="600">
<img src="/images/gallery-1.jpg" alt="Seed trays" width="600" height="400" loading="lazy">What Each Part Does
- The img displays an image and uses alt for its text alternative.
- loading can ask a browser to defer offscreen resource fetching.
- src points to the asset the browser should load.
- alt supplies replacement text for an informative image or empty text for a decorative one.
The offscreen gallery photo may be fetched later, while the important hero image can load normally.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Image Lazy Loading and Unexpected Empty Viewports, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Marking every image as lazy and wondering why the first screen looks empty.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Loading lazy images can save bandwidth, but the browser decides when to fetch them. For pictures already visible at first paint, omit loading="lazy" to avoid delays.
- The offscreen gallery photo may be fetched later, while the important hero image can load normally.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.