Re: responsive imaging

Yes I agree there are a lot of ways to skin this cat. :) I also feel that a
CSS ONLY approach is way way way better...  Call me a purist keeping
styling in the css and meta in the html.

The main argument I've seen against any of these "CSS" approaches would be
to support the argument that from within a  CMS "WYSIWYG" you don't
"usually" add CSS and thus this "Picture" element which essentially hard
codes the src switching logic. Though it could be argued that a inline CSS
block is no different then this Picture Element - Welcome back to the
1990's

I've seen a lot of CSS only approaches for responsive design and have
written a few myself. Though this element is now it the spec. and supported
in a lot of browsers.. Another "option" I suppose.

To date I've designed and developed dozens of responsive sites never really
finding a need for this picture element.

/Rant :) "Fire in the hole!" I know this is again rehashing the discussion
that we've had a few times already.

Paul.


On Tue, Oct 27, 2015 at 8:45 PM, John Stoneman <john@dynamicwebsites.com.au>
wrote:

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