image-rendering property in CSS

Example

A simple image-rendering property example:

.image {
    height: 150px;
    width: 150px;  
    image-rendering: auto;
}
.crisp-edges {
    image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */
    image-rendering: crisp-edges;
}
.pixelated {
    image-rendering: pixelated;
}
.smooth {
    image-rendering: smooth;
}
.high-quality {
    image-rendering: high-quality;
}

Laboratory

description & Usage

We use the image-rendering property to determine the type of image scaling algorithm.

Informations

#	Description
Default Value	auto
Inherited	yes
Animatable	no
Version	CSS3
JavaScript syntax	object.style.imageRendering="pixelated"

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
image-rendering

Syntax

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Values

Values	Description
auto	By using the auto value, you give the browser access to choose and use the appropriate algorithm.
smooth	Use an algorithm that smooth out the colors in the image
high-quality	Same as smooth, but with a preference for higher-quality scaling
crisp-edges	Use algorithms that preserve image edges.
pixelated	If the image is large, the nearest-neighbor algorithm is used.
initial	Adds this value to its default property.
inherit	It inherits this value from its parent tag.

image-rendering property CSS

Example

description & Usage

Informations

Browser compatibility and Support

Syntax

Values