add html-attribute for "responsive images"

[Anselm Hannemann - Novolo Designagentur]

Hi all,

Paul Irish said I should mention my problems here. So I will:

As we now have the possibility of creating fluid and responsive layouts in several ways we have a problem with images.
There's currently no good feature to implement something like responsive images which adapt to the different device-resolutions. We only can implement one image with one resolution scaling-up and down.
Of course the best solution would be to have a file format supporting this feature by offering diff. quality like .sid format does. But it's very unlikely to have such a feature in the next few years.
So I thought of a simple html-attribute to work with media-queries and something like "media-size-sources" to provide different images fitting to the device-resolution. New browsers can read the new attributes but even old browsers degrade gracefully with the basic src attrobute.
I shared the code in a gist here: https://gist.github.com/1158855 and will write it down here, too:

<!-- backwards compatible solution -->
<!-- the browser should read media-query and then download the right file for the actual screen size -->
<img src="http://cdn.url.com/img/myimage_xs.jpg" media-xs="(min-device-width:320px and max-device-width:640px)" media-src-xs="http://cdn.url.com/img/myimage_xs.jpg"  media-m="(min-device-width:640px and max-device-width:1024px)" media-src-m="http://cdn.url.com/img/myimage_m.jpg"  media-xl="(min-device-width:1024px)" media-src-xl="http://cdn.url.com/img/myimage_xsl.jpg" />

Tried several other ways, too, (you can see in versions) but this seems to be the best. What do you think about providing a way to use responsive media through media-queries? For now there are only some JS-Cookie solutions which are not a good approach and are very unflexible.

kindest regards,
-Anselm

[Anne van Kesteren-2]

On Wed, 24 Aug 2011 10:49:24 +0200, Anselm Hannemann - Novolo  
Designagentur <anselm@...> wrote:
> Tried several other ways, too, (you can see in versions) but this seems  
> to be the best. What do you think about providing a way to use  
> responsive media through media-queries? For now there are only some  
> JS-Cookie solutions which are not a good approach and are very  
> unflexible.

It's too much complexity for a niche problem. Better to just use a  
high-resolution image and downscale it using the height/width attributes.

See http://www.webkit.org/blog/55/high-dpi-web-sites/ for some advice.


--
Anne van Kesteren
http://annevankesteren.nl/

[Karl Dubost-5]

Anne,

Le 30 août 2011 à 10:21, Anne van Kesteren a écrit :
> It's too much complexity for a niche problem.

It is not a niche problem.

* It is in fact an issue for being able to make the website responsive on Mobile devices in low banwidth.
* It has also the impact that you want to send different type of images for different types of screen resolutions a full fledged logo or a logo icon depending on the size of the screen.

It is easy to do right now with background images, but not at all for images in <img/> element.

There was a thread about this recently in May 2011.
http://lists.w3.org/Archives/Public/public-html/2011May/thread.html#msg386

If you want example of Web sites doing responsive design
http://mediaqueri.es/


--
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

[Anne van Kesteren-2]

On Tue, 30 Aug 2011 16:31:59 +0200, Karl Dubost <karld@...> wrote:
> * It is in fact an issue for being able to make the website responsive  
> on Mobile devices in low banwidth.

The mobile devices are the ones with the high-resolution displays.


--
Anne van Kesteren
http://annevankesteren.nl/

[Julian Reschke]

On 2011-08-30 16:51, Anne van Kesteren wrote:
> On Tue, 30 Aug 2011 16:31:59 +0200, Karl Dubost <karld@...> wrote:
>> * It is in fact an issue for being able to make the website responsive
>> on Mobile devices in low banwidth.
>
> The mobile devices are the ones with the high-resolution displays.

Speak for your own device :-)

[Karl Dubost-5]

