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.
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.
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.
/* 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;
auto
The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
smooth
Experimental
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
Experimental
Identical to smooth
, but with a preference for higher-quality scaling. If system resources are constrained, images with high-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 the nearest-neighbor algorithm.
pixelated
Using the nearest-neighbor algorithm, the image is scaled up to the next integer multiple that is greater than or equal to its original size, then scaled down to the target size, as for smooth
. When scaling up to integer multiples of the original size, this will have the same effect as crisp-edges
.
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.
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
In practical use, the pixelated
and crisp-edges
rules can be combined to provide some fallback for each other. (Just prepend the actual rules with the fallback.) The Canvas API can provide a fallback solution for pixelated
through manual image data manipulation or with imageSmoothingEnabled
.
.auto { image-rendering: auto; } .pixelated { image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
Specification |
---|
CSS Images Module Level 3 # the-image-rendering |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
image-rendering |
13 | 79 | 3.6 | No | 15 | 6 | 3 | 18 | 4 | 14 | 6 | 1.0 |
crisp-edges |
13 | 79 | 653.6 | No | 15 | 76 | ≤37 | 18 | 654 | 14 | 76 | 1.0 |
optimizeQuality |
28 | 79 | 3.6 | No | 15 | 7 | 4.4 | 28 | 4 | 14 | 7 | 1.5 |
optimizeSpeed |
28 | 79 | 3.6 | No | 15 | 7 | 4.4 | 28 | 4 | 14 | 7 | 1.5 |
pixelated |
41 | 79 | 93 | No | 26 | 10 | 41 | 41 | 93 | 26 | 10 | 4.0 |
Note: Although crisp-edges
is supposed to use a pixel-art scaler like in the specification example, in practice no browsers (as of January 2020) do so. In Firefox, crisp-edges
is interpreted as nearest-neighbor, pixelated
is not supported, and auto
is interpolated as trilinear or linear.
For behavior on Chromium and Safari (WebKit), see the GetInterpolationQuality
function and CSSPrimitiveValue::operator ImageRendering()
respectively.
object-fit
, object-position
, image-orientation
, image-rendering
, image-resolution
.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering