Optimize images by: using modern formats (WebP, AVIF), proper sizing for display dimensions, lazy loading below-the-fold images, using responsive images with srcset, and compressing without visible quality loss.
Image Optimization Techniques:
Modern Formats:
Proper Sizing:
Lazy Loading:
Compression:
<!-- Basic srcset for different sizes -->
<img
src="image-800.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="Description"
loading="lazy"
decoding="async"
width="800"
height="600"
/>
<!-- Picture element for format fallbacks -->
<picture>
<source type="image/avif" srcset="image.avif" />
<source type="image/webp" srcset="image.webp" />
<img src="image.jpg" alt="Description" loading="lazy" />
</picture>
<!-- Art direction with different images -->
<picture>
<source media="(max-width: 600px)" srcset="mobile-hero.jpg" />
<source media="(max-width: 1000px)" srcset="tablet-hero.jpg" />
<img src="desktop-hero.jpg" alt="Hero" />
</picture>