Responsive Images with srcset and sizes
Serve appropriately sized images to different screen densities.
The Problem with Single Images
A single large image served to all devices wastes bandwidth on small screens:
- A phone with a 390px screen does not need a 2400px image
- A 4K monitor deserves a higher-resolution image than 96dpi
- Responsive images serve the right image for the right screen
The srcset Attribute
srcset provides a list of image sources with their widths:
<img
src="photo-800.jpg"
srcset="
photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1600.jpg 1600w
"
alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->All lessons in this course
- The img Element src alt width height
- Responsive Images with srcset and sizes
- The picture Element for Art Direction
- figure and figcaption