Agfdhyk

For example :

I have thumbnail of image in fixed size block 250x250px.
And three images:

<img sizes  = "250px"

     src    = "image-250w.jpg" 

     srcset = "image-250w.jpg 250w,

               image-500w.jpg 500w,

               image-750w.jpg 750w"

>

So browser pick candidate 250w for device with DPR: 1.0, 500w for device with DPR: 2.0 and 750w for device with DPR: 3.0.

So what the visual difference between these DPR 1,2,3 for human eyes?

I don't have devices(iPhone, etc.) with different DPR to see this. And device emulations can't show me this while I do it on same display.

I did a quick google & found that to simulate DPR effect on a standard display, you need to set the DPR to 2 and scale the viewport by zooming. A 2x asset will continue to look sharp, while a 1x one will look pixelated.

This way you can visually test the difference between different DPR values.

For further reference, you can see this https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#device_pixel_ratio_dpr