public
Last active

Picture element markup for high-resolution devices with polyfill markup for older browsers

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<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>
</picture>
 
//Notes
//--------------------------------------------------
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 :(

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.