A webpage is not always broken because of a large mistake. Small details can produce exactly this problem: debugging: lazy image does not load when expected. This guide shows you what to look for, a concrete fix, and how to check that it worked.
The Idea in Plain English
loading="lazy" is a hint and browsers choose loading thresholds. Near-viewport images can still load early or later than expected.
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
The first part shows a problem. The second part shows a safer or more accurate version. Compare them before reading the explanation.
<!-- Problem -->
<img src="hero.jpg" alt="Hero" loading="lazy">
<!-- Corrected example -->
<img src="hero.jpg" alt="School garden" width="1000" height="600" fetchpriority="high">What Each Part Does
- The img displays an image and uses alt for its text alternative.
- src points to the asset the browser should load.
- alt supplies replacement text for an informative image or empty text for a decorative one.
- loading can ask a browser to defer offscreen resource fetching.
Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
Try It Yourself
Use eager loading for an important immediately visible image; confirm behavior with the Network panel.
Common Beginner Mistakes
- Check the underlying cause before changing unrelated tags.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- loading="lazy" is a hint and browsers choose loading thresholds. Near-viewport images can still load early or later than expected.
- Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.