Chrome 34: Responsive Images and Unprefixed Web Audio

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by PStamatiou on Thursday February 27, 2014 @03:47PM (#7314937)

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/

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by scotth on Thursday February 27, 2014 @03:49PM (#7314951)

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

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by PStamatiou on Thursday February 27, 2014 @03:49PM (#7314959)

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

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by igrigorik on Friday February 28, 2014 @02:02AM (#7317548)

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

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by TabAtkins on Friday February 28, 2014 @02:47AM (#7317625)

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.

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by kclay on Thursday February 27, 2014 @03:56PM (#7314998)

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

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by TazeTSchnitzel on Thursday February 27, 2014 @05:27PM (#7315683)

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.

[ Parent | on HN ]

Re:Chrome 34: Responsive Images and Unprefixed Web Audio by igrigorik on Friday February 28, 2014 @02:04AM (#7317553)

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.

[ Parent | on HN ]