css屬性image-redering詳解

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.