DPR: 1.0、DPR: 2.0、DPR: 3.0 对人眼的视觉区别是什么？

Question

例如：

我有固定大小块 250x250 像素的图像缩略图。以及三张图片：

<img sizes  = "250px"
     src    = "image-250w.jpg" 
     srcset = "image-250w.jpg 250w,
               image-500w.jpg 500w,
               image-750w.jpg 750w"
>

因此浏览器为 DPR：1.0 的设备选择 250w，为 DPR：2.0 的设备选择 500w，为 DPR：3.0 的设备选择 750w。

那么这些DPR 1,2,3对于人眼的视觉区别是什么？

我没有具有不同 DPR 的设备（iPhone，等等）来查看此内容。当我在同一显示器上执行此操作时，设备模拟无法显示此内容。

Answer 1

我做了一个快速的 google & 发现要在标准显示器上模拟 DPR 效果，您需要将 DPR 设置为 2 并通过缩放缩放视口。 2x 资产将继续看起来清晰，而 1x 资产将看起来像素化。

这样可以直观的测试不同DPR值的区别

进一步参考，你可以看到这个https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#device_pixel_ratio_dpr

DPR: 1.0、DPR: 2.0、DPR: 3.0 对人眼的视觉区别是什么？

What the visual difference between DPR: 1.0, DPR: 2.0, DPR: 3.0 for human eyes?

html

image

responsive-images

srcset

devicepixelratio