<picture> patterns

Simple art direction changes

Here we combine the two syntaxes. At small sizes, a square image will be shown. At larger images, a rectangular image will be shown. The swap between these two is enforced by the use of <picture> and <source> elements with media attributes.

As has been seen in the plain -x and -w syntax examples, larger images may be cached and used, even when the window is scaled down again.

Source:

					<picture>
					    <source media="(min-width: 50em)"
					            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="50vw">
					    <source srcset="img-c-170.png 1x,
					                    img-c-340.png 2x">
					    <img src="img-c-170.png">
					</picture>
				

Browser support

Chrome 46

Buggy. If you refresh at the first source breakpoint, it gets stuck on an image source. If you trigger the second source, it picks up again. Given the srcset -w and sizes behaviour from other examples has it using the largest cached source, instead here it changes sources up and down, rather than holding on to the largest one.

Firefox 42

Buggy. Especially with srcset on an <img> tag. Given the srcset -w and sizes behaviour from other examples has it using the largest cached source, instead here it changes sources up and down, rather than holding on to the largest one.

Safari 9

No <picture> support.

Edge 12

No <picture> support.

Edge 13

Android Chrome 44

Appears to work, but may still have similar issues as desktop Chrome were the conditions correct.

iOS Safari 9

No <picture> support.