W3cubDocs

/CSS

image-rendering

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 is100×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 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 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.

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
image-rendering 13 79 3.6 No 15 6
crisp-edges 13
13
Uses the non-standard name: -webkit-optimize-contrast
79
79
Uses the non-standard name: -webkit-optimize-contrast
65
65
3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No 15
15
Uses the non-standard name: -webkit-optimize-contrast
6
6
Uses the non-standard name: -webkit-optimize-contrast
optimizeQuality 28 79 3.6 No 15 6.1
optimizeSpeed 28 79 3.6 No 15 6.1
pixelated 41 79 No No 26 10
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
image-rendering ≤37 18 4 14 6 1.0
crisp-edges ≤37
≤37
Uses the non-standard name: -webkit-optimize-contrast
18
18
Uses the non-standard name: -webkit-optimize-contrast
65
65
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
14
14
Uses the non-standard name: -webkit-optimize-contrast
6
6
Uses the non-standard name: -webkit-optimize-contrast
1.0
1.0
Uses the non-standard name: -webkit-optimize-contrast
optimizeQuality ≤37 28 4 14 7 1.5
optimizeSpeed ≤37 28 4 14 7 1.5
pixelated 41 41 No 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) does 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.

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering