srcset -wto 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.
-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.
<img srcset="img-1280.png 1280w, img-960.png 960w, img-640.png 640w, img-480.png 480w" sizes="480px" src="img-320.png">
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
<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">