Description
Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
The srcset attribute allows the browser the ability to choose the appropriate image for a given rendering situation. For example: srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 200w" tells the browser to display the small, medium or large .jpg graphic depending on the client's resolution. The way the browser calculates which graphic to use is quite interesting:
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
If the client's resolution is Retina x1, the calculation closer to 1 will be selected by the browser.
If the resolution is Retina x2, the browser will use the closest resolution above the minimum. Meaning it will not choose the 1.5 resolution becasue it is greater than 1. The browser would then choose the image closer to 2 which is 3.1.
So, srcset makes the browser a bit smarter by ignoring smaller graphics and using the most appropriate img based on math.