加了 image-rendering 仍模糊，因其仅作用于已缩放图片且不改变资源选择；根本原因是 srcset 配置错误或缺失 sizes，导致未加载 @2x/@3x 图，而该属性无法提升原始分辨率。
为什么加了 image-rendering 还是糊？
因为这个属性只对「已缩放的图片」起作用，且仅控制渲染算法，不改变资源选择逻辑。如果浏览器根本没加载@2x图（比如srcset写错、sizes缺失），再设image-rendering: crisp-edges也救不回模糊——它只是把一张被拉伸的1x图“锐化显示”，不是变高清。
常见错误现象：
- iPhone上图片发虚，但检查元素发现
src加载的是a@1x.jpg，而非a@2x.jpg - 写了
image-rendering: pixelated，结果小图放大后边缘锯齿严重，但原图本就不该放大 - Tailwind或重置CSS悄悄注入
image-rendering: smooth，覆盖了你的设置
image-rendering 的取值怎么选？
不同场景要匹配不同值，不能一概而用：
- 像素图（如游戏精灵、UI图标）：优先用
image-rendering: -webkit-optimize-contrast（Safari/iOS最稳）+image-rendering: crisp-edges（Chrome/Firefox fallback） - 普通照片或渐变图：保持
auto，强行设crisp-edges反而导致色阶断裂 - 明确想展示“马赛克放大”效果（如调试、像素风页面）：用
pixelated，但注意它在缩小图片时退化为auto - 避免用
smooth或留空——这是默认行为，会触发双线性插值，正是模糊源头
移动端必须配合 srcset + x 描述符
仅靠image-rendering无法解决Retina屏模糊的根本问题：资源没换。iPhone 14的DPR是3，但视口CSS宽度只有390px，若用w描述符写srcset="a@1x.jpg 390w, a@2x.jpg 780w"，浏览器按390px视口比对，永远选第一张。
正确做法是用x描述符直连DPR：
@@##@@
注意事项：
- 不要混用
w和x，浏览器会忽略x部分 - 构建工具（如Vite、Webpack）通常不解析
srcset路径，需手动确保@2x/@3x文件存在并正确引用 - 安卓低端机对
x支持不稳定，必须搭配sizes（如sizes="(max-width: 768px) 100vw, 50vw"）才能触发高DPR资源加载
容易被忽略的 CSS 渲染陷阱
很多项目在img上设了max-width: 100%，却忘了它可能触发隐式缩放——尤其当父容器有transform、scale或flex/gird布局导致尺寸计算偏差时，图片实际渲染尺寸≠原始像素尺寸，image-rendering就失效了。
更隐蔽的问题来自background-image：它完全不响应image-rendering，必须用媒体查询+background-size手动切换@2x图：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: url("logo@2x.png"); background-size: contain; }}
还有两点常被跳过：
-
<canvas></canvas>元素：不能靠CSS缩放，必须用canvas.width/canvas.height设物理像素尺寸，再用ctx.imageSmoothingEnabled = false - 第三方UI库（如Element Plus、Naive UI）可能全局重置
image-rendering，得用!important或更高优先级选择器覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
