1

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.

Josh Lee
  • 171,072
  • 38
  • 269
  • 275
ratojakuf
  • 708
  • 1
  • 11
  • 21

1 Answers1

3

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

AssaultKoder95
  • 188
  • 1
  • 9