Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS | image-rendering Property

Improve Article
Save Article
  • Last Updated : 26 Aug, 2022
Improve Article
Save Article

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. 

Example: 

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

  • 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. 

Example: 

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

  • 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. 

Example: 

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

  • initial: It is used to set the property to its default value. 

Example: 

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

  • inherit: It is used to set the property to inherit from its parent element.

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

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!