CODEWITHSUNDEEP
htmlsrcset
Rick
Rick

Reputation: 7516

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

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?

Upvotes: 8

Views: 24866

Answers (2)

dsluis
dsluis

Reputation: 176

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.

Upvotes: 10

Warden Valentine
Warden Valentine

Reputation: 81

It looks like the latter of the two (based on this article): https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

CSS-Tricks are usually pretty good at updating their content, in case things changes. I can see that his article are from 2014, which is old, but now crazy-old.

But if it was me, then I would try both, use Google Chrome, use the 'Toggle Device Toolbar' (Google that, if you don't know what it is), and then inspect the elements to see if it works as you want it to work.

Upvotes: 2

Related Questions