W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Re: responsive images

From: Anselm Hannemann Novolo Designagentur <anselm@novolo.de>
Date: Sat, 28 Jan 2012 17:30:46 +0100
Cc: Lev Solntsev <greli@mail.ru>, www-style@w3.org, chris@crunchdesign.com.au
Message-Id: <FE95C514-1DDA-4A55-933E-3B4B903BC1D2@novolo.de>
To: Chris Kozlowski <kozlowski.chris@gmail.com>
Right. I didn't saw the draft but it would only work for non-informational images (for design only). 
Then the first two options are still open:
- responsive images within HTML (not CSS).

But then we should change list. This topic will appear shortly in html list, too, when it's approved.

-Anselm

Am 28.01.2012 um 16:37 schrieb Chris Kozlowski:

> Perhaps I'm just not seeing it but I don't think that working draft allows for a responsive image specified by a src attribute in an img tag, eg <img src="resonsive_image.jpg" />. I believe the intent of this is to specify a declarative syntax for referencing an image, the path alias technique I suggested just has the added advantage of being useful in any other place as well. -ck 
> 
> On Sat, Jan 28, 2012 at 9:50 AM, Lev Solntsev <greli@mail.ru> wrote:
> Anselm Hannemann  Novolo Designagentur <anselm@novolo.de> ()    Sat, 28 Jan 2012 17:22:37 +0400:
> 
> [Skipped]
> 
> 
> 3. CSS(4) solution (non-informative content)
> 
> This is how a CSS(4) solution could come up with. It is needed for responsive assets which are only for layout not informational content. And as its a mess to work with media-queries on that, there came up another approach from Chris Kozlowski. Heres the proposed syntax:
> Start with a path override (i used $[path])
> 
> $[myimage.jpg] {
> src-xs: min-device-width(320px) max-device-width(640px) url(myimage_xs.jpg);
> 
> src-m: min-device-width(640px) max-device-width(1024px) url(myimage_m.jpg);
> 
> src-xl: min-device-width(1024px) url(myimage_xsl.jpg);
> }
> using a technique similar to these would result in the images being subject to any preexisting media queries.
> in the case that a suitable match cannot be found it would just request the initial "myimage.jpg"
> HTML markup need not change just style sheet changes so image would still look like:
> you wouldn't have to have to replicate all those attributes in the case of you using myimage.jpg in 15 different img tags
> since it is a resource alias, it would implicitly work for background images
> all paths would be relative from style sheet (as the always are)
> there's the potential to map these into javascript so you could have window.resourceAliases["myimage.jpg"] yield a set of overrides that could be modified (added to and removed from)
> 
> Have you seen the (Last Call) draft of CSS Image Values and Replaced Content Module Level 3?
> http://www.w3.org/TR/2012/WD-css3-images-20120112/
> 
> I believe it already has answers to your requests, especially combined with Media Queries.
> 
Received on Saturday, 28 January 2012 16:31:13 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:49 GMT