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.