Responsive Images
The srcset and sizes attributes allow browsers to choose an appropriate image resource based on viewport and device characteristics. The <picture> element allows art direction and format selection.
Responsive Image
<img\n src="photo-800.jpg"\n srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"\n sizes="(max-width: 600px) 100vw, 800px"\n alt="Mountain landscape">💡 The browser can select an appropriate resource rather than downloading the largest image for every device.
Key Takeaways
- srcset can provide multiple image candidates.
- Responsive images can reduce unnecessary bandwidth.
Knowledge Check
Which attribute provides multiple image candidates?