CSS image-rendering Property

❮ Previous Reference Next ❯


.crisp-edges {
  image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */
  image-rendering: crisp-edges;

.pixelated {
  image-rendering: pixelated;

.smooth {
  image-rendering: smooth;

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



The image-rendering property sets an image scaling algorithm.

This property applies to an element itself, to any images set in its other properties, and to its descendants.

Default value:auto
JavaScript syntax:

Standard Syntax

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
auto This is default. Let the browser choose the scaling algorithm.
smooth (Experimental) Defines smooth, but with a preference for higher-quality scaling.
high-quality (Experimental) This use an algorithm that smooth out the colors in the image.
crisp-edges This use an algorithm that will preserve the contrast and edges in the image.
pixelated Specifies that if the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  image-rendering: auto;
❮ Previous Reference Next ❯