CSS image-rendering Property

The image-rendering property sets an image scaling algorithm.

By default, each browser will apply to 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.

Sometimes, you can combine the crisp-edges a pixelated values of the image-rendering property, for providing them some fallback for each other.
Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable Discrete.
Version CSS3
DOM Syntax object.style.imageRendering = "pixelated";


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

Example of the image-rendering property:

<!DOCTYPE html>
    <title>Title of the document</title>
      .pixelated {
        image-rendering: pixelated;
      .resize {
        width: 45%;
        clear: none;
        float: left;
      .resize:last-of-type {
        float: right;
      .resize img {
        width: 100%;
      img {
        margin-bottom: 20px;
        width: 100%;
      .original img {
        width: 20%;
      body {
        background-color: #ccc;
        padding: 20px;
    <h2>Image-rendering property example</h2>
    <div class="original">
      <p>Original image size:</p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    <div class="resize">
      <p><code>image-rendering: auto</code></p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    <div class="resize">
      <p><code>image-rendering: pixelated</code></p>
      <img class="pixelated" src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />


CSS image-rendering values list


Value Description
auto A standard algorithm maximizing the appearance of an image. This is the default value of this property.
crisp-edges The values of the image is preserved without smoothing or blurring.
pixelated The browser preserves its pixelated style by using nearest-neighbour scaling.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
3.6 +

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?