image-rendering

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2021.

* Some parts of this feature may have varying levels of support.

The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

Try it

The user agent will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering. This property has no effect on non-scaled images.

Syntax

css
/* Keyword values */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Values

auto

The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).

smooth

The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.

crisp-edges

The image is scaled with an algorithm such as "nearest neighbor" that preserves contrast and edges in the image. Generally intended for images such as pixel art or line drawings, no blurring or color smoothing occurs.

pixelated

The image is scaled with the "nearest neighbor" or similar algorithm to the nearest integer multiple of the original image size, then uses smooth interpolation to bring the image to the final desired size. This is intended to preserve a "pixelated" look without introducing scaling artifacts when the upscaled resolution isn't an integer multiple of the original.

Note: The values optimizeQuality and optimizeSpeed present in an early draft (and coming from its SVG counterpart image-rendering) are defined as synonyms for the smooth and pixelated values respectively.

Note: The CSS images module defines a high-quality value for the image-rendering property to provide a preference for higher-quality scaling, however, this is not supported in any browsers.

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

image-rendering = 
auto |
smooth |
high-quality |
pixelated |
crisp-edges

Examples

Setting image scaling algorithms

In this example, an image is repeated three times, with each having a different image-rendering value applied.

CSS

css
.auto {
  image-rendering: auto;
}

.smooth {
  image-rendering: smooth;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

Result

Specifications

Specification
CSS Images Module Level 3
# the-image-rendering
Scalable Vector Graphics (SVG) 2
# ImageRendering

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image-rendering
auto
crisp-edges
optimizeQuality
DeprecatedNon-standard
optimizeSpeed
DeprecatedNon-standard
pixelated
smooth
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

See also