img with srcset changes resolution. picture element lets you change entire image based on screen size.
Different Images for Different Screens:
<picture>
<!-- Mobile: Portrait crop -->
<source media="(max-width: 600px)" srcset="portrait.jpg">
<!-- Tablet: Square crop -->
<source media="(max-width: 1024px)" srcset="square.jpg">
<!-- Desktop: Landscape crop -->
<img src="landscape.jpg" alt="Hero image">
</picture>
Modern Format with Fallback:
<picture>
<!-- Try AVIF first (smallest) -->
<source srcset="image.avif" type="image/avif">
<!-- Fallback to WebP -->
<source srcset="image.webp" type="image/webp">
<!-- Fallback to JPEG -->
<img src="image.jpg" alt="Product photo">
</picture>
<!-- Browser picks first format it supports -->
Benefits:
– Show different composition on mobile vs desktop
– Use modern formats with automatic fallback
– Better than CSS background-image (SEO, accessibility)