image-rendering

The image-rendering property designates the specific type of algorithm that will be used for image scaling.

Syntax

The image-rendering property does not have any effect on images that are not scaled.

img.auto {
  height: 400px;
  image-rendering: auto;
  width:  600px;
}

img.crisp {
  image-rendering: crisp-edges;
}

img.pix {
  image-rendering: pixelated;
}

img.smooth {
  image-rendering: smooth;
}

img.high {
  image-rendering: high-quality;
}

Values

auto
Default value. The browser chooses the scaling algorithm.

smooth
An algorithm is used that smooths out the colors in the image.

high-quality
Like smooth but with a preference for higher-quality scaling.

crisp-edges
An algorithm is used that preserves the contrast and edges in the image.

pixelated
A scaled up image uses the nearest-neighbor algorithm, making the image appear as being composed of large pixels. A scaled down image behaves the same as auto.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of image-rendering? Submit a codepen.io demo and we'll showcase it here ↴