Document various potential fallback/double download patterns

[Wilto]

It would be great to reduce the recommended markup patterns to a small numbered handful that we all agree on, write unit tests to match, and then make a simple chart with checkmarks so devs can see the pros and cons of each, and choose quickly.

Into this idea. See: #438.

[aFarkas]

+1 (very important)

[mike-engel]

@aFarkas, @Wilto, @baloneysandwiches, can we have a quick discussion to organize these before heading into the docs?

As far as I remember, here are our markup patterns:

Mutilated IMG pattern

• Remove the srcset and src on the fallback image
• Fixes the Flash Of Wrong Image™ on safari
• Prevents the image from displaying on android

Empty gif pattern

• Use src="data:image/gif;base64,R0lGODlhAQABAAAAADs=" for a src
• Allows for "no image" to be shown when using <picture>
• Adds a little markup

Anti Double download pattern

• Use srcset instead of src on the fallback image
• Could prevent the default image from showing up if the JS fails?

IE9 picture pattern

• Use MS IE conditionals to wrap <source> elements in a <video> element
• Extra markup if you don't need IE9 support

[aFarkas]

I think we should simply just use the predefined markups pattern without describing.

In case we have srcset x or srcset w, we simply use the "Anti Double download pattern" and only use srcset.

<img srcset="img-1.jpg 1x, img-2.jpg 2x" />

And in case of art direction we use the "Mutilated IMG pattern":

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <source srcset="small.jpg" >
  <!--[if IE 9]></video><![endif]-->
  <img class="header-image__img" alt="Image">
</picture>

And maybe in the gotcha docs, we can inform people about the "Mutilated IMG pattern" in combination with srcset and the width descriptor (useful against double download in iOS8):

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="large.jpg 1440w, small.jpg 960w" sizes="(max-width: 1280px) 100vw, 1280px">
  <!--[if IE 9]></video><![endif]-->
  <img alt="Pictured img without art direction">
</picture>