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

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
<div>
<img class="auto" src="images/sunset.jpg" />
<img class="pixelated" src="images/sunset.jpg" />
<img class="crisp-edges" src="images/sunset.jpg" />
</div>
img {
height: 200px;
}
.auto {
image-rendering: auto;
}
.pixelated {
image-rendering: pixelated;
}
.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
Browser Support
The following table will show you the current browser support for the CSS image-rendering
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 13 | 3.6 | 15 | 6 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 6 | 1 | 3 |
Last updated by CSSPortal on: 2nd January 2024