Responsive Images using sourceset and Pollyfill

by Virtual

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/2.3.1/picturefill.min.js"></script>
<!-- image10 : sm/500 -->
<!-- image5 : md/1060 -->
<!-- image12 : lg/1600 -->
<picture>
    <!--[if IE 9]>
        <video style="display: none;">
        <![endif]-->
        <source srcset="https://www.montana.edu/cpa/cope/image_manager/thumbnail/6lr97/image12.gif" media="(min-width: 800px)" />
        <source srcset="https://www.montana.edu/cpa/cope/image_manager/thumbnail/6lr97/image5.gif" media="(min-width: 400px)" />
        <!--[if IE 9]>
        </video>
    <![endif]-->
    <img srcset="https://www.montana.edu/cpa/cope/image_manager/thumbnail/6lr97/image10.gif" alt="Image5" />
</picture>

CSS

img {
    width:100%;
    height: auto;
}

JavaScript

$().ready(function (e) {
document.createElement( "picture" );
 
	 picturefill({
        reevaluate: true
    });
});