srcset -wto pick the best size, and the image changes size across breakpoints
Here we have an image which will be presented at different sizes, and so we can instruct the browser to pick the best initial picture by combining a list of possible source images, with how it will be intended to size the final image, as well as its own knowledge of the browser width and PPI.
The following image will be one third of the full width of the screen, or
33.33333vw, above the
50em breakpoint. Below that it will be
Note that as with previous examples, once the browser has grabbed a larger image, it won’t let go, even if a smaller, closer matching image would suffice or indeed, is already cached. One other thing, here the
sizes attribute includes media queries and multiple sizes. If using a
<source> element, there is a separate
media attribute, but you can still combine this with media queries within the
sizes attribute as well.
<img srcset="img-1920.png 1920w, img-1280.png 1280w, img-960.png 960w, img-640.png 640w, img-480.png 480w, img-320.png 320w" sizes="(min-width: 50em) 33.33333vw, 100vw" src="img-320.png">