Le 30 août 2011 à 10:51, Anne van Kesteren a écrit :
> On Tue, 30 Aug 2011 16:31:59 +0200, Karl Dubost <karld@...> wrote:
>> * It is in fact an issue for being able to make the website responsive on Mobile devices in low banwidth.
>
> The mobile devices are the ones with the high-resolution displays.

And as I explained elsewhere it is not a question of high/low-resolution only, but about interaction contexts. Different images for different surface sizes.

Desktop: Show a full photo of Anne van Kesteren riding on a plane 1024*250 px
Tablet: Show the photo a closer shot of the plane (cowboy frame)  400*150 px
Mobile: Show a portrait of Anne with his leather pilot helmet 100x100 px



--
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

[Anne van Kesteren-2]

On Tue, 30 Aug 2011 17:18:38 +0200, Karl Dubost <karld@...> wrote:

> Le 30 août 2011 à 10:51, Anne van Kesteren a écrit :
>> On Tue, 30 Aug 2011 16:31:59 +0200, Karl Dubost <karld@...> wrote:
>>> * It is in fact an issue for being able to make the website responsive  
>>> on Mobile devices in low banwidth.
>>
>> The mobile devices are the ones with the high-resolution displays.
>
> And as I explained elsewhere it is not a question of high/low-resolution  
> only, but about interaction contexts. Different images for different  
> surface sizes.
>
> Desktop: Show a full photo of Anne van Kesteren riding on a plane  
> 1024*250 px
> Tablet: Show the photo a closer shot of the plane (cowboy frame)  
> 400*150 px
> Mobile: Show a portrait of Anne with his leather pilot helmet 100x100 px

That seems like different content. We do not really have a good solution  
for client-side content adaptation.


--
Anne van Kesteren
http://annevankesteren.nl/

[Bronislav Klučka]

On 30.8.2011 17:23, Anne van Kesteren wrote:

> On Tue, 30 Aug 2011 17:18:38 +0200, Karl Dubost <karld@...> wrote:
>> Le 30 août 2011 à 10:51, Anne van Kesteren a écrit :
>>> On Tue, 30 Aug 2011 16:31:59 +0200, Karl Dubost <karld@...>
>>> wrote:
>>>> * It is in fact an issue for being able to make the website
>>>> responsive on Mobile devices in low banwidth.
>>>
>>> The mobile devices are the ones with the high-resolution displays.
>>
>> And as I explained elsewhere it is not a question of
>> high/low-resolution only, but about interaction contexts. Different
>> images for different surface sizes.
>>
>> Desktop: Show a full photo of Anne van Kesteren riding on a plane
>> 1024*250 px
>> Tablet: Show the photo a closer shot of the plane (cowboy frame)  
>> 400*150 px
>> Mobile: Show a portrait of Anne with his leather pilot helmet 100x100 px
>
> That seems like different content. We do not really have a good
> solution for client-side content adaptation.
>
>

But we do.... using CSS height, width and background-image based on
media query for some div container... this could solve this problem from
visual point of view... but passing semantic (not decorative) image
management to CSS is not correct solution...

Brona

[Karl Dubost-5]

Anselm,
(setting reply-to on www-style)

Seen this today, to remind people that it is not just
something up in the air. People need it.
http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/

I wonder if it could be handled by CSS in fact.
I guess Anselm, you could ask there.
On the www-style mailing-list, Charles proposed [1]

        content: url(img.jpg) replaced;

I'm not sure I fully understand the proposal
but we can imagine something that could fit nicely
with the CSS Generated Content Module Level 3 [2]

<img class="responsive" src="http://example.org/foo" alt="wiizz"/>

and then the CSS


