这个属性应该是 CSS 里比较冷门的，我是读到这篇文章 六年个人网站改版总结 - 羡辙杂俎 “像素风边框生成” 这节提到的，学习记录一下。
概述
CSS 属性
image-rendering用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。
可取值
/* 专有属性值 */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* 全局属性值 */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;解释
auto：自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用双线性（bilinear）算法进行重新采样（高质量）。
smooth：应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。
high-quality：Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.
pixelated（像素化）：顾名思义就是设计提供给像素化图片缩放使用的。其实只能放，并不能缩，使用 pixelated 的时候缩小时仍然是用的 auto 模式，因为它的原理只是简单的把 1 个像素扩大到 4 个像素，并没有计算的过程。它可以保证像素图片在放大后仍然保持原样的像素。这就是我们需要的属性了，IE 下则需要使用使用 nearest-neighbor（近邻取样）。
crisp-edges（硬边缘）：可以防止图片在缩放的过程中模糊化，区别于 pixelated，他可以使用很多不同的算法来保证图片缩放的质量，如 2xSaI，HQnX，EPX 等。由于不是所有浏览器都支持 pixlated，所以这条属性也要用上。
不同属性的举例
具体使用场景举例
问题场景：在做响应式布局时，img 图片一般会加个 style="width:100%" 进行缩放，但是无论放大还是缩小，图片都会变得模糊，全局加上下面的代码，就可解决。
img {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}Live Demo
问题场景 2：像素风图案缩放后变模糊（被消除锯齿）
PhotoShop 设置里面的图像插值：【临近（保留硬边缘）】来保证缩放后仍然保持像素风格
img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}Live Demo
兼容性
Internet Explorer 7 和 8 支持非标准的 -ms-interpolation-mode 属性，有两个属性值：bicubic 和 nearest-neighbor，和大量差距：
- 只应用于
<img>等元素带的图片 - IE 7 上此属性只支持无透明度的图片
- 不能继承
- IE 7 默认值：
nearest-neighbor(低质量) - IE 8 默认值：
bicubic(高质量) - IE 9 不支持此非标准属性
- WebKit 支持一个非标准属性:
-webkit-optimize-contrast.