The image-rendering property is used to set the type of algorithm used for image scaling. This property can be used to modify the scaling behavior when the user scales the image above or below the original dimensions.
Syntax:
shape-rendering: auto | crisp-edges | pixelated | initial | inherit
Property Values:
- auto: It is used to indicate that the scaling algorithm will be dependent on the user agent. Different browsers may have different algorithms.
- crisp-edges: It is used to indicate that the algorithm will preserve the contrast and edges in the image. It will not smooth out the colors or blur the image due to the use of anti-aliasing. Some of the algorithms used here are nearest-neighbor and other non-smoothing scaling algorithms.
- initial: It is used to set the property to its default value.
- pixelated: It is used to indicate that the nearest-neighbor algorithm is used on the image when it is scaled up. When the image is scaled down, the behavior is the same as the auto value.
- inherit: It is used to set the property to inherit from its parent element.
Example: In this example, we use image-rendering: auto property.
<!DOCTYPE html><html>
<head>
<title>
CSS | image-rendering
</title>
<style>
.image-crisp {
/* Using the crisp-edges
value for demonstration */
image-rendering: crisp-edges;
}
.image-auto {
image-rendering: auto;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | image-rendering
</b>
<p>
Comparing the 'crisp-edges'
value with the 'auto' value
in Firefox
</p>
<div class="container">
<img class="image-crisp"
src=
width="250px">
<img class="image-auto"
src=
width="250px">
</div>
</body>
</html>
|
Output: Comparing the crisp-edges value with the auto value
Example: In this example, we are using image-rendering: crisp-edge property.
<!DOCTYPE html><html>
<head>
<title>
CSS | image-rendering
</title>
<style>
.image-auto {
image-rendering: auto;
}
.image-crisp {
image-rendering: crisp-edges;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | image-rendering
</b>
<p>
Comparing the 'auto' value
with the 'crisp-edges' value
in Firefox
</p>
<div class="container">
<img class="image-auto"
src=
width="250px">
<img class="image-crisp"
src=
width="250px">
</div>
</body>
</html>
|
Output: Comparing the auto value with the crisp-edges value
Example: In this example, we are using image-rendering: pixelated property.
<!DOCTYPE html><html>
<head>
<title>
CSS | image-rendering
</title>
<style>
.image-crisp {
/* Using the crisp-edges
value for demonstration */
image-rendering: crisp-edges;
}
.image-pixelated {
image-rendering: pixelated;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | image-rendering
</b>
<p>
Comparing the 'crisp-edges'
value with the 'pixelated'
value in Firefox
</p>
<div class="container">
<img class="image-crisp"
src=
width="250px">
<img class="image-pixelated"
src=
width="250px">
</div>
</body>
</html>
|
Output: Comparing the crisp-edges value with the pixelated value
Example: In this example, we are using image-rendering: initial prope
<!DOCTYPE html><html>
<head>
<title>
CSS | image-rendering
</title>
<style>
.image-crisp {
/* Using the crisp-edges
value for demonstration */
image-rendering: crisp-edges;
}
.image-auto {
image-rendering: initial;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
CSS | image-rendering
</b>
<p>
Comparing the 'crisp-edges'
value with the 'initial'
value in Firefox
</p>
<div class="container">
<img class="image-crisp"
src=
width="250px">
<img class="image-auto"
src=
width="250px">
</div>
</body>
</html>
|
Output: Comparing the crisp-edges value with the initial value
Supported Browsers: The browsers supported by image-rendering property are listed below:
- Chrome 13+
- Edge 79+
- Firefox 3.6+
- Safari 6+
- Opera 15+