Response images with srcset and sizes
Documentation and examples
General and testing notes
-
The zoom level can affect device pixel ratio. If you notice the device pixel ratio isn't what you expect check
if you're zoomed in.
-
The OS settings can affect the device pixel ratio. For example in Windows under "Display / Scale & Layout /
Change the size of text, apps, and other items" you can set the text size to be greater than 100%. This causes
the device pixel ratio to increase a proportionate amount.
-
DevTools device size and DPR emulation can give inaccurate results when testing responsive images. You're better
off testing by resizing the actual browser window and getting real devices with different DPRs.
-
If you use the multiple responsive images on the same page, and they load the same images, it appears that
Chrome
will cache the results and re-use them if possible. For example if you had an image with this srcset:
srcset="600x600.png 1x, 1200x1200.png 2x, 1500x1500.png 3x"
on a device with a DPR of 1, you would
expect it to load the 600x600.png image. But, if another image has loaded 1500x1500.png, that will be used
instead,
presumably as it is higher quality and is loaded anyway for the other image.
References