为什么设置了dpr后图片在高DPR设备上还是模糊？

UX-长春提问于 2026-01-29 23:32:25 阅读 53

移动

我在做移动端适配时，给图片设置了dpr相关的CSS属性，但发现高分辨率设备（比如iPhone 12）上的图片依然显示模糊。我用的是以下写法：


img {
  width: 200px;
  height: auto;
  image-orientation: 180deg;
  image-rendering: -webkit-optimize-contrast;
}

同时设置了viewport meta标签：<meta name="viewport" content="width=device-width, initial-scale=1">。测试时发现，虽然图片尺寸对了，但在高DPR设备上像素感明显，好像没按设备像素比加载高清版本。有没有可能是image-rendering属性干扰了渲染？或者需要配合srcset属性才能生效？

我来解答赞 12 收藏

反馈

2 条解答

Code°玉萱 Lv1

image-rendering那几个属性只是控制渲染方式，跟加载高清图没关系。要配合srcset和sizes属性才能根据dpr加载不同分辨率的图片。比如：

<img src="img-1x.jpg" 

     srcset="img-1x.jpg 1x, img-2x.jpg 2x, img-3x.jpg 3x"

     sizes="(max-width: 480px) 100vw, 375px"

     alt="Demo">

2026-02-06 16:01

小新利 Lv1

问题出在你只设置了CSS，但没告诉浏览器该加载哪种分辨率的图片。光靠CSS是不行的，浏览器需要明确知道哪些是高分辨率图。我的做法是用 srcset 属性来指定不同分辨率的图片。

你可以这样写：

<img src="image.jpg"

     srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"

     style="width: 200px; height: auto;">

这样浏览器就会根据设备的DPR自动选择合适的图片了。至于 image-rendering，它主要是控制图片缩放时的质量，跟DPR没关系，所以这里用不上。

另外提醒一下，确保你的高分辨率图片真的是对应尺寸的2倍或3倍大小，不然还是会模糊。比如说，如果正常图是200px宽，那2x图就得是400px宽。

2026-01-31 13:03