移动端图片模糊的根本原因是浏览器未加载高分辨率图或渲染算法错误，需从srcset描述符选择、image-rendering生效前提、background-image多倍图配置及svg内联四方面协同解决。
移动端图片缩放模糊，核心问题不在“怎么让浏览器画得更清楚”，而在于**浏览器根本没加载高分辨率图，或者加载了却用错算法渲染**。单纯调 image-rendering 或写 max-width: 100% 很可能白忙活。
为什么 srcset 用了还是糊？x 描述符和 w 描述符别混用
多数人把 srcset 当成“自动选高清图”的开关，但实际它依赖你写的描述符类型：
-
srcset="a@1x.jpg 1x, a@2x.jpg 2x"—— 浏览器直接按设备DPR匹配，iPhone 14（DPR=3）会选3x版本（如果写了） -
srcset="a@1x.jpg 390w, a@2x.jpg 780w"—— 浏览器按当前视口 CSS 宽度（比如 390px）去比对，永远挑390w那张，@2x形同虚设 - 混写
srcset="a@1x.jpg 1x, a@2x.jpg 780w"？浏览器会忽略带x的部分，只认w
结论：简单适配就用 x；必须用 w（比如响应式组件宽度不固定），就得配合 sizes 告诉浏览器“这张图在不同断点下占多少 CSS 像素”，否则它算不出该要多宽的物理图。
加了 image-rendering 还是糊？先确认图源是否真被替换
image-rendering 只影响已加载图片的渲染方式，不参与资源选择。它救不了没加载对的图：
- 检查 DevTools 的 Network 标签页，看实际请求的是
a@1x.jpg还是a@2x.jpg - 如果始终是
@1x，问题出在srcset/sizes配置或构建工具路径处理上，不是image-rendering的锅 - 如果确实是
@2x但依然模糊，再查 CSS：img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }—— Safari 必须靠-webkit-optimize-contrast才稳，crisp-edges是其他浏览器 fallback - 警惕 UI 框架（如 Tailwind）或重置样式表悄悄注入
image-rendering: smooth，它会覆盖你的设置
background-image 模糊？media query + @2x 图 + background-size 缺一不可
background-image 完全不响应 srcset 和 image-rendering，必须手动切图+声明：
- 默认规则写
background-image: url('bg.jpg');，作为所有浏览器的 fallback - 高 DPR 规则必须复合写：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)—— 单写任一条件都会漏掉旧版 Safari 或新版 Chrome - 换图的同时，
background-size必须显式设为设计稿原始宽度（比如750px auto），不能只写cover或100% 100%，否则高分辨率图仍被二次插值拉伸 - 文件名严格对应：
bg.jpg/bg@2x.jpg/bg@3x.jpg，路径、大小写、扩展名一个都不能差；某些构建工具（如 Vite）默认过滤@符号，需额外配置保留
SVG 图标变糊？别用 img 标签套 SVG
<img src="icon.svg" style="max-width:90%" style="max-width:90%"> 看似简单，实则是模糊根源：浏览器先把 SVG 光栅化成位图，再缩放。正确做法是内联 SVG 并保留 viewBox：
- 删掉
<img>，把 SVG 内容直接贴进 HTML：<svg viewbox="0 0 24 24"><path d="..."></path></svg> - CSS 控制尺寸：
svg { width: 24px; height: 24px; }，此时浏览器实时重绘矢量路径，100% 清晰 - 避免给父容器设
font-size影响 SVG 内部em单位；如需动态缩放，用rem或px - 若必须用
background-image引入 SVG，Data URL 中的 SVG 必须含viewBox，且特殊字符（、<code>>）要 URL 编码，否则解析失败留白
真正容易被忽略的点是：模糊往往不是单一 CSS 属性能解决的，而是 srcset 选图逻辑、构建工具路径处理、background-size 同步、SVG 渲染上下文这四层同时对齐才能成立。少一层，就回到模糊原点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
