CSS - image-rendering Property

CSS image-rendering property is used to control how an image should be rendered or displayed by the browser. It specifies the algorithm that the browser should use when scaling the image up or down, as well as when displaying the image at sizes that are not a multiple of the image's intrinsic dimensions.

Syntax

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

Property Values

Value	Description
auto	It allows the browser to use an appropriate scaling algorithm. Default.
smooth	It uses an algorithm that smooths the color in the image.
high-quality	It is similar to smooth but importance is given to high-quality scaling.
crisp-edges	It uses an algorithm that preserves contrast, colors and edges of the image without any smoothing or blurring.
pixelated	It uses an algorithm that applies a pixelated effect when scaling the image, which can give a retro or low-resolution appearance.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Image Rendering Property

The following examples explain the image-rendering property with different values.

Image Rendering Property with Auto Value

To allow the browser to automatically determine the best rendering method based on the image and the context, we use the auto value. This default setting balances quality and performance, adapting to the image's resolution and scaling requirements. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: auto
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

Image Rendering Property with Smooth Value

To prioritize smoothness when scaling images such that the browser applies anti-aliasing techniques to minimize jagged edges and preserve the images visual appeal at various sizes, we use the smooth value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: smooth;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: smooth
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

Image Rendering Property with High Quality Value

To allow the browser provide the best possible image quality which involves complex algorithms and higher computational resources to ensure that the image retains as much detail and clarity as possible when resized, we use the high-quality value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: high-quality;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: high-quality
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

Image Rendering Property with Crisp Edges Value

sharp, well-defined edges rather than smooth transitions, we use the crisp-edges value. It maintains the crispness of each pixel, which can enhance the visual impact of images with hard edges. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: crisp-edges;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: crisp-edges
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

Image Rendering Property with Pixelated Value

To allow the image to be rendered with a blocky, low-resolution appearance, where each pixel is clearly visible, we use the pixelated value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: pixelated;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: pixelated
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

Supported Browsers

Property
image-rendering	41.0	79.0	65.0	10.0	28.0

css_reference.htm