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) are defined as synonyms for the smooth and pixelated values respectively.

Formal syntax

auto | crisp-edges | pixelated

Examples

.auto {
  image-rendering: auto;
}

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

Note: In practical use, the pixelated and crisp-edges rules can be conbined 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.

Specifications

Specification Status Comment
CSS Images Module Level 3
The definition of 'image-rendering' in that specification.
Candidate Recommendation Initial definition.
Initial valueauto
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Note: Though initially similar to the SVG image-rendering attribute, the values are quite different now.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
image-rendering
Experimental
Chrome Full support 13Edge No support NoFirefox Full support 3.6IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support 41Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.0
crisp-edges
Experimental
Chrome Full support 1
Alternate Name
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: -webkit-optimize-contrast
Edge No support NoFirefox Full support 65
Full support 65
Full support 3.6
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 15
Alternate Name
Full support 15
Alternate Name
Alternate Name Uses the non-standard name: -webkit-optimize-contrast
No support ? — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
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 Yes
Alternate Name
Full support Yes
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
No support ? — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
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
pixelated
Experimental
Chrome Full support 41Edge No support NoFirefox No support NoIE No support NoOpera Full support 26Safari ? WebView Android Full support 41Chrome Android Full support 41Firefox Android No support NoOpera Android Full support 26Safari iOS ? Samsung Internet Android Full support 4.0
optimizeQuality
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 3.6IE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android No support No
optimizeSpeed
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 3.6IE No support NoOpera Full support YesSafari Full support YesWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
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.