响应式图片在移动端显示模糊怎么办？

Newb.淑瑶提问于 2026-03-20 03:35:19 阅读 3

优化

我用 <img> 标签做了个响应式图片，但在手机上看特别糊，PC上是清晰的。是不是没设置对？

我试过加 max-width: 100% 和 height: auto，也用了 srcset，但还是糊。难道要切多套图？

<img 
  src="image.jpg"
  srcset="image@2x.jpg 2x, image@3x.jpg 3x"
  alt="示例图"
  style="max-width: 100%; height: auto;"
>

是不是我的写法有问题？或者漏了什么 meta 标签？现在真搞不清到底该怎么让高清屏显示清晰图片了。

我来解答赞 4 收藏

反馈

1 条解答

瑞玲~ Lv1

你的问题在于 srcset 的用法和图片分辨率本身。

先说写法问题：你写的 2x、3x 是像素密度描述符，针对的是 Retina 这类高清屏，逻辑没问题。但这里有个坑——浏览器是根据 DPR（设备像素比）来选图的，不是根据屏幕大小。iPhone 12 Pro 是 3x，会选 image@3x.jpg，但如果这张图本身分辨率就不够（比如只是一张普通图加了 @3x 后缀），那肯定还是糊。

你实际需要做的是：确保你的 @2x、@3x 图片是真正的高分辨率版本。比如原图 400x300 那就不要指望 @2x 能变高清，必须从一张足够大的原图（比如 1200x900）来生成 @2x 和 @3x。

如果想根据屏幕宽度来选择图片（而不是根据像素密度），应该用 w 描述符：

src="image-400.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="示例图"
这里的 sizes 意思是：屏幕宽度小于 600px 时图片占满视口宽度，否则占 50% 宽度。浏览器会自动根据这个和 srcset 里的 w 值选一张合适的。

至于 meta 标签，不需要额外加什么。

总结一下：先检查你的 @2x、@3x 图是不是真的从大图缩放出来的原图，而不是在小图上直接重命名。源文件分辨率不够，加什么属性都没用。

2026-03-20 04:02