Migrate Picturefill 1 to 2

picturefill-1-to-picturefill-2-docs.html

<h1>PictureFill 2 Upgrade</h1>

<p>
    Upgrading to PictureFill 2 lets us take advantage of native functionality in
    modern browsers for responsive images. This is critical for performance
    because it uses browser the preloader rather than waiting for JS to parse
    the source. Older browsers will still work with JS, but with some limitations
    because of the leaner fallback for modern browsers to work efficiently.
</p>

<ul>
    <li>SPAN element is replaced by native PICTURE element.</li>

    <li>NOSCRIPT markup is not needed.</li>

    <li>
        SOURCE order changes from smallest first to largest first. PictureFill 2
        loads SOURCE of the first media query that matches down to the fallback IMG.
    </li>

    <li>The fallback IMG is always the smallest asset rendered (needs no media query).</li>

    <li>The fallback IMG is the only element with an ALT attribute.</li>

    <li>
        IE9 requires VIDEO element in conditional comments to understand SOURCE
        elements (doesn't support PICTURE).
    </li>

    <li>
        IE8 fallback should not be maintained to simplify the markup. Users will
        see the small image but this may look incorrect sometimes.
    </li>
</ul>

<p>
    The following examples demonstrate the difference from PictureFill 1 to 2.
</p>

<p>
    Note: if you can use one source image, do not use PictureFill. It isn't
    necessary most of the time. Always aim to minimize the number of images that
    PictureFill must manage if possible.
</p>




<h2>Ex: Two Images</h2>

<h3>PictureFill 1</h3>

<span data-picture data-alt="Description">
    <span data-src="http://placehold.it/120"></span>
    <span data-src="http://placehold.it/240" data-media="(min-width: 480px)"></span>

    <!--[if (lt IE 9) & (!IEMobile)]>
        <span data-src="http://placehold.it/240"></span>
    <![endif]-->

    <noscript>
        <img src="http://placehold.it/240" alt="Description" />
    </noscript>
</span>

<h3>PictureFill 2</h3>

<picture>
    <!--[if IE 9]><video style="display:none;"><![endif]-->
    <source srcset="http://placehold.it/240" media="(min-width: 480px)">
    <!--[if IE 9]></video><![endif]-->

    <img srcset="http://placehold.it/120" alt="Description">
</picture>




<h2>Ex: Multiple Images</h2>

<p>This example is for reference only (not a best practice).</p>

<h3>PictureFill 1</h3>

<span data-picture data-alt="Description">
    <span data-src="http://placehold.it/320"></span>
    <span data-src="http://placehold.it/480" data-media="(min-width: 321px)"></span>
    <span data-src="http://placehold.it/600" data-media="(min-width: 481px)"></span>
    <span data-src="http://placehold.it/974" data-media="(min-width: 601px)"></span>
    <span data-src="http://placehold.it/1248" data-media="(min-width: 1024px)"></span>

    <noscript>
        <img src="http://placehold.it/1248" alt="Description" />
    </noscript>
</span>

<h3>PictureFill 2</h3>

<picture>
    <!--[if IE 9]><video style="display:none;"><![endif]-->
    <source srcset="http://placehold.it/1248" media="(min-width: 1024px)">
    <source srcset="http://placehold.it/974" media="(min-width: 601px)">
    <source srcset="http://placehold.it/600" media="(min-width: 481px)">
    <source srcset="http://placehold.it/480" media="(min-width: 321px)">
    <!--[if IE 9]></video><![endif]-->

    <img srcset="http://placehold.it/320" alt="Description">
</picture>