Picture element markup 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-m.jpg" media="min-width:321px"/>--> 
    <source src="photo-m.jpg" media="min-width:321px"/> 
    <!--<source src="photo-l.jpg" media="min-width:641px"/>--> 
    <source src="photo-l.jpg" media="min-width:641px"/> 
    <!--<source src="photo-xl.jpg" media="min-width:1281px"/>--> 
    <source src="photo-xl.jpg" media="min-width:1281px"/> 
    <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. 
11 lines of code for "1" image :(