Crisp edges/pixelated images

- CR

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.

Chrome

  1. 4 - 40: Not supported
  2. 41 - 122: Supported
  3. 123: Supported
  4. 124 - 126: Supported

Edge

  1. 12 - 18: Not supported
  2. 79 - 122: Supported
  3. 123: Supported

Safari

  1. 3.1 - 5.1: Not supported
  2. 6: Partial support
  3. 6.1 - 9.1: Partial support
  4. 10 - 17.3: Supported
  5. 17.4: Supported
  6. TP: Supported

Firefox

  1. 2 - 3.5: Not supported
  2. 3.6 - 64: Supported
  3. 65 - 92: Supported
  4. 93 - 123: Supported
  5. 124: Supported
  6. 125 - 127: Supported

Opera

  1. 9 - 11.5: Not supported
  2. 11.6 - 12.1: Supported
  3. 15 - 27: Not supported
  4. 28 - 107: Supported
  5. 108: Supported

IE

  1. 5.5 - 6: Not supported
  2. 7 - 10: Partial support
  3. 11: Partial support

Chrome for Android

  1. 122: Supported

Safari on iOS

  1. 3.2 - 4.3: Not supported
  2. 5 - 6.1: Partial support
  3. 7 - 9.3: Partial support
  4. 10 - 17.3: Supported
  5. 17.4: Supported

Samsung Internet

  1. 4 - 22: Supported
  2. 23: Supported

Opera Mini

  1. all: Not supported

Opera Mobile

  1. 10 - 11.5: Not supported
  2. 12 - 12.1: Supported
  3. 80: Supported

UC Browser for Android

  1. 15.5: Supported

Android Browser

  1. 2.1 - 4.4.4: Not supported
  2. 122: Supported

Firefox for Android

  1. 123: Supported

QQ Browser

  1. 14.9: Supported

Baidu Browser

  1. 13.52: Supported

KaiOS Browser

  1. 2.5: Supported
  2. 3: Supported

Note that prefixes apply to the value (e.g. -moz-crisp-edges), not the image-rendering property.

Resources:
Chrome bug #317991: Implement image-rendering:crisp-edges
Firefox bug #856337: Implement image-rendering: pixelated
HTML5Rocks article
MDN Web Docs - CSS Image rendering