What?
image-rendering作为现阶段还处于实验性质中的css属性，他的作用是在浏览器对图片进行比例缩放时，设置其缩放使用的算法，从而来得到我们最终想要的图片结果。而且这个属性可以应用于img，canvas和background-image中。
Note
由于该属性未得到所有浏览器的支持，本文直接在文章里应用该属性，所以阅读此文时请使用最新版本的浏览器
Usage
image{
image-rendering:auto;
}
其可选的值有：
- auto
使用默认算法，即将图片色彩进行平滑缩放，不同的浏览器采用的算法不一，如：firefox 3.0后的gecko使用双线性插值（bilinear interpolation）算法
- crisp-edges
使用算法达达到在绽放时保持对比度和边缘，在加工时不平滑色彩和使用模糊
- pixelated
当图片放大时，单纯地去放大像素点，缩小时与
auto效果一样
Demo
pixelated
我们先来放主角一！
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpiPhxqc9E2leHdK4usHToAAQYALAYGKZxwHcgAAAAASUVORK5CYII=”>
看到了吗？这就是主角，一个大小为2*2像素的图片……
（图片君：你个鬼把我设计这么小，赶快把爷整大，不然削你！）
既然大哥发话了，小弟不能不听命，分分钟给大哥加了个width:400px
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpiPhxqc9E2leHdK4usHToAAQYALAYGKZxwHcgAAAAASUVORK5CYII=” style=”width:400px;”>
可是放大后……
（我：大哥，这还是你吗？你怎么变得这么色彩绚烂了）
（图片君：真是B了狗了！你对我做了什么）
（我：大哥，这不是我的错，是浏览器对你放大时使用了默认的算法把你的色彩平滑处理了……其实，现在还是挺好看的嘛！）
（图片君：别跟我扯犊子，给我整回来！！！！！）
大哥一怒，我连忙加点去给大家做整容手术，在它的属性里加了image-redering:pixelated
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpiPhxqc9E2leHdK4usHToAAQYALAYGKZxwHcgAAAAASUVORK5CYII=” style=”width:400px;image-rendering:pixelated”>
（我：这才是你嘛，大哥）
（图片君：这次不错，我还是我，是颜色不一样的烟火）
从大哥那里学到了pixelated的作用，而它在实际中的作用是怎么样的呢？
比如我有一个内容为zhiyishou.com的二维码君，它的大小为50px*50px
二维码君虽说不小，但是比变壮后的大哥小多了，二维码君也来找我想说整整容，变成大哥那样
于是，我直接把它变大，成了这样：
这……你英姿飒爽的轮廓呢？看来还是不对，思索了一下是和大哥的病一样
我二话没说，直接把刚学会的pixelated加在了二维码君的身上
这才是俊朗的二维码君嘛！！
crisp-edges
从w3c官网上请来了一位嘉宾，它来和我们演示crisp-edges的用法：
我们把嘉宾君进行放大：
这是嘉宾君在普通放大后的结果，即使用auto来做色彩平滑，我们试试在嘉宾君身上使用pixelated，看看会怎么样
嘉宾君有点不耐烦了，有事要走，赶快给它加上crisp-edges看看效果（由于各个浏览器对该属性的支持还不太统一，所以得做单独配置）
img{
width: 400px;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
可以看出来嘉宾君的边缘没有像第一次那样被平滑掉，尽可能保持自己的边缘，但是整个图片做了模糊处理，所以不像上面的pixelated一样棱角分明。
这个效果可以对图片缩放时进行效果的优化，但和pixelated的应用场景不一样。
Finally
我感觉这个属性最实用的还是pixelated，对于这个属性的使用，我们不能去绝对地依赖它来实现某种效果，只能说是用它去做优化，要做到有它的参与更好，没有也不差什么，因为这个属性太新了，在chrome中出现也是chrome41，而且chrome目前还不支持crisp-edges值
Chrome | ‡ 41+
Safari | * 7.1+
Firefox | * 35+
Opera | 28+
IE | Nope
Android | Nope
iOS | * 7.1+‡ Supports pixelated but not crisp-edges
* Supports crisp-edges but not pixelated
参考
Finish.
