Retina屏下图片显示模糊，如何正确设置srcset属性？ 红运酱~ 提问于 2026-02-14 13:47:23 阅读 21 优化 在适配移动端Retina屏幕时，我给图片用了2倍图，设置了标签的srcset属性，但实际在iPhone上还是模糊。比如用了1200w2.jpg这样的命名，代码写成： <img src="image.jpg" srcset="image@2x.jpg 2x"> 但测试时发现图片反而更模糊了，有没有可能是像素密度没对应上？或者需要配合CSS的resolution媒体查询？试过把图片尺寸改成实际2倍宽高还是没解决，到底哪里出错了？ Retina屏幕 我来解答 赞 4 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 Mr.哲铭 Lv1 先确认下几个关键点，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倍图。 回复 点赞 3 2026-02-14 16:08 加载更多 相关推荐
第一，确保图片文件本身没问题。
image@2x.jpg这个文件的分辨率必须是image.jpg的两倍，比如原图是 600x400，那么2倍图应该是 1200x800。如果尺寸不对，浏览器加载时会拉伸或压缩，导致模糊。第二，
srcset的写法是对的，但建议加上默认单位描述，避免某些设备解析异常。可以改成这样：第三，检查 CSS 中是否有样式限制了图片的显示尺寸。比如你给图片设置了固定宽高，比如
width: 300px; height: auto;，但实际图片加载的是2倍图，这种情况下可能会导致缩放问题。解决方法是让图片自然缩放，或者用object-fit: cover;来控制。第四，如果你发现还是有问题，可以直接用媒体查询配合像素密度检测，强制加载对应资源。比如：
最后提醒一下，别忘了清理缓存再测试，尤其是手机浏览器缓存很顽固，有时候你以为改了没生效，其实是缓存问题。
直接用这个试试，应该能搞定。如果还不行，可能是图片本身的问题，重新生成一下2倍图。