@media  screen and (min-width:550px) and (max-width:960px) {
   img.responsive {
        url(http://example.org/foobis) replaced;}
   }
@media  screen and (min-width:240px) and (max-width:549px) {
   img.responsive {
        url(http://example.org/footer) replaced;}
   }


[1]: http://www.w3.org/mid/4E5D4A46.7000103@...
[2]: http://dev.w3.org/csswg/css3-content/#replacedContent


--
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

[Bjartur Thorlacius]

Bottom (top?) line: User agents should negotiate an appropriate
message-body size using HTTP. Sending an accept-size (or some such)
could solve both the problem of high resolution photography and lengthy
documents. The amount of split articles ("Click here to go to the next
page / page 4") and long search results show clear demand.

Þann mið 31.ágú 2011 21:32, skrifaði Karl Dubost:
> Anselm,
> (setting reply-to on www-style)
>
> Seen this today, to remind people that it is not just
> something up in the air. People need it.
> http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/
>
> I wonder if it could be handled by CSS in fact.
Different technologies seem appropriate depending on the relation
between the document and the images.
        Use Case A
Multiple representations of a resource may exist, where all can be
deduced from the original (e.g. by downsampling). Doing the deducing on
the server is an optimization to save bandwidth.
        Proposed Solutions
1) Nest objects
2) Negotiate content serverside as per HTTP
3) Negotiate content clientside as per HTTP

        Use Case B
An article might link to (directly or, theoretically, via a
text/uri-list) to a number of non-critical "asides" (i.e. images to rest
your eyes on, background music, etc), that may be omitted, but are in no
way the same resource.
        Proposed Solutions
1) Use <link>s or <a>s with an appropriate relation specified
2) Use your favorite linking element (be it a, area, object, img, audio,
video, link, a future media element not yet specified, or an old one not
yet deprecated) in an aside.
3) Add the rel attribute to object, and use instead of <a> in 1. See A.1
        Expected Rendering
User agents are to render zero or more of the tolinked resources,
omitting none, some or all of the resources completely from the output
viewport, or rendered only on demand.

       

