CSS image-rendering Property
Example
Show the different algorithms that can be used 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 »
Definition and Usage
The image-rendering property specifies the
type of algorithm to be used for image scaling.
Note: This property has no effect on images that are not scaled.
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.imageRendering="pixelated" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome, Edge, Opera, and Safari uses an alternate name for the
crisp-edges value: -webkit-optimize-contrast.
CSS Syntax
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | Let the browser choose the scaling algorithm. This is default | Demo ❯ |
| smooth | Use an algorithm that smooth out the colors in the image | Demo ❯ |
| high-quality | Same as smooth, but with a preference for higher-quality scaling | Demo ❯ |
| crisp-edges | Use an algorithm that will preserve the contrast and edges in the image | Demo ❯ |
| pixelated | If the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
