图片模糊主因是浏览器缩放插值，默认平滑导致发虚；用 image-rendering 可强制切换渲染策略：crisp-edges 保边缘锐度（推荐像素风/图标），pixelated 呈块状（复古/调试），auto 为默认平滑。
图片模糊通常是因为浏览器对缩放后的位图（如 JPG、PNG）做了插值处理，默认使用平滑算法，导致边缘发虚。用 image-rendering 可以强制浏览器切换渲染策略，让像素更“硬朗”，尤其适合像素风、图标、图表等需要清晰边缘的场景。
用 image-rendering 控制缩放质量
这个 CSS 属性专门用于指定浏览器如何渲染图像（特别是缩放时）。它不改变图片本身，只影响绘制方式：
- crisp-edges：优先保持对比度和边缘锐度，适合像素画、小图标、UI 元素（推荐首选）
- pixelated：强制用最近邻算法放大，块状感明显，适合复古像素风格或调试查看缩放效果
- auto：浏览器默认行为（通常是双线性或双三次插值），平滑但易模糊
写法与兼容性注意
直接加在 img 或背景图容器上即可，建议加上厂商前缀提升兼容性：
img.pixel-art, .icon {
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
注意：Chrome/Safari 现在已支持 crisp-edges 和 pixelated，Firefox 从 65+ 支持 crisp-edges；-webkit-optimize-contrast 是旧版 Chrome 的等效写法，可保留作降级。
立即学习“前端免费学习笔记（深入）”；
配合 HTML 和图片源提升效果
单靠 CSS 不足以解决所有模糊问题，需结合以下做法：
- 用实际尺寸的图片，避免用大图强行缩小（比如 200×200 的图设成 50×50 容易糊）
- 响应式场景下，用
srcset提供多倍图（如 @2x），让高 DPI 屏幕加载更精细资源 - SVG 替代位图：图标、Logo 类内容优先用 SVG，天生矢量、缩放无损
哪些情况不适合用 crisp-edges？
它会让照片类图片显得生硬、锯齿明显，尤其在斜线或渐变区域。所以：
- 人物照、风景图、带阴影/模糊效果的图，保持
auto更自然 - 仅对明确需要“像素级精准”的内容启用该属性
- 用 DevTools 实时切换单个元素的
image-rendering值，对比效果再决定
基本上就这些。关键不是堆属性，而是理解图像类型和使用场景，再选对渲染策略。
