HTML5 srcset, sizes & Art Direction

Question

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?

Answer 1

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.

Answer 2

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" />