You offer options. The browser picks.
Direct answer
srcset lists image candidates with their pixel widths, such as photo-800.jpg 800w. sizes describes how wide the image will appear in your layout. The browser uses both, plus screen density, to download the best image.
Example
<img
src="cat-800.jpg"
srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1200.jpg 1200w"
sizes="(min-width: 1000px) 400px, 100vw"
alt="A cat on a windowsill"
width="800" height="600">
Reading it
- Screens 1000 pixels and wider show the image about 400 pixels wide.
- Smaller screens show it at full width.
Density descriptors
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="Logo">
Mistakes
- Using
wdescriptors withoutsizes. - Making files that are not actually the stated width.
- Forgetting
alt.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Provide choices and describe the layout. The browser handles the rest.
