控制浏览器缩放图片时的渲染算法 · 像素风 · 清晰缩放
下方展示同一张小图在不同 image-rendering 下的缩放效果。点按图片可放大查看细节。
点击图片放大查看像素细节
放大 30 倍后的渲染差异对比
| 值 | 说明 | 适用场景 |
|---|---|---|
| auto | 浏览器自动选择缩放算法，通常使用双线性插值 | 普通照片、一般网页图片 |
| smooth | 优先保证缩放后的平滑度，适合照片级图像 | 摄影作品、高分辨率图片缩略图 |
| crisp-edges | 保持边缘清晰，使用最近邻或类似算法 | 图标、UI元素、二维码、线框图 |
| pixelated | 强制最近邻插值，放大后出现清晰像素块 | 像素艺术、复古游戏、马赛克效果 |
pixelated 保持像素画布的锯齿边缘，避免平滑缩放导致的模糊
crisp-edges 让图表线条和图标边缘保持清晰，适合小尺寸 UI 元素
smooth/auto 适合照片缩略图，缩放后保持平滑自然的观感
crisp-edges 确保二维码缩放后仍可被扫描，黑白色块边缘清晰
image-rendering 在现代浏览器中支持良好。注意：smooth 是较新的值（Chrome 105+），部分浏览器可能回退到 auto。