> I guess Anselm, you could ask there.
> On the www-style mailing-list, Charles proposed [1]
>
> content: url(img.jpg) replaced;
>
> I'm not sure I fully understand the proposal
> but we can imagine something that could fit nicely
> with the CSS Generated Content Module Level 3 [2]
>
> <img class="responsive" src="http://example.org/foo" alt="wiizz"/>
>
> and then the CSS
>
>
> @media  screen and (min-width:550px) and (max-width:960px) {
>     img.responsive {
> url(http://example.org/foobis) replaced;}
>     }
> @media  screen and (min-width:240px) and (max-width:549px) {
>     img.responsive {
> url(http://example.org/footer) replaced;}
>     }

And allocate every image a class, and every sample a rule in a style
sheet? Maybe, if the images are decorative, but I think you can come up
with a more clever solution using media fragments (either standardized,
or implemented per site by binding media queries to URI templates).

[Charles Pritchard-2]

On 8/31/2011 2:32 PM, Karl Dubost wrote:

> Anselm,
> (setting reply-to on www-style)
>
> Seen this today, to remind people that it is not just
> something up in the air. People need it.
> http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/
>
> I wonder if it could be handled by CSS in fact.
> I guess Anselm, you could ask there.
> On the www-style mailing-list, Charles proposed [1]
>
> content: url(img.jpg) replaced;

Oh, that's not my proposal, that syntax was brought up by Tab Atkins.

It's already available. I was looking into how to handle <img [no
source] style="background: url(..)" />
It may work with the following, now, or at some point in the future:
<img style="content: replaced; background-color: ...;" />

I'd proposed visibility: content-hidden; to be used with background and
border.

> I'm not sure I fully understand the proposal
> but we can imagine something that could fit nicely
> with the CSS Generated Content Module Level 3 [2]
>
> <img class="responsive" src="http://example.org/foo" alt="wiizz"/>
>
> and then the CSS
>
>
> @media  screen and (min-width:550px) and (max-width:960px) {
>     img.responsive {
> url(http://example.org/foobis) replaced;}
>     }
> @media  screen and (min-width:240px) and (max-width:549px) {
>     img.responsive {
> url(http://example.org/footer) replaced;}
>     }
>
>
> [1]: http://www.w3.org/mid/4E5D4A46.7000103@...
> [2]: http://dev.w3.org/csswg/css3-content/#replacedContent

Keep in mind that min-device-pixel-ratio is also useful to monitor.
Set image dimensions in the css style to prevent reflowing.

[Anselm Hannemann - Novolo Designagentur]

Am 31.08.2011 um 23:32 schrieb Karl Dubost:

> Anselm,
> (setting reply-to on www-style)
>
> Seen this today, to remind people that it is not just
> something up in the air. People need it.
> http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/
>
> I wonder if it could be handled by CSS in fact.
> I guess Anselm, you could ask there.
> On the www-style mailing-list, Charles proposed [1]
>
> content: url(img.jpg) replaced;
>
> I'm not sure I fully understand the proposal
> but we can imagine something that could fit nicely
> with the CSS Generated Content Module Level 3 [2]
>
> <img class="responsive" src="http://example.org/foo" alt="wiizz"/>
>
> and then the CSS
>
>
> @media  screen and (min-width:550px) and (max-width:960px) {
>   img.responsive {
> url(http://example.org/foobis) replaced;}
>   }
> @media  screen and (min-width:240px) and (max-width:549px) {
>   img.responsive {
> url(http://example.org/footer) replaced;}
>   }
>
>
> [1]: http://www.w3.org/mid/4E5D4A46.7000103@...
> [2]: http://dev.w3.org/csswg/css3-content/#replacedContent
>
>
> --
> Karl Dubost - http://dev.opera.com/
> Developer Relations & Tools, Opera Software
>

How would you do this with a CMS? How to do with dynamic content when serving the CSS from a cookieless, static domain as it's best practice for performance.
From my point of view it can't work with just CSS. When you look to my proposed gist-solution you can see in history that I've already dealt with several other approaches.
Last is the only one that could really work that I know right now.

[Anselm Hannemann - Novolo Designagentur]

Am 01.09.2011 um 01:46 schrieb Charles Pritchard:

> On 8/31/2011 2:32 PM, Karl Dubost wrote:

> Oh, that's not my proposal, that syntax was brought up by Tab Atkins.
>
> It's already available. I was looking into how to handle <img [no source] style="background: url(..)" />
> It may work with the following, now, or at some point in the future:
> <img style="content: replaced; background-color: ...;" />
>
> I'd proposed visibility: content-hidden; to be used with background and border.

Why should we use inline-styles once again? Why should we load content images with CSS? What about accessibility? Where to add alt-attribute / title / ARIA etc.?
-Anselm

[Charles Pritchard-2]

On 9/1/2011 1:30 AM, Anselm Hannemann - Novolo Designagentur wrote:

> Am 01.09.2011 um 01:46 schrieb Charles Pritchard:
>
>> On 8/31/2011 2:32 PM, Karl Dubost wrote:
>
>> Oh, that's not my proposal, that syntax was brought up by Tab Atkins.
>>
>> It's already available. I was looking into how to handle <img [no
>> source] style="background: url(..)" />
>> It may work with the following, now, or at some point in the future:
>> <img style="content: replaced; background-color: ...;" />
>>
>> I'd proposed visibility: content-hidden; to be used with background
>> and border.
>
> Why should we use inline-styles once again? Why should we load content
> images with CSS? What about accessibility? Where to add alt-attribute
> / title / ARIA etc.?
>

They're CSS styles, I'm using inline for demonstrative purposes.
I'd load images because the CSS <image> spec is more powerful than the
HTML image spec,
offering things like -webkit-canvas (soon -element), various background
sizing and fitting routines.

Accessibility is maintained exactly as it was, you'd put the alt
attribute in the image tag.

[Karl Dubost-5]

Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit :
> Why should we use inline-styles once again? Why should we load content images with CSS? What about accessibility? Where to add alt-attribute / title / ARIA etc.?

Not exactly what is happening.
There is a URI with an image without a javascript and/or CSS activated.
The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries.



--
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

[Ashley Sheridan-3]

On Tue, 2011-09-06 at 07:15 +0200, Karl Dubost wrote:

> Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit :
> > Why should we use inline-styles once again? Why should we load content images with CSS? What about accessibility? Where to add alt-attribute / title / ARIA etc.?
>
> Not exactly what is happening.
> There is a URI with an image without a javascript and/or CSS activated.
> The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries.
>
>
>


Yes, but the point is, the alternative images you may want to display
for visitors on a smaller screen/resolution could be completely
different from the original image (cropped shot not showing all the
detail, etc). Ergo, you lose the accessibility because you now can't
textually represent it in the alt tag.

--
Thanks,
Ash
http://www.ashleysheridan.co.uk

[Anselm Hannemann - Novolo Designagentur]

Am 06.09.2011 um 08:36 schrieb Ashley Sheridan:

> On Tue, 2011-09-06 at 07:15 +0200, Karl Dubost wrote:
>>
>> Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit :
>> > Why should we use inline-styles once again? Why should we load content images with CSS? What about accessibility? Where to add alt-attribute / title / ARIA etc.?
>>
>> Not exactly what is happening.
>> There is a URI with an image without a javascript and/or CSS activated.
>> The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries.
>
> Yes, but the point is, the alternative images you may want to display for visitors on a smaller screen/resolution could be completely different from the original image (cropped shot not showing all the detail, etc). Ergo, you lose the accessibility because you now can't textually represent it in the alt tag.

Right you hit the nail on the head. And, by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one building a dynamic site?

[Karl Dubost-5]

Ashley, Anselm,

Le 6 sept. 2011 à 08:36, Ashley Sheridan a écrit :
> Yes, but the point is, the alternative images you may want to display for visitors on a smaller screen/resolution could be completely different from the original image (cropped shot not showing all the detail, etc).

Yes already happening with background images with not text alt at all. So let's say it is progress.

Le 6 sept. 2011 à 09:07, Anselm Hannemann - Novolo Designagentur a écrit :
> by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one building a dynamic site?

could you clarify?


--
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

[Anselm Hannemann - Novolo Designagentur]

Am 06.09.2011 um 12:49 schrieb Karl Dubost:

> Ashley, Anselm,
>
> Le 6 sept. 2011 à 08:36, Ashley Sheridan a écrit :
>> Yes, but the point is, the alternative images you may want to display for visitors on a smaller screen/resolution could be completely different from the original image (cropped shot not showing all the detail, etc).
> Yes already happening with background images with not text alt at all. So let's say it is progress.
>
> Le 6 sept. 2011 à 09:07, Anselm Hannemann - Novolo Designagentur a écrit :
>> by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one building a dynamic site?
>
> could you clarify?

How exactly can I create a dynamic CMS website today with responsive images?
I could manage my CSS file with my CMS which most of them don't support. I could minify the CSS on the fly but in reality and from performance view it's recommended to serve a static css file from a cookieless domain (which is another than where my CMS is located). If I would use a CDN additionally how should I change images on the fly? And, a client wants to change an image in a WSIWYG editor not in a raw css file. We won't either as he can destroy the entire stylesheet. I hope you now understand better what I mean.

-Anselm

[Bjartur Thorlacius]

> How exactly can I create a dynamic CMS website today with responsive images?
> I could manage my CSS file with my CMS which most of them don't support. I could minify the CSS on the fly but in reality and from performance view it's recommended to serve a static css file from a cookieless domain (which is another than where my CMS is located). If I would use a CDN additionally how should I change images on the fly? And, a client wants to change an image in a WSIWYG editor not in a raw css file. We won't either as he can destroy the entire stylesheet. I hope you now understand better what I mean.
But he won't edit "the entire stylesheet"; he'll create a new one.