2

As far as I can tell, the srcset and sizes attributes focus more on applying a suitably scaled image for the device’s size and resolution.

There appears to be no facility to use these attributes to select an alternative image based on the screen size, such as one cropped or oriented differently.

Is this a correct understanding of the situation? Does that mean we will have to wait for the picture element to be widely supported for this task?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Manngo
  • 14,066
  • 10
  • 88
  • 110

2 Answers2

4

You are correct that srcset and sizes are only there to provide different resolution alternatives to the "same" image - there's no guaranty which resource will be picked.

If you want to provide cropped or proportionally different alternatives that are guarantied to match your responsive breakpoints, then <picture> is what you're looking for.

As far as support goes, <picture> is fully supported in Chrome and Firefox, soon to be supported in MS Edge, and not yet supported in Safari 9. In the mean time, you could use picturefill to add that support to non-supporting browsers.

Yoav Weiss
  • 2,220
  • 4
  • 17
  • 22
  • `` is the way to go then. I’ve written my own simple gap filler for that. I’m not sure how useful the `srcset` will be since it appears to be in competition with ``. – Manngo Sep 30 '15 at 21:59
  • Most cases only require `srcset`. `` should be used only when really necessary: https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/ – Nicolas Hoizey Mar 24 '17 at 09:26
-1

Personally, I have used the w-descriptors and srcset to display a variety of images based on the width of the available space.

It might seem rather crude but it works for me - I edit the image so that it becomes "art-directed" for a number of common breakpoints - turning it into effectively a number of different images.

Then, based on the size of the agent's screen, the browser will almost always choose the image which I have previously determined to be the most suitable.

For my approach, I did not use size, picture or any other property.

A code as simple as this appears to work:

<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
HubCap
  • 323
  • 5
  • 14
  • As far as I can tell, this is probably not in the spirit of the specification. Given the fact that the algorithm used to decide which image to use is not strictly specified, I can see the potential for this backfiring. – Manngo Feb 15 '16 at 01:49
  • With your approach, you tell the browser that the image will be show at 100% of the viewport width (default value of sizes is 100vw). It might be the case, ok. But the 3200 pixels wide image will be downloaded for 3200 pixels wide screens with 1 density, 1600 pixels wide screens with 2 density, or 800 pixels wide screens with 4 density. So it doesn't work as you thought, I believe. – Nicolas Hoizey Sep 01 '16 at 22:11