Comment by PStamatiou | Hacker News Reader

Comment by PStamatiou | Hacker News Reader

Does this only work for device resolution needs - ie, load an @2x version in the same image width/height for 2x hi dpi displays? Versus progressively download larger images the more the user widens the display. I actually care a bit less about loading huge images for 4k or other 'retina' displays than I do just showing a 1000px image instead of a 500px (note, not a 1000px image in a 500px container for high dpi needs) image when the user expands the window, etc.

currently very hackily checking browser width (and keeping in mind of image is used in a grid or just a full-width image on its own) to rewrite all data-src when the page loads and before lazy loading has kicked in (to prevent double image downloading) on my photoblog:

http://paulstamatiou.com/photos/carmel-monterey/

I believe the element that you're looking for is <picture>, which will be shipping with a future version of Chrome.

http://picture.responsiveimages.org/#examples

Ah right, thanks. I had been thinking that picture and srcset were competing.

They're complementary. <picture> uses subset of original srcset spec to meet the "resolution switching" use case - e.g. see Example 1 [1]. If you want to select an asset based on viewport width, then you'd either use "sizes" attribute on picture, or a combination of srcset + sources + sizes.

[1] http://picture.responsiveimages.org/#examples

The srcset attribute by itself can't do what you ask; it only lets you specify multiple resolutions of an image, all (intended to be) the same size.

But wait for implementation to finish, and you'll be able to use the sizes='' attribute on the <img>, or the full <picture> deal, and that'll give you more control, letting you load a smaller image if the image would take up less space.

Maybe this http://foundation.zurb.com/docs/components/interchange.html when <picture> isn't supported?

I'd also be interested to know if it would use the 2x version if I zoom in the page 200% on a non-HiDPI machine.

This behavior is not defined by the spec / left to the UA. At the moment, I don't believe either WebKit or Blink implementation will swap the image on (desktop) zoom.

Reply on news.ycombinator.com