htmlresponsive-designsrcsetresponsive-imagespicture-element

HTML5 srcset, sizes & Art Direction


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?


Solution

  • 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.