srcset with width descriptors serves appropriately sized images per device screen. The picture element enables art direction — different image crops for mobile vs desktop. AVIF and WebP offer better compression than JPEG.
Responsive Images
<!-- srcset with width descriptors -->
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Photo">
<!-- Art direction with picture -->
<picture>
<source media="(max-width: 600px)" srcset="mobile.jpg">
<source srcset="desktop.jpg">
<img src="desktop.jpg" alt="Photo">
</picture>