CSS image-rendering Property

❮ Previous Complete CSS Reference Next ❯

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.

Show demo ❯

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

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

❮ Previous Complete CSS Reference Next ❯