HTML & CSS
/Beginner
Lazy Loading Images
Definition
A technique that defers the loading of non-critical resources (like images far down the page) at page load time. Instead, these resources are loaded at the moment of need.
Explain Like I'm New
If you have an article with 50 high-resolution photos, it's a massive waste of bandwidth to download all 50 photos immediately if the user only reads the first paragraph and leaves. Lazy loading tells the browser: 'Only download the photos that the user is currently looking at'.
Real World Example
Scrolling through an infinite feed like Instagram. Images are only fetched over the network right before they scroll into view.
Common Use Cases
- •Saving server bandwidth
- •Dramatically speeding up initial page loads
Interactive Example
Interview Questions
basic
- What HTML attribute is used to natively lazy load an image without JavaScript?
intermediate
- Should you lazy load the 'Hero Image' at the very top of your website?