CSS image-rendering Property

Description

The image-rendering CSS property is used to control the scaling and rendering quality of images in a web page. It allows web developers to specify how an image should be displayed when it is scaled up or down. This property offers various values, such as "auto" for browser default rendering, "pixelated" for a pixelated effect when scaling up, and "crisp-edges" for sharp, well-defined edges. By adjusting the image-rendering property, developers can optimize the visual quality of images to suit their design needs and ensure that images are displayed in the desired manner, especially when resizing them through CSS or HTML attributes.

Initial value: auto
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.imageRendering

Interactive Demo

image-rendering: auto;

image-rendering: pixelated;

image-rendering: crisp-edges;

Syntax

image-rendering: auto | crisp-edges | pixelated

Values

autoThe scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
crisp-edgesThe image is scaled with an algorithm that preserves contrast and edges in the image. Generally intended for images such as pixel art or line drawings, no blurring or color smoothing occurs.
pixelatedThe image is scaled with the "nearest neighbor" or similar algorithm, preserving a "pixelated" look as the image changes in size.

Example

HTML

<div>

  <img class="auto" src="images/sunset.jpg" />

  <img class="pixelated" src="images/sunset.jpg" />

  <img class="crisp-edges" src="images/sunset.jpg" />

</div>

CSS

img {
  height: 200px;
}

.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

Result

Editor