My website features an image that is displayed in various sizes depending on the browser dimensions:
- Since the website is responsive, the image's width can range from 200 to over 1000 pixels, depending on the size of the browser window.
- We aim to showcase the image in its native resolution on high-resolution devices, such as Retina displays.
Therefore, we have the image available in three resolutions, named i1.png, i2.png, and i3.png.
My desired approach is as follows:
<img src="i1.png" srcset="i1.png 420w, i2.png 840w, i3.png 1260w" />
In my view, the browser should be able to determine which image to load based on the provided information.
- For a non-Retina device, the browser considers the width of the
<img />element and selects an image that matches or exceeds that width. For example, if the element is 600px wide, it will loadi2.png. - On a Retina device, the browser calculates the required image width by multiplying the
<img />element's width by the device-pixel ratio. For a 2x device and a 600px image, it loadsi3.pngbecause2 x 600 = 1200, necessitating an image width of1260px.
Although the browser generally follows this logic, there are instances where it may load a larger image when a smaller one would suffice.
What criteria does the browser use to determine the appropriate image size to load?
- Does it leverage CSS rules to ascertain the image's displayed width?
- Or does it prioritize the
widthandheightattributes on the<img />tag, if available, over CSS? - How does it handle situations where certain CSS rules are not yet loaded?
It is important to note that I prefer not to utilize the sizes attribute, as it would require extensive media queries for various device-pixel ratios and browser window sizes. The goal is for the browser to independently determine the optimal image based on conditions.
I consulted the Mozilla Docs on this matter. They suggest using 2x descriptors in the srcset attribute if sizes is omitted. However, this approach does not align with my objective of having the browser choose the image based on both device-pixel ratio and responsiveness, rather than solely the former.