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

gistfile1.html

<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 :(