Correct syntax for srcset attribute

I’ve read a few articles, but am not clear on the correct syntax of the srcset attribute. I am currently using this:

 <a href='#'><img src="big.jpg"  srcset="smartphone.jpg 640w, medium.jpg 1024w, big.jpg 10000w"></a>

Is the big image correctly set is the srcset attribute? Is this the best way to assign them for maximum compatibility?


I did a quick Google search for srcset (I’ve never used it) and found this.



Neither have I.

It looks to be more to do with screen resolution than it does viewport dimensions.

I kind of got that impression, too. But aren’t they both related to responsive design?



Yes, some devices have different number of pixels per inch so using a more appropriate image could improve the quality.
(at least I think that’s it. I think @ralphm might better know)

Srcset attribute - LS

Allows authors to define various image resources and “hints” that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc).


There is another article here.
And part two which is about Picture Element which may be useful too.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.