<picture> patterns

Using srcset -w to 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 100% width.

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.

Source:

					<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">
				

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

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.