<picture> patterns

Using -w syntax to set density

Here are the basics of using <picture> with the -w syntax. Remember that the <picture> is really just a wrapper of the <img> element – it is required!

Remember that when the -w syntax is used, a sizes attribute must also be present.

When used in this way, the browser is forced to use certain images across certain breakpoints, but may still hold on to a higher-resolution image than needed if it has been cached.

Source:

					<picture>
					    <source media="(min-width: 70rem)"
					            srcset="img-1920.png 1920w, img-1280.png 1280w"
					            sizes="100vw">
					    <source media="(min-width: 50rem)"
					            srcset="img-1920.png 1920w, img-960.png   960w"
					            sizes="100vw">
					    <source media="(min-width: 40rem)"
					            srcset="img-1280.png 1280w, img-640.png   640w"
					            sizes="100vw">
					    <source srcset="img-960.png   960w, img-480.png   480w"
					            sizes="100vw">
					    <img src="img-320.png">
					</picture>
				

Technically, this next image is using -x syntax. It is presented on the same page to demonstrate the source image caching.

Source:

					<picture>
					    <source media="(min-width: 70rem)"
					            srcset="img-1280.png">
					    <source media="(min-width: 50rem)"
					            srcset="img-960.png">
					    <source media="(min-width: 40rem)"
					            srcset="img-640.png">
					    <source srcset="img-480.png">
					    <img src="img-320.png">
					</picture>
				

Browser support

Chrome 46

Buggy. Works mostly, but if you initially are on an exact breakpoint start it won’t re-evaluate until you hit a different breakpoint.

Firefox 42

Safari 9

No <picture> support.

Edge 12

No <picture> support.

Edge 13

Android Chrome 44

iOS Safari 9

No <picture> support.