CSS image-rendering Property
The image-rendering property specifies the algorithm used for image scaling. When the user scales the image above or below the original dimensions, this property can be used to modify the scaling behavior.
Syntax
Property Values
| Value | Description |
|---|---|
| auto | Allow the browser to select the scaling algorithm. This is the default setting. |
| smooth | Use an algorithm to smooth out the image's colours. |
| high-quality | The same as smooth, but with an emphasis on higher-quality scaling. |
| crisp-edges | Use an algorithm that preserves the image's contrast and edges. |
| pixelated | When the image is scaled up, the nearest-neighbour algorithm is used, and the image appears to be made up of large pixels. When the image is scaled down, it has the same effect as auto. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| image-rendering | 41.0 | 65.0 | 10.0 | 79.0 | 28.0 |