September 22nd 2012

Responsive <img />

If we treated the src attribute like we treat CSS styles, we could have responsive images that work with existing CSS media queries.

The "style" would be called source and the value would be the path to the image, relative to the CSS file. 

img#logo    { source:url('images/logo.png'); max-width:100%; }

@media only screen and (max-width: 300px) {
    img#logo    { source:url('images/logo-300.png'); }
}

Inline, you'd write...

We probably shouldn't be adding tag-specific styles to CSS, but maybe a jQuery plugin or something?