image-rendering不是万能开关，它仅对已缩放的栅格图像生效，且受加载逻辑、渲染上下文（如canvas内部绘制、background-image、transform）、资源选择（srcset缺失）及第三方css覆盖等多重限制，多数“无效”源于前提未满足而非属性本身失效。
image-rendering 不是万能开关，它只在图片已被缩放、且浏览器尚未覆盖该设置的前提下起效。多数“用了没用”的情况，根源不在属性本身，而在加载逻辑或渲染上下文。
为什么加了 image-rendering: pixelated 还是糊？
常见错误现象：<img src="icon.png"> 在 iPhone 上模糊，但检查 network 面板发现加载的是 icon@1x.png，而非 icon@2x.png；或者图片被 transform: scale(1.5) 拉伸后边缘发虚，但 image-rendering 完全无反应。
-
image-rendering仅作用于「已缩放的栅格图像」——如果原始图分辨率太低（比如 16×16 像素被拉到 128×128），再怎么设pixelated也只是放大马赛克，不是变高清 - 它对
<canvas></canvas>内部绘制无效；<canvas width="32" height="32"></canvas>加该 CSS 属性 + CSS 拉伸，完全不生效 - Tailwind、Normalize.css 或某些 UI 库可能悄悄注入
image-rendering: smooth，覆盖你的设置，需用!important或更高优先级选择器 - 若图片通过
background-image加载，必须确保容器尺寸变化触发了重绘，否则样式可能未应用
image-rendering 的取值怎么选才不翻车？
不同场景对应不同插值逻辑，硬套 pixelated 可能适得其反：
- 像素风游戏图、复古 UI 图标 → 用
image-rendering: pixelated（Chrome/Firefox） +image-rendering: -webkit-optimize-contrast（Safari/iOS，旧版兼容） - 线条清晰的 SVG 替代图、小尺寸 icon、文字型 PNG →
image-rendering: crisp-edges更稳，兼顾锐度与色边控制 - 照片类大图、Banner 图 → 别乱设；
auto或smooth反而更自然；强行pixelated会暴露噪点和压缩瑕疵 -
high-quality是提示值，非强制，当前 Chrome 和 Safari 基本忽略，不建议依赖
Canvas 缩放失真，image-rendering 为什么不管用？
因为 image-rendering 是 CSS 合成层属性，只影响 <img> 元素或背景图的最终光栅化输出；<canvas></canvas> 内部所有绘制（包括 ctx.drawImage()）走 JS 光栅管线，CSS 完全无法干预其插值行为。
- 正确做法：保持
canvas.width/canvas.height为原始尺寸（如 32×32），然后 JS 中关闭平滑：ctx.imageSmoothingEnabled = false - 需要动态缩放时，用
ctx.scale(4, 4)+ctx.drawImage(img, 0, 0)，而不是用 CSS 改canvas元素宽高 - 若必须用 CSS 拉伸 canvas（比如响应式容器），请确保
canvas自身宽高不变，且明确禁用平滑——否则浏览器会在 canvas 输出后再做一次双线性缩放，双重模糊
移动端 Retina 屏模糊，image-rendering 不是解药
真正决定清晰度的是「是否加载了 @2x/@3x 资源」，不是渲染算法。很多项目把 srcset 写错或漏掉 sizes，导致高 DPR 设备仍加载 1x 图，此时 image-rendering 再强也救不回细节损失。
- 检查元素的
currentSrc，确认加载的是logo@2x.png而非logo.png -
<img src="logo.png" srcset="logo@1x.png 1x, logo@2x.png 2x">必须配合sizes才能在不同视口宽度下正确匹配 - iOS Safari 对
crisp-edges支持不稳定，优先用-webkit-optimize-contrast并加!important - 注意：CSS 缩放 +
image-rendering无法补偿缺失的物理像素，这是资源层问题，不是渲染层问题
最容易被忽略的点是：锯齿往往不是 image-rendering 没设对，而是图片还没被正确加载、或被 transform / border-radius / overflow-hidden 等叠加渲染干扰了像素对齐。先查 network 面板和 computed styles，再调属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
