<picture> patterns

Testing srcset -w syntax, when no source attribute is set

By deliberately leaving off the otherwise required sources attribute, we can get some weird browser behaviour. Of course you should not leave off the sources attribute, this is just to provide a counterpoint as to why it is needed.

The first image has the 320w but is still missing sizes.

The second image leaves off the 320w and is missing the sizes attribute.

The third image uses -x syntax as some weird behaviours can occur when both syntax types are on the same page.

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"
					     src="img-320.png">

					<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"
					     src="img-320.png">

					<img srcset="img-320.png 1x,
					             img-640.png 2x"
					     src="img-320.png">
				

Browser support

Chrome 46

Buggy? Goes weird if you leave off the 320w – and make it larger. For other example, works, hangs on to larger images.

Firefox 42

Doesn't replace the -x syntax images even if a downloaded-but-not-matching-x-density source exists (this may be desired behaviour?).

Safari 9

Doesn't replace the -x syntax images even if a downloaded-but-not-matching-x-density source exists (this may be desired behaviour?).

Edge 12

No -w syntax support. -x image works as intended.

Edge 13

Android Chrome 44

Works generally, however the existence of the -x syntax image here sometimes causes it to select incorrect sources.

iOS Safari 9

Desktop Safari issues were not observed on iOS.