responsive imaging

Hi there,

I'm not sure what the current status of responsive imaging is.  I've tried  
to read your latest blogs but it still looks like there are lots of ideas  
and definite solution yet.

While reading your information, I had a thought and you might like to know  
it.

When push comes to shove, responsive design has been designed to use the  
CSS3 @media query system and leave the html alone.
I know, the html style system is what is actually changing, but  
conceptually the changes only in the styling not the content.

I would suggest that this should also be true for the <img> system too.
To make the <img> have a truly responsive nature, what has to change is  
the URL identified in the [SRC] attribute.
Currently, the <img src="URL"> can be identified in a CSS file via  
img[src=URL].
Combining this into an @media query would give an easy way to identify  
images with responsive imaging and not change the html source at all.  It  
only requires the <img src="URL"/> to have the URL part adjustable in the  
CSS, in the same way that background-image can be changed in the css.

I suggest adding a <img> style attribute called [URL] which allows the  
browser to choose the correct image based on its media type.

example
<img src="myimage.jpg" style="@media (max-width:480px)  
img[src=myimage.jpg] url:myimage-480.jpg;"/>

or
html => <img src="myimage.jpg"/>
css  => @media ( max-width :480px) { img[src=myimage.jpg] {  
url:myimage-480.jpg;}}

By using this technique, you can do everything you want in a natural  
progression.
Old browsers just ignore the new URL style and use the default image file.
New browsers can use the CSS styling to identify which image best suits  
their display and only downloads that image.
No new terminology is required, just the expansion of the URL attribute  
currently use for [background-image] to be made part of the <img>  
attributes.


-- 

regards,
John Stoneman
Dynamic Websites