How to adjust your images for retina/hi-res displays by using srcset

for reference: the three images side by side, displayed at the same width.

And now, the image with the "srcset" attribute

displayed at 500 pixels wide or less (max-width: 500px).

The html looks like this:

<img src="etc/images/stainedglass-250.jpg" srcset="etc/images/stainedglass-500.jpg 500w, etc/images/stainedglass-1000.jpg 1000w, etc/images/stainedglass-2000.jpg 2000w">

You write srcset with the structure "filename-1 image-width, filename-2 image-width, etc." and the browser does the rest!

The browser will choose the image which has the best resolution for the size displayed and the screen's ppi (pixels per inch).

This is useful because:

• the browser does all the work of figuring out which image is best for the user's display;
• the browser doesn't download a huge image if it doesn't have to;
• similarly, the browser doesn't show a crappy low-res image when it has a replacement;
• the user doesn't get frustrated because the image takes forever to load or is pixelated!
• if the browser doesn't support srcset, the image loads normally.

And so everybody's happy! (mostly)

For more info, check out css-tricks!