Crisp edges/pixelated images
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.
| Spec | http://dev.w3.org/csswg/css-images-3/#valdef-image-rendering-crisp-edges |
|---|---|
| Status | Unofficial / Note |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 (3,*) | 62 (4) | ||||
| 56 (3,*) | 61 (4) | TP | 48 (4) | ||
| 16 | 55 (3,*) | 60 (4) | 11 | 47 (4) | |
| 11 (2,5,*) | 15 | 54 (3,*) | 59 (4) | 10.1 | 46 (4) |
| 10 (2,5,*) | 14 | 53 (3,*) | 58 (4) | 10 | 45 (4) |
| 9 (2,5,*) | 13 | 52 (3,*) | 57 (4) | 9.1 (3,6,*) | 44 (4) |
| 8 (2,5,*) | 12 | 51 (3,*) | 56 (4) | 9 (3,6,*) | 43 (4) |
| Show all | |||||
| 7 (2,5,*) | 50 (3,*) | 55 (4) | 8 (3,6,*) | 42 (4) | |
| 6 | 49 (3,*) | 54 (4) | 7.1 (3,6,*) | 41 (4) | |
| 5.5 | 48 (3,*) | 53 (4) | 7 (3,6,*) | 40 (4) | |
| 47 (3,*) | 52 (4) | 6.1 (3,6,*) | 39 (4) | ||
| 46 (3,*) | 51 (4) | 6 (1,*) | 38 (4) | ||
| 45 (3,*) | 50 (4) | 5.1 | 37 (4) | ||
| 44 (3,*) | 49 (4) | 5 | 36 (4) | ||
| 43 (3,*) | 48 (4) | 4 | 35 (4) | ||
| 42 (3,*) | 47 (4) | 3.2 | 34 (4) | ||
| 41 (3,*) | 46 (4) | 3.1 | 33 (4) | ||
| 40 (3,*) | 45 (4) | 32 (4) | |||
| 39 (3,*) | 44 (4) | 31 (4) | |||
| 38 (3,*) | 43 (4) | 30 (4) | |||
| 37 (3,*) | 42 (4) | 29 (4) | |||
| 36 (3,*) | 41 (4) | 28 (4) | |||
| 35 (3,*) | 40 | 27 | |||
| 34 (3,*) | 39 | 26 | |||
| 33 (3,*) | 38 | 25 | |||
| 32 (3,*) | 37 | 24 | |||
| 31 (3,*) | 36 | 23 | |||
| 30 (3,*) | 35 | 22 | |||
| 29 (3,*) | 34 | 21 | |||
| 28 (3,*) | 33 | 20 | |||
| 27 (3,*) | 32 | 19 | |||
| 26 (3,*) | 31 | 18 | |||
| 25 (3,*) | 30 | 17 | |||
| 24 (3,*) | 29 | 16 | |||
| 23 (3,*) | 28 | 15 | |||
| 22 (3,*) | 27 | 12.1 (3,*) | |||
| 21 (3,*) | 26 | 12 (3,*) | |||
| 20 (3,*) | 25 | 11.6 (3,*) | |||
| 19 (3,*) | 24 | 11.5 | |||
| 18 (3,*) | 23 | 11.1 | |||
| 17 (3,*) | 22 | 11 | |||
| 16 (3,*) | 21 | 10.6 | |||
| 15 (3,*) | 20 | 10.5 | |||
| 14 (3,*) | 19 | 10.0-10.1 | |||
| 13 (3,*) | 18 | 9.5-9.6 | |||
| 12 (3,*) | 17 | 9 | |||
| 11 (3,*) | 16 | ||||
| 10 (3,*) | 15 | ||||
| 9 (3,*) | 14 | ||||
| 8 (3,*) | 13 | ||||
| 7 (3,*) | 12 | ||||
| 6 (3,*) | 11 | ||||
| 5 (3,*) | 10 | ||||
| 4 (3,*) | 9 | ||||
| 3.6 (3,*) | 8 | ||||
| 3.5 | 7 | ||||
| 3 | 6 | ||||
| 2 | 5 | ||||
| 4 | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 | |||||||||||
| 10.3 | all | 56 (4) | 10 (1,6,*) | 37 (4) | 59 (4) | 54 (3,*) | 11 (2,5,*) | 11.4 (1,6,*) | 5 (4) | 1.2 | 7.12 (4) |
| 10.0-10.2 | 4.4.3-4.4.4 | 7 | 12.1 (3,*) | 10 (2,5,*) | 4 (4) | ||||||
| 9.3 (3,6,*) | 4.4 | 12 (3,*) | |||||||||
| 9.0-9.2 (3,6,*) | 4.2-4.3 | 11.5 | |||||||||
| Show all | |||||||||||
| 8.1-8.4 (3,6,*) | 4.1 | 11.1 | |||||||||
| 8 (3,6,*) | 4 | 11 | |||||||||
| 7.0-7.1 (3,6,*) | 3 | 10 | |||||||||
| 6.0-6.1 (1,6,*) | 2.3 | ||||||||||
| 5.0-5.1 (1,6,*) | 2.2 | ||||||||||
| 4.2-4.3 | 2.1 | ||||||||||
| 4.0-4.1 | |||||||||||
| 3.2 | |||||||||||
Notes
Note that prefixes apply to the value (e.g. -moz-crisp-edges), not the image-rendering property.
Supported using the non-standard value
-webkit-optimize-contrastInternet Explorer accomplishes support using the non-standard declaration
-ms-interpolation-mode: nearest-neighborSupports the
crisp-edgesvalue, but notpixelated.Supports the
pixelatedvalue, but notcrisp-edges.Only works on
<img>, not CSS backgrounds or<canvas>.Only works on
<img>and CSS backgrounds, _not_<canvas>.
- * Partial support with prefix.
Bugs
image-rendering:-webkit-optimize-contrast;and-ms-interpolation-mode:nearest-neighbordo not affect CSS images.
Resources
- Mozilla Developer Network (MDN) documentation - CSS Image rendering
- HTML5Rocks article
- Firefox bug #856337: Implement image-rendering: pixelated
- Chrome bug #317991: Implement image-rendering:crisp-edges
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-crisp-edges
