CSS image-rendering property

Definition and Usage

image-rendering This property specifies the type of algorithm used for image scaling.

Note:This property has no effect on unscaled images.

Example

Show different algorithms available for image scaling:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Try It Yourself

CSS Syntax

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

Property Value

Value Description
auto Let the browser choose the scaling algorithm. Default value.
smooth Uses an algorithm to smooth colors in the image
high-quality Same as smooth but prefers high-quality scaling
crisp-edges Uses an algorithm to preserve contrast and edges in the image
pixelated

If the image is scaled up, it uses the nearest-neighbor algorithm, so the image will look like it is made up of large pixels.

If the image is scaled down, it is the same as auto.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: yes
Animation Creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.imageRendering="pixelated"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge, and Opera use -webkit-optimize-contrast as an alias for the crisp-edges value.