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
我們先來放主角一！
看到了嗎？這就是主角，一個大小為2*2像素的圖片……
（圖片君：你個鬼把我設計這么小，趕快把爺整大，不然削你！）
既然大哥發話了，小弟不能不聽命，分分鍾給大哥加了個width:400px
可是放大后……
（我：大哥，這還是你嗎？你怎么變得這么色彩絢爛了）
（圖片君：真是B了狗了！你對我做了什么）
（我：大哥，這不是我的錯，是瀏覽器對你放大時使用了默認的算法把你的色彩平滑處理了……其實，現在還是挺好看的嘛！）
（圖片君：別跟我扯犢子，給我整回來！！！！！）
大哥一怒，我連忙加點去給大家做整容手術，在它的屬性里加了image-redering: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
參考
image-rendering on MDN
image-rendering on W3C
image-rendering article
Finish.