Using srcset -w to pick the best size

Using `srcset -w` to pick the best size

-w syntax instructs the browser to load a different image based on the reported density of the screen display, combined with some ahead-of-time knowledge about what size the image will be displayed at. The number in front of the w should be the exact pixel width of that particular image file.

When using -w syntax you absolutely must also include a sizes attribute, even if it only has one value in it. This is a requirement of the spec. In another example, you can observe weird browser behaviour when it is left out.

If you do not need the complexity of the full <picture> syntax, this will allow you to have images which semi-intelligently pick the right image to load for the given display size. This includes calculations internally about the display PPI and browser width.

It is important to note that the caching of images here is permissive. If the browser has already loaded a larger image, such as from a window resize, it will hold on to that image even if a closer matching source would suffice and even if a more closely matching source has already been cached.

The main addition compared to the -x syntax is the addition of the (mandatory for -w syntax use) sizes attribute. This contains a list, in descending order, of sizes of how the image will be displayed. Media queries are paired here with each size to match how the image is intended to be displayed. However, the last item – or if there is only one size – does not need to specify a media query.

Some people feel that having media queries in the HTML is uncomfortable. However, the queries are required in the HTML attribute so that the browser can pick the best image source without needing to first load and parse a CSS document.

Source:


					<img srcset="img-1280.png 1280w,
					             img-960.png   960w,
					             img-640.png   640w,
					             img-480.png   480w"
					     sizes="480px"
					     src="img-320.png">

Full width example

The following example will likely have messed with the chosen image above, due to the same source images being available for the browser to choose from. Here, the browser is instructed that it will display edge-to-edge, or 100vw.

Source:


					<img srcset="img-1280.png 1280w,
					             img-960.png   960w,
					             img-640.png   640w,
					             img-480.png   480w,
					             img-320.png   320w"
					     sizes="100vw"
					     src="img-320.png">

Browser support

Chrome 46
Firefox 42: Works, with inconsistent behaviour. Uses the 320px source for the first image, even if a larger source is downloaded. Otherwise, grabs one size and never lets go, even if a bigger size is available. Doesn't replace the -x syntax images even if a downloaded-but-not-matching-x-density source exists.
Safari 9: Works, with inconsistent behaviour. Uses the 320px source for the first image, even if a larger source is downloaded. Otherwise, grabs one size and never lets go, even if a bigger size is available. Doesn't replace the -x syntax images even if a downloaded-but-not-matching-x-density source exists.
Edge 12: No -w syntax support. -x image works as intended.
Edge 13
Android Chrome 44
iOS Safari 9