W3docs
en
Log in

CSS image-rendering Property

The image-rendering CSS property is used to define how the image is rendered. Learn how to use this property, its values and see examples.

The image-rendering property sets an image scaling algorithm.

By default, each browser will apply anti-aliasing to the scaled image to prevent distortion, but a problem can arise if you want to keep the original pixelated form of the image.

Tip

Sometimes, you can use crisp-edges and pixelated as fallbacks for each other to ensure consistent rendering across browsers.

Initial Valueauto
Applies toAll elements.
InheritedYes.
AnimatableDiscrete.
VersionCSS3
DOM Syntaxobject.style.imageRendering = "pixelated";

Syntax

CSS image-rendering syntax

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

Example of the image-rendering property:

CSS image-rendering code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .resize {
        flex: 1 1 45%;
      }
      .resize img, .original img {
        width: 100%;
        display: block;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering property example</h2>
    <div class="wrapper">
      <div class="original">
        <p>Original image size:</p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: auto</code></p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: pixelated</code></p>
        <img class="pixelated" src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS image-rendering values list

Values

ValueDescription
autoA standard algorithm maximizing the appearance of an image. This is the default value of this property.
crisp-edgesThe image is preserved without smoothing or blurring. Use this for pixel art that benefits from contrast preservation, while pixelated forces strict nearest-neighbor scaling.
pixelatedThe browser preserves its pixelated style by using nearest-neighbour scaling.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What does the 'image-rendering' property in CSS do?