The Markup
The srcset attribute allows you to specify a list of image file URLs, along with size descriptions. Yo ualso need to still utilize the src attribute to identify a “default” image source, to be used in browsers that don’t support srcset.
The markup looks likes this:
<img srcset="url size, url size, url size" src="default url" >
(We know, it seems weird to have an HTML tag take up multiple lines, but it makes it much easier to keep track of.)
In the live examples below, we’ll utilize the following images:
- flamingo4x.jpg — 4025 × 2672 — 3.8 MB
- flamingo3x.jpg — 3019 × 2005 — 3.7 MB
- flamingo2x.jpg — 2013 × 1337 — 1.9 MB
- flamingo1x.jpg — 1006 × 668 — 338 KB
- flamingo-fallback.jpg — 1006 × 668 — 108 KB
Notice the file size difference between 1x and 4x. The 4x version is over 11 times larger. This is why you should not serve the high-quality images to low-resolution screens.
Specifying Image Density
The more common way to to set include size information in the srcset attribute is to label each file by image density. You do this by putting 1x, 2x, 3x and so forth after the URL. This works if you have made the different images in proportion to each other (which we did).
<img
srcset="
/wp-content/uploads/flamingo4x.jpg 4x,
/wp-content/uploads/flamingo3x.jpg 3x,
/wp-content/uploads/flamingo2x.jpg 2x,
/wp-content/uploads/flamingo1x.jpg 1x
"
src="/wp-content/uploads/flamingo-fallback.jpg"
>