public
Created

Mobify.js responsive <picture> example with accessible descriptive text.

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8
<picture data-src="http://cdn.mobify.com/mobifyjs/examples/assets/images/responsive-obama-mobile.jpg">
<source src="//ir0.mobify.com/webp/400/http://cdn.mobify.com/mobifyjs/examples/assets/images/responsive-obama-mobile.jpg">
<source src="//ir0.mobify.com/webp/400/http://cdn.mobify.com/mobifyjs/examples/assets/images/responsive-obama.jpg" media="(min-width: 512px)">
<source src="//ir0.mobify.com/webp/512/http://cdn.mobify.com/mobifyjs/examples/assets/images/responsive-obama.jpg" media="(min-width: 1024px)" data-width="512">
<source src="//ir0.mobify.com/webp/512/http://cdn.mobify.com/mobifyjs/examples/assets/images/responsive-obama.jpg" media="(min-width: 2048px)" data-width="1024">
<img src="responsive-obama.jpg">
<p>A photograph of United States President Barack Obama shaking hands.</p>
</picture>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.