免费在线CSS image-rendering生成器，控制浏览器缩放图片时的渲染算法。支持auto/crisp-edges/pixelated/smooth四种模式，实时对比效果。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用控制浏览器缩放图片时的渲染算法 · 像素风 · 清晰缩放
Updated: 2026-07-11
⚙️ 设置
👁️ 实时对比（图片缩放效果）
下方展示同一张小图在不同 image-rendering 下的缩放效果。点按图片可放大查看细节。
🎯 当前设置
image-rendering: auto
点击图片放大查看像素细节
📐 原始图片（8×5 像素）
原始大小
放大 30 倍后的渲染差异对比
📋 生成的 CSS 代码
img {
image-rendering: auto;
}
📖 属性值说明
| 值 | 说明 | 适用场景 |
|---|---|---|
| auto | 浏览器自动选择缩放算法，通常使用双线性插值 | 普通照片、一般网页图片 |
| smooth | 优先保证缩放后的平滑度，适合照片级图像 | 摄影作品、高分辨率图片缩略图 |
| crisp-edges | 保持边缘清晰，使用最近邻或类似算法 | 图标、UI元素、二维码、线框图 |
| pixelated | 强制最近邻插值，放大后出现清晰像素块 | 像素艺术、复古游戏、马赛克效果 |
💡 应用场景
🎮 像素艺术游戏
pixelated 保持像素画布的锯齿边缘，避免平滑缩放导致的模糊
📊 图表和图标
crisp-edges 让图表线条和图标边缘保持清晰，适合小尺寸 UI 元素
📷 照片画廊
smooth/auto 适合照片缩略图，缩放后保持平滑自然的观感
🔲 二维码/条码
crisp-edges 确保二维码缩放后仍可被扫描，黑白色块边缘清晰
🌐 浏览器兼容性
image-rendering 在现代浏览器中支持良好。注意：smooth 是较新的值（Chrome 105+），部分浏览器可能回退到 auto。
/* 兼容写法 */
.pixel-art {
image-rendering: auto; /* 回退 */
image-rendering: crisp-edges; /* Firefox */
image-rendering: pixelated; /* Chrome/Safari */
-ms-interpolation-mode: nearest-neighbor; /* IE (已废弃) */
}