Skip to content

Instantly share code, notes, and snippets.

@bjankord

bjankord/gist:4269268

Created December 12, 2012 16:28
Show Gist options
  • Save bjankord/4269268 to your computer and use it in GitHub Desktop.
Save bjankord/4269268 to your computer and use it in GitHub Desktop.
Download ZIP
Picture Element + URI Templates
Raw
gistfile1.html
<head>
<style type="text/css">
@media screen and (min-width:321px){
picture source {
content: attr({filename}-m.{ext}, url);
}
}
@media screen and (min-width:641px){
picture source {
content: attr({filename}-l.{ext}, url);
}
}
@media screen and (min-width:1281px){
picture source {
content: attr({filename}-lx.{ext}, url);
}
}
</style>
</head>
<body>
<!-- This would be the original code used -->
<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>
<!-- If the min-width was 1281 or greater, the code would work as if it were written as below, without needing it to actually be written in the original markup -->
<picture alt="Alt tag describing the image represented">
<source src="photo-xl.jpg"/><!-- URI template in CSS would update/replace content of src value -->
<noscript><img src="photo.jpg" /></noscript>
</picture>
</body>
Raw
gistfile2.md

Notes

The picture element can be verbose.

https://gist.github.com/2509534

Using compressive images can simplify the verbosity of the picture element markup, though this is an idea on how to make it even cleaner.

Note, non of this actually works in any browser, but is an idea of how it could work in the future

About this idea

  • simplifies authoring picture elements and maintaining them.
  • based on idea of using compressive images, no need for seperate hi-resolution images
  • Replaces content with URI templates

{filename} and {ext} based on URI Templates

  • {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"

The biggest issue

  • 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.
  • this might be worked around with a preparse attribute
@grigs
Copy link

grigs commented Dec 20, 2012

There’s no reason the same solution couldn’t be used with a standard image tag if browsers supported it and we could get around the duplicate downloads. Of course, if we could get around the duplicate downloads by having the preparser handle things differently, a whole bunch of options open up to us.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment