b4z81/gist:2710788

## gistfile1.html
<head>
<style type="text/css">
    picture source {
        src: image-set(url({filename}@2x.{ext} 2x high-bandwidth));
    }
@media screen and (min-width:321px){
    picture source {
        src: image-set(url({filename}-m.{ext}), url({filename}-m@2x.{ext} 2x high-bandwidth));
    }
}

@media screen and (min-width:641px){
    picture source {
        src: image-set(url({filename}-l.{ext}), url({filename}-l@2x.{ext} 2x high-bandwidth));
    }
}

@media screen and (min-width:1281px){
    picture source {
        src: image-set(url({filename}-x.{ext}), url({filename}-xl@2x.{ext} 2x high-bandwidth));
    }
}
</style>
</head>

<body>
<picture alt="Alt tag describing the image represented">
    <source src="photo.jpg"/><!-- This would be your smallest photo -->
    <noscript><img src="photo.jpg" /></noscript>
</picture>

//Notes
//--------------------------------------------------
This is my proposed solution to displaying images on multiple devices with multiple resolutions as an alternative to:
https://gist.github.com/2509534

* Hat-tip to @adamdbradley who has lead the research on this and got me thinking in this direction.
* picture source selector used in CSS would only apply to source tags inside of the picture element.
* simplifies authoring picture elements and maintaining them.
* {filename} would use the file name of the src attribute of the selector, in this case it would be "photo"
* {ext} would use the file extension of the src attribute of the selector, in this case it would be "jpg"
* would require the browser to parse the CSS file before loading the src attribute of the source tag in the picture element to prevent duplicate downloads.
	<head>
	<style type="text/css">
	picture source {
	src: image-set(url({filename}@2x.{ext} 2x high-bandwidth));
	}
	@media screen and (min-width:321px){
	picture source {
	src: image-set(url({filename}-m.{ext}), url({filename}-m@2x.{ext} 2x high-bandwidth));
	}
	}

	@media screen and (min-width:641px){
	picture source {
	src: image-set(url({filename}-l.{ext}), url({filename}-l@2x.{ext} 2x high-bandwidth));
	}
	}

	@media screen and (min-width:1281px){
	picture source {
	src: image-set(url({filename}-x.{ext}), url({filename}-xl@2x.{ext} 2x high-bandwidth));
	}
	}
	</style>
	</head>

	<body>
	<picture alt="Alt tag describing the image represented">
	<source src="photo.jpg"/><!-- This would be your smallest photo -->
	<noscript><img src="photo.jpg" /></noscript>
	</picture>

	//Notes
	//--------------------------------------------------
	This is my proposed solution to displaying images on multiple devices with multiple resolutions as an alternative to:
	https://gist.github.com/2509534

	* Hat-tip to @adamdbradley who has lead the research on this and got me thinking in this direction.
	* picture source selector used in CSS would only apply to source tags inside of the picture element.
	* simplifies authoring picture elements and maintaining them.
	* {filename} would use the file name of the src attribute of the selector, in this case it would be "photo"
	* {ext} would use the file extension of the src attribute of the selector, in this case it would be "jpg"
	* would require the browser to parse the CSS file before loading the src attribute of the source tag in the picture element to prevent duplicate downloads.