What are the srcset and sizes attributes on for?

So the browser picks a file of the right size for the screen and pixel density

To show several images in turn, like a slider without JS

To define fallback images in case the main one fails to load

HTML & CSS · Middle · Question 21 of 75

What are the `srcset` and `sizes` attributes on `<img>` for?

1To show several images in turn, like a slider without JS
2To define fallback images in case the main one fails to load
✓Correct answer: So the browser picks a file of the right size for the screen and pixel density

Explanation

srcset lists file variants (img-400.jpg 400w, img-800.jpg 800w), and sizes hints how wide the image will be in the layout ((max-width: 600px) 100vw, 50vw). The browser downloads the smallest sufficient file. To change cropping or format, use <picture>.

What are the `srcset` and `sizes` attributes on `<img>` for?

Explanation

Further reading

Problem with a question

Test yourself

What are the srcset and sizes attributes on <img> for?

Explanation

Further reading

Test yourself

What are the `srcset` and `sizes` attributes on `<img>` for?