Retina屏下图片显示模糊，如何正确设置srcset属性？

你问题出在两个地方：一是图片文件本身没按正确尺寸切，二是 srcset 的用法没对上浏览器的真实行为。

先说结论：srcset 里的 2x 是指「设备像素比」，不是你图片文件名带 @2x 就行。浏览器会按你的原图尺寸作为 1x 基准，再根据设备 DPR 加载对应倍率的图。所以关键不是文件名，而是你给的图片实际分辨率要匹配倍率。

举个例子：你原图 image.jpg 是 600×400，那 image@2x.jpg 必须是 1200×800，而不是 600×400 的 2x 像素拉伸图。很多人以为只要文件名带 @2x 就行，结果图还是 600×400，浏览器一放大就糊了。

另外，别只写 srcset 不写 src。src 是 fallback，但更重要的是，有些旧浏览器会忽略 srcset，直接用 src，所以两个都得有，而且 src 要指向 1x 的图。

正确写法是这样：



但前提是：
- image.jpg 是 600×400（逻辑尺寸）
- image@2x.jpg 是 1200×800（物理像素尺寸）
- image@3x.jpg 是 1800×1200（3 倍屏用）

别再用 CSS 去控制 img 的 width height 了，除非你配合 width=device-width 的 meta viewport，不然缩放后像素密度又乱套了。

最后说个坑：iPhone 的 Safari 在某些版本里，如果图片比显示区域大太多，反而会降采样模糊。所以别乱切超大图，按实际显示尺寸 ×2 或 ×3 切就行。

直接用上面这套，基本就解决了。

先确认下几个关键点，Retina屏的适配其实不复杂，但容易踩坑。你写的代码逻辑是对的，但可能细节没处理好。

第一，确保图片文件本身没问题。image@2x.jpg 这个文件的分辨率必须是 image.jpg 的两倍，比如原图是 600x400，那么2倍图应该是 1200x800。如果尺寸不对，浏览器加载时会拉伸或压缩，导致模糊。

第二，srcset 的写法是对的，但建议加上默认单位描述，避免某些设备解析异常。可以改成这样：

<img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x">

第三，检查 CSS 中是否有样式限制了图片的显示尺寸。比如你给图片设置了固定宽高，比如 width: 300px; height: auto;，但实际图片加载的是2倍图，这种情况下可能会导致缩放问题。解决方法是让图片自然缩放，或者用 object-fit: cover; 来控制。

第四，如果你发现还是有问题，可以直接用媒体查询配合像素密度检测，强制加载对应资源。比如：

<picture>

  <source srcset="image@2x.jpg" media="(min-resolution: 2dppx)">

  <img src="image.jpg">

</picture>

最后提醒一下，别忘了清理缓存再测试，尤其是手机浏览器缓存很顽固，有时候你以为改了没生效，其实是缓存问题。

直接用这个试试，应该能搞定。如果还不行，可能是图片本身的问题，重新生成一下2倍图。