Widely available Supported across all major browsers. Safe to use in production.

image-rendering

The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
image-rendering
13
79
3.6
6
18
6
auto
13
79
3.6
6
18
6
pixelated
41
79
93
10
41
10
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.pixel-art {
  image-rendering: pixelated;
}
.photo {
  image-rendering: auto;
}

Live demo

Auto(default)

CSS Auto(default) demo.

PreviewFullscreen

pixelated

CSS Pixelated demo.

PreviewFullscreen

crisp-edges

CSS Crisp-edges demo.

PreviewFullscreen

Use cases

  • Using image-rendering

    The image-rendering CSS property sets an image scaling algorithm.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links