Lesson 8 of 8
Responsive images
- 13 min
- 6 checks
- 3 hints
- Go to task
Goal
Every screen gets the size that suits it
Explanation
When a full 1600-pixel-wide image is sent to a phone that displays it only 400 pixels wide, the user downloads several times more data than they actually see. The srcset attribute gives the browser a list of different sizes of the same image, and sizes tells it how much space the image will take up on the page, so the browser picks the size that best fits the screen's width and pixel density.
The descriptor 800w means “this file is 800 pixels wide”, not “display it 800 pixels wide”. The browser reads sizes in order and takes the first condition that matches, so (min-width: 700px) 640px, 100vw means 640 pixels on wide screens and the full screen width on anything narrower.
Keep in mind that a descriptor that doesn't match its file's real width throws off the browser's math, so it ends up picking an image that's blurry or heavier than it needs to be. And if you want the image's crop to change between screens, not just its size, that's a job for <picture>.
Your task
Give the image a srcset with three widths from the same URL (?w=400, ?w=800 and ?w=1600) and descriptors that match them. Add sizes="(min-width: 700px) 640px, 100vw", plus width="1600" height="1067" so its space is reserved at a 3:2 ratio, and alt text that describes it. Keep src as a fallback.
Checks
6 checks- srcset has at least three widths
- Each descriptor matches its file's width
- sizes describes the image's space on the page
- The image's dimensions are reserved at 3:2
- The image has alt text that describes it
- The image keeps src as a fallback