Instantly share code, notes, and snippets.

What would you like to do?
Picture element markup for high-resolution devices with polyfill markup for older browsers
<picture alt="Alt tag describing the image represented">
<!--<source src="photo-s.jpg"/>-->
<source src="photo-s.jpg"/>
<source src="photo-s@2x.jpg" media="-webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/>
<!--<source src="photo-m.jpg" media="min-width:321px"/>-->
<source src="photo-m.jpg" media="min-width:321px"/>
<source src="photo-m@2x.jpg" media="min-width:321px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/>
<!--<source src="photo-l.jpg" media="min-width:641px"/>-->
<source src="photo-l.jpg" media="min-width:641px"/>
<source src="photo-l@2x.jpg" media="min-width:641px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/>
<!--<source src="photo-xl.jpg" media="min-width:1281px" />-->
<source src="photo-xl.jpg" media="min-width:1281px" />
<source src="photo-xl@2x.jpg" media="min-width:1281px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi" />
<noscript><img src="photo-s.jpg" /></noscript>
Markup based off of Scott Jehl's picturefill example.
Added commented source elements (needed for IE9, Android 2.1-2.3 and iOS 4.3 Safari)
to demonstrate how a real life cross-browser implementation might look like.
15 lines of code for "1" image :(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment