srcset, do I still need to write "1x,2x,3x" if I've specified the width of each image?

html srcset
Rick picture Rick · Feb 20, 2017 · Viewed 8k times · Source

should I write this

srcset="small.jpg 1x 500w, medium.jpg 2x 1000w, large.jpg 3x 1500w"

or this 

srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"

are the two expression the same?

Answer

dsluis picture dsluis · May 23, 2018

Your first code block is incorrect, see this MDN documentation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-srcset

A srcset attribute can contain either width descriptors(w) or pixel density descriptors (ex. 2x), but not a combination of both.

The second code block is correct.

Side note: the browser will automatically take into account the device's pixel density when choosing which of the three images to download.

Related questions

Is there a srcset equivalent for css background image

img with srcset attribute looks like a great way of doing responsive images. Is there an equivalent syntax that works in css background-image property? HTML <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"> …

Read More
Is it possible to see which srcset image a browser is using with browser developer tools

I've been trying to see which srcset image my browser is using via the browsers developer tools, but apart from using the network tab to see which image it fetches i can't tell. Using the network tab would usually be …

Read More
Why is React.js removing the srcset tag on <img />?

When I have the srcset property on my <img /> tag, why doesn't it show up in the browser? It appears as through React.js is stripping it out. <img src="/images/logo.png" srcset="/images/logo-1.5x.…

Read More