5 ms·

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 l

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/ http://paulstamatiou.com/photos/carmel-monterey/

scotth 13y ago
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 http://picture.responsiveimages.org/#examples
- PStamatiou 13y ago
  Ah right, thanks. I had been thinking that picture and srcset were competing.
  - igrigorik 13y ago
    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 http://picture.responsiveimages.org/#examples
kclay 13y ago
Maybe this http://foundation.zurb.com/docs/components/interchange.html http://foundation.zurb.com/docs/components/interchange.html when <picture> isn't supported?
TazeTSchnitzel 13y ago
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.
- igrigorik 13y ago
  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.
TabAtkins 13y ago
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.

scotth 13y ago

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 http://picture.responsiveimages.org/#examples

PStamatiou 13y ago
Ah right, thanks. I had been thinking that picture and srcset were competing.
- igrigorik 13y ago
  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 http://picture.responsiveimages.org/#examples

kclay 13y ago

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

TazeTSchnitzel 13y ago

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.

igrigorik 13y ago
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.

TabAtkins 13y ago

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.