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.
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
/* Keyword values */
image-rendering: auto;
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.
high-quality
-
Identical to
smooth
, but with a preference for higher-quality scaling. If system resources are constrained, images withhigh-quality
should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree. 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.
Formal definition
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Setting image scaling algorithms
In this example, an image is repeated three times, with each having a different image-rendering
value applied.
CSS
.auto {
image-rendering: auto;
}
.pixelated {
image-rendering: pixelated;
}
.crisp-edges {
image-rendering: crisp-edges;
}
Result
Specifications
Specification |
---|
CSS Images Module Level 3 # the-image-rendering |
Browser compatibility
BCD tables only load in the browser
See also
object-fit
object-position
image-orientation
image-resolution
- CSS images module
- SVG
image-rendering
attribute