Open In App

CSS image-rendering Property

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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 

auto

Example: In this example, we are using image-rendering: crisp-edge property.

HTML




<!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 

crisp-edges

Example: In this example, we are using image-rendering: pixelated property.

HTML




<!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 

pixelated

Example: In this example, we are using image-rendering: initial prope

HTML




<!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 

initial

Supported Browsers: The browsers supported by image-rendering property are listed below:

  • Chrome 13+
  • Edge 79+
  • Firefox 3.6+
  • Safari 6+
  • Opera 15+


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads