RE: responsive imaging

Hi John,

Thank you so much for your thoughts. There are definite solutions that exist and are now implemented in all major browsers, with the exception of <picture> barely missing the ship date of iOS9.
If you want a good overview of how to utilize, srcset, srcset with sizes, and the picture element - here is Yoav's overview: https://dev.opera.com/articles/native-responsive-images/
Please let us know if you have any questions.

Thanks,
Greg

From: John Stoneman [mailto:john@dynamicwebsites.com.au]
Sent: Tuesday, October 27, 2015 5:46 PM
To: public-respimg@w3.org
Subject: 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;"/<url:myimage-480.jpg;%22/>>

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

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<http://www.dynamicwebsites.com.au>