Crisp edges/pixelated images
Scales images with an algorithm that preserves edges and contrast, without smoothing colors or introducing blur. This is intended for images such as pixel art. Official values that accomplish this for the image-rendering
property are crisp-edges
and pixelated
.
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49
See notes:
|
|||||||||||||||||
56
See notes:
|
9.3webkit
See notes:
|
4.4 | |||||||||||||||
14 | 52moz
See notes:
|
57
See notes:
|
10 | 10.0-10.2 | 4.4.3-4.4.4 | 4
See notes:
|
|||||||||||
11ms
See notes:
|
15 | 53moz
See notes:
|
58
See notes:
|
10.1 | 44
See notes:
|
10.3 | all | 56
See notes:
|
10webkit
See notes:
|
37
See notes:
|
57
See notes:
|
52moz
See notes:
|
11ms
See notes:
|
11.4webkit
See notes:
|
5
See notes:
|
1.2 | 7.12
See notes:
|
54moz
See notes:
|
59
See notes:
|
TP | 45
See notes:
|
||||||||||||||
55moz
See notes:
|
60
See notes:
|
46
See notes:
|
|||||||||||||||
56moz
See notes:
|
61
See notes:
|
Notes
Note that prefixes apply to the value (e.g. -moz-crisp-edges
), not the image-rendering
property.
-
1
Supported using the non-standard value
-webkit-optimize-contrast
-
2
Internet Explorer accomplishes support using the non-standard declaration
-ms-interpolation-mode: nearest-neighbor
-
3
Supports the
crisp-edges
value, but notpixelated
. -
4
Supports the
pixelated
value, but notcrisp-edges
. -
5
Only works on
<img>
, not CSS backgrounds or<canvas>
. -
6
Only works on
<img>
and CSS backgrounds, not<canvas>
.