Web/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 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 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.

<div>
  <img class="auto" alt="auto" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="https://mdn.mozillademos.org/files/2765/blumen.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 3The definition of 'image-rendering' in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`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 Alternate Name' Full support 13 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Edge Full support 79 Alternate Name' Full support 79 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Firefox Full support 65 Full support 65 Full support 3.6 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 15 Alternate Name' Full support 15 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Safari Full support 6 Alternate Name' Full support 6 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	WebView Android Full support ≤37 Alternate Name' Full support ≤37 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Chrome Android Full support 18 Alternate Name' Full support 18 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Firefox Android Full support 65 Full support 65 Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android Full support 14 Alternate Name' Full support 14 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Safari iOS Full support 6 Alternate Name' Full support 6 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`	Samsung Internet Android Full support 1.0 Alternate Name' Full support 1.0 Alternate Name' Alternate Name' Uses the non-standard name: `-webkit-optimize-contrast`
`optimizeQuality` Deprecated'Non-standard'	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` Deprecated'Non-standard'	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, 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.