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.
Syntax
/* Keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* Global values */ image-rendering: inherit; image-rendering: initial; 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 must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. Suitable algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2×SaI and hqx-family algorithms. This value is intended for pixel-art images, such as in browser games.
pixelated
- When scaling the image up, the nearest-neighbor algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as
auto
.
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
auto | crisp-edges | pixelated
Examples
Setting image scaling algorithms
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
.
<div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div>
img { height: 200px; }
CSS
.auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'image-rendering' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
image-rendering | Chrome Full support 13 | Edge Full support 79 | Firefox Full support 3.6 | IE No support No | Opera Full support 15 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
crisp-edges | Chrome
Full support
13
| Edge
Full support
79
| Firefox
Full support
65
| IE No support No | Opera
Full support
15
| Safari
Full support
6
| WebView Android
Full support
≤37
| Chrome Android
Full support
18
| Firefox Android
Full support
65
| Opera Android
Full support
14
| Safari iOS
Full support
6
| Samsung Internet Android
Full support
1.0
|
optimizeQuality | Chrome Full support 28 | Edge Full support 79 | Firefox Full support 3.6 | IE No support No | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support ≤37 | Chrome Android Full support 28 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 7 | Samsung Internet Android Full support 1.5 |
optimizeSpeed | Chrome Full support 28 | Edge Full support 79 | Firefox Full support 3.6 | IE No support No | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support ≤37 | Chrome Android Full support 28 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 7 | Samsung Internet Android Full support 1.5 |
pixelated | Chrome Full support 41 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 26 | Safari Full support 10 | WebView Android Full support 41 | Chrome Android Full support 41 | Firefox Android No support No | Opera Android Full support 26 | Safari iOS Full support 10 | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
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) does so. In Firefox, pixelated
is interpreted as nearest-neighbor, while auto
and crisp-edges
are interpolated as trilinear or linear.
For behavior on Chromium and Safari (WebKit), see the GetInterpolationQuality
function and CSSPrimitiveValue::operator ImageRendering()
respectively.
See also
- Other image-related CSS properties:
object-fit
,object-position
,image-orientation
,image-rendering
,image-resolution
.