Shoora
5/2/2012 - 12:57 AM

Picture Source src modification through CSS image-set and URI Templates

Picture Source src modification through CSS image-set and URI Templates

gistfile1.html
content_copyfile_download
<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.