CSS properties - image-rendering

revision: December 13, 2025

image-rendering property

- specifies the type of algorithm to be used for image scaling. This property has no effect on images that are not scaled.

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

Property values:

auto : let the browser choose the scaling algorithm. This is default. General use : browser chooses (usually smooth/anti-aliased); good for photos.

smooth : use an algorithm that smooth out the colors in the image. Photos, gradients : optimizes for smoothness (same as auto in most browsers).

high-quality : same as smooth, but with a preference for higher-quality scaling. When available : requests highest quality scaling (supported in some browsers).

crisp-edges : use an algorithm that will preserve the contrast and edges in the image. Line art, diagrams : attempts to preserve contrast and sharp edges (less consistent support).

pixelated : if the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto. Pixel art, icons : preserves hard edges; scales using nearest-neighbor (no blur).

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.imageRendering="pixelated"

example: image-rendering property

image-rendering: auto;

image-rendering: crisp-edges;

image-rendering: pixelated;

image-rendering: smooth;

image-rendering: high-quality;

Original image:

code:

                    <div>
                        <p>image-rendering: auto;</p>
                        <img class="image" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: crisp-edges;</p>
                        <img class="image crisp-edges" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: pixelated;</p>
                        <img class="image pixelated" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: smooth;</p>
                        <img class="image smooth" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>image-rendering: high-quality;</p>
                        <img class="image high-quality" src="../../pics/smiley.png" alt="Smiley" width="32" height="32">
                        <p>Original image: <img src="../../pics/smiley.png" alt="Smiley" width="32" height="32"></p>
                    </div>
                    <style>
                        .image {height: 10vw; width: 10vw; image-rendering: auto;}
                        .crisp-edges {image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */image-rendering: crisp-edges;}
                        .pixelated {image-rendering: pixelated;}
                        .smooth {image-rendering: smooth;}
                        .high-quality {image-rendering: high-quality;} 
                    </style>
                

other tips

using the right image formats and sizes

WebP : Excellent for both photos (lossy) and graphics (lossless), with wide modern support.

AVIF : Even better compression and quality than WebP (use with a fallback).

PNG : Best for sharp graphics, transparency.

JPEG : Good for photos, but avoid for text or sharp edges.

serve images at the correct resolution

Never scale a small image up — always use an image at or above the display size.

Avoid CSS scaling when possible. If you must scale, prefer downscaling over upscaling.

Use width: 100%; height: auto; to maintain aspect ratio.