Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

First draft of HTML img srcset for responsive images

whatwg.org

Post reply on HN
Print view View original

21–30 of 79 posts

Re: First draft of HTML img srcset for responsive images

#21

Post by othermaciej »

codeka wrote: post #20
necolas wrote: post #8

Previous discussion about this by developers (170+ comments) who have been discussing Responsive Images in a W3C Community Group - http://www.w3.org/community/respimg/2012/05/11/respimg-propo...

The only problem with the element is how to address backwards compatibility? The srcset attribute is backwards compatible because old browsers will just ignore srcset and use the src, but old browsers will ignore the element completely -- how do you get something that works for older browsers but also works for new browsers as well?

The approach also has a sort of solution for degrading gracefully in older browsers. You can nest an in your . Newer browsers are supposed to ignore it, older browsers would ignore the surrounding element instead.

I think there are other good reasons to prefer the srcset approach, but not this one. The email here provides motivation: http://lists.w3.org/Archives/Public/public-whatwg-archive/20...;

Re: First draft of HTML img srcset for responsive images

#22

Post by othermaciej »

tferris wrote: post #16

Better than this specification hassle is this solution: The browser should send the density of the screen in ppi (calculated by the screen resolution and the screen information provided by the OS) together with all the other standard stuff like OS, screen resolution, etc. With this information the server can decide which images to send.

Screen PPI (in physical pixels per physical inch) is not the relevant consideration - device pixels per CSS pixel being something other than 1 is the case you care about. And the browser needs to know the intended resolution of the image so it can tell whether to downscale it.

Re: First draft of HTML img srcset for responsive images

#23

Post by othermaciej »

user24 wrote: post #18
alexchamberlain wrote: post #2

I like the concept, but the syntax feels awkward, clunky and very specific. Why not repurpose the media attribute from style tags to all other tags?

> the syntax feels awkward, clunky and very specific Yeah, stuff like "2x 100w" looks a bit like magic numbers[1] Also there's potential for confusion in 'x' - does it mean X as in a co-ordinate i.e. width, or zoom? I'd rather see something more verbose like this: Yes it's more wordy to write, but you read code more than you write it so it makes sense to optimise for readability over byte-shaving. [1] http://catb.org…

There are certainly other ways to do it, but this particular way won't work. was historically a "void element" in past versions of HTML, and past browsers, so it can never have child elements.

Re: First draft of HTML img srcset for responsive images

#24

Post by annevk »

user24 wrote: post #18
alexchamberlain wrote: post #2

I like the concept, but the syntax feels awkward, clunky and very specific. Why not repurpose the media attribute from style tags to all other tags?

> the syntax feels awkward, clunky and very specific Yeah, stuff like "2x 100w" looks a bit like magic numbers[1] Also there's potential for confusion in 'x' - does it mean X as in a co-ordinate i.e. width, or zoom? I'd rather see something more verbose like this: Yes it's more wordy to write, but you read code more than you write it so it makes sense to optimise for readability over byte-shaving. [1] http://catb.org…

We cannot change the way is parsed. See e.g. http://software.hixie.ch/utilities/js/live-dom-viewer/ for the tree you get with that markup. It's not what you expect.

Re: First draft of HTML img srcset for responsive images

#25

Post by othermaciej »

alexchamberlain wrote: post #14
annevk wrote: post #11

Earlier quoted context omitted.

Querying the pixel density of the device is not the same as describing the pixel density of the resource. This has been a common misconception in the discussion of this feature.

Apologies - I misunderstood the proposal. However, what is the pixel density of a PNG?

What it's representing is not necessarily an intrinsic property of the image but rather the intended pixel density for presentation. Say I have a 600x200 PNG which fits my design for normal resolution displays where 1 CSS pixel = 1 device pixel (which is most current laptop screens, for instance). But then I'd like to take advantage of the extra resolution on a device that displays at 1 CSS pixel = 2 device pixels, such as a retina display iPad. So then I get a 1200x400 version of the same image (perhaps both downscaled from a super high res original) and serve it as the 2x image. It will take the same logical space in the layout but provide extra quality on a higher resolution display. There's no need to do anything special to the PNG.

Re: First draft of HTML img srcset for responsive images

#27

Post by ZenPsycho »

This is silly and makes things way more complicated than they need to be.

We have HTML tags, to which we can apply attributes directly via blah=blah syntax

Or we can add attributes by making a style attribute, and using css syntax inside of it.

Or we can have a space separated list of class names, and have attributes applied to an element externally by a CSS stylesheet.

Or we can have an ID, and apply attributes using javascript.

We can apply attributes with http headers, and the browser can negotiate the resource with http accepts and quality parameters.

We have video, audio, and object tags that can all have child elements.

We have query parameters and fragment selectors, and path parameters, and post parameters and accept parameters for negotiating and selecting content from a server. (Designed to include ampersands which have to be entity encoded when used in HTML!)

We have all these sophisticated overlapping complicated mechanisms for attaching attributes to elements in a webpage. We have huge pieces of software for parsing through this poorly thought through mess.

But no, not a single one of these is good enough for this problem. LET'S INVENT A NEW SYNTAX AND ADD TO THE HEAP OF IDIOCY.

Re: First draft of HTML img srcset for responsive images

#28

Post by necolas »

othermaciej wrote: post #21
codeka wrote: post #20

Earlier quoted context omitted.

The only problem with the element is how to address backwards compatibility? The srcset attribute is backwards compatible because old browsers will just ignore srcset and use the src, but old browsers will ignore the element completely -- how do you get something that works for older browsers but also works for new browsers as well?

The approach also has a sort of solution for degrading gracefully in older browsers. You can nest an in your . Newer browsers are supposed to ignore it, older browsers would ignore the surrounding element instead. I think there are other good reasons to prefer the srcset approach, but not this one. The email here provides motivation: http://lists.w3.org/Archives/Public/public-whatwg-archive/20... ;

Unfortunately, at the time when Ian didn't seem to care about the issue of responsive images, I asked him about the possibility of using the existing `` element and he said it was pointless to try and modify existing image parsing. Forget it.

Now, he decides that actually this is the way to go. Frustrating.

For reference, in the email linked above, Ian Hickson said:

> So why not just give the UA the characteristics and a template to use to build the file names itself? That way we still give the UA all the same information, but it is much less verbose and still solves all the same use cases. Thus:

Re: First draft of HTML img srcset for responsive images

#29

Post by alexchamberlain »

ars wrote: post #19
tferris wrote: post #16

Better than this specification hassle is this solution: The browser should send the density of the screen in ppi (calculated by the screen resolution and the screen information provided by the OS) together with all the other standard stuff like OS, screen resolution, etc. With this information the server can decide which images to send.

No, this won't work in the wild. It breaks caching completely. It requires scripting just to serve an image. The same url can have different data - imagine if you resume downloading a file, only to suddenly have a different file.

I disagree. Caches would have to be intelligent. Remember they already have to pay attention to language headers etc. URLs represent a conceptual resource, rather than a single file.

Re: First draft of HTML img srcset for responsive images

#30

Post by alexchamberlain »

othermaciej wrote: post #25
alexchamberlain wrote: post #14

Earlier quoted context omitted.

Apologies - I misunderstood the proposal. However, what is the pixel density of a PNG?

What it's representing is not necessarily an intrinsic property of the image but rather the intended pixel density for presentation. Say I have a 600x200 PNG which fits my design for normal resolution displays where 1 CSS pixel = 1 device pixel (which is most current laptop screens, for instance). But then I'd like to take advantage of the extra resolution on a device that displays at 1 CSS pixel = 2 device pixels, s…

Awesome reply. I now understand. This is still a property of the media though.
Post reply on HN