Lazy loading is a performance optimization technique that delays loading
images until they're needed. HTML provides native lazy loading with the
loading attribute, improving page load times and reducing
bandwidth usage.
Basic Lazy Loading
Add the loading="lazy" attribute to images to enable lazy
loading:
<!-- Lazy loaded image -->
<img src="image.jpg" alt="Description" loading="lazy">
<!-- Eager loaded image (default) -->
<img src="hero.jpg" alt="Hero image" loading="eager">
<!-- Browser decides (default behavior) -->
<img src="photo.jpg" alt="Photo" loading="auto">How Lazy Loading Works
The browser loads images based on these rules:
| Loading Value | Behavior | Best For |
|---|---|---|
lazy |
Loads when near viewport | Below-the-fold images |
eager |
Loads immediately | Above-the-fold images |
auto |
Browser decides | Default behavior |
Images with loading="lazy" load when they're within ~200px of
the viewport.
Lazy Loading with Picture Element
Combine lazy loading with responsive images:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg"
alt="Responsive image"
loading="lazy">
</picture>
The loading attribute goes on the
<img> element, not the
<source> elements.
Lazy Loading with srcset
Use lazy loading with responsive image sets:
<img src="image-medium.jpg"
srcset="image-small.jpg 480w,
image-medium.jpg 800w,
image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="Responsive lazy image"
loading="lazy">The browser will load the appropriate size when the image comes into view.
Placeholder Images
Provide better user experience with placeholders:
Low Quality Image Placeholders (LQIP)
<img src="image-small.jpg"
data-src="image-large.jpg"
alt="Image with placeholder"
loading="lazy"
style="filter: blur(5px); transition: filter 0.3s;">Color Placeholders
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZGRkIi8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkxvYWRpbmcuLi48L3RleHQ+Cjwvc3ZnPg=="
data-src="real-image.jpg"
alt="Loading placeholder"
loading="lazy">Lazy Loading for Iframes
Lazy loading also works with iframes:
<!-- Lazy loaded video embed -->
<iframe src="https://www.youtube.com/embed/video-id"
width="560"
height="315"
loading="lazy"
title="Video title">
</iframe>
<!-- Lazy loaded map -->
<iframe src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450"
loading="lazy"
title="Map location">
</iframe>Perfect for embedded content like videos, maps, and social media widgets.
Browser Support
Native lazy loading has excellent browser support:
| Browser | Version | Support |
|---|---|---|
| Chrome | 77+ | ✓ Full |
| Firefox | 75+ | ✓ Full |
| Safari | 15.4+ | ✓ Full |
| Edge | 79+ | ✓ Full |
| Opera | 64+ | ✓ Full |
💡 Fallback for older browsers:
For browsers that don't support lazy loading, images will load normally (eager loading). Consider using JavaScript libraries like Intersection Observer for older browser support if needed.
Best Practices
✓ Do:
- Use for below-the-fold images
- Specify width and height attributes
- Combine with responsive images (srcset, picture)
- Test with slow network connections
- Consider placeholders for better UX
- Use with iframes for embedded content
- Monitor performance with browser dev tools
✗ Don't:
- Use for above-the-fold critical images
- Forget width/height attributes (causes layout shift)
- Overuse on small decorative images
- Assume it works on all browsers (check support)
- Use without testing on mobile devices
- Combine with complex JavaScript without testing
- Use for CSS background images