ALA Image Snippets

1. basic-image-no-caption.html

<figure><img src="<!-- URL here -->" alt=""></figure>

2. basic-image-with-caption.html

<figure>
<img src="<!-- URL here -->" alt="">
<figcaption>Image description goes here.</figcaption>		
</figure>

3. hi-dpi-option.html

<figure>
<picture>
<source media="(min-width: 600px)" 
   srcset="<!-- URL for high-DPI image here --> 2x" >
<img src="<!-- URL for standard image here -->" alt="">
</picture>
</figure>

4. hi-dpi-with-small-screen-options.html

<figure>
<picture>
<source media="(max-width: 700px)" 
   srcset="<!-- URL for small-screen image here --> 1x,
   <!-- URL for small-screen, high-DPI image here --> 2x" >
<source media="(min-width: 600px)" 
   srcset="<!-- URL for high-DPI image here --> 2x" >
<img src="<!-- URL for standard image here -->" alt="">
</picture>
</figure>

5. svg-with-fallback.html

<figure>
<img src="<!-- SVG URL here -->" data-fb="<!-- fallback URL here -->" onerror="this.src = this.getAttribute('data-fb');">
</figure>

ALA uses Filament Group's picturefill to serve high-DPI and small-screen options.

Removing all tabs and extra whitespace for the same of EE's sanity.

Fixed the width logic in example 4.