CSS image-rendering Property
Show the different algorithms that can be used for image scaling:
Definition and Usage
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.
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the property.
Chrome, Edge, Opera, and Safari uses an alternate name for the
|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|