Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images. It applies to the element itself as well as any images supplied in other properties for the element. It has no effect on non-scaled images.

For example, if the natural size of the image is 100×100px but the page author specifies its dimensions as 200×200px (or 50×50px), then the image will be upscaled (or downscaled) to the new dimensions using the specified algorithm. Scaling may also apply due to user interaction (zooming).

Initial valueauto
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

Values

auto
Default value, 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. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
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. This is intended for images such as pixel art.
pixelated
When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

Formal syntax

auto | crisp-edges | pixelated

Examples

/* applies to GIF and PNG images; avoids blurry edges */

img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }

div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

Live Examples

image-rendering: auto;

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

Specifications

Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
The definition of 'image-rendering' in that specification.
Candidate Recommendation Initial definition

Though initially close from the SVG image-rendering property, the values are quite different now.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (auto) (Yes) 3.6 (1.9.2) No support[1] 11.60 (Yes)
crisp-edges No support 3.6 (1.9.2)-moz No support 11.60-o (Yes) [2]
pixelated 41.0 No support (bug 856337) No support 26.0 (Yes) [3]
optimizeQuality, optimizeSpeed No support 3.6 (1.9.2) No support 11.60 (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 41.0 ? ? ? ?

Notes

[1] Internet Explorer 7 and 8 supports the non-standard -ms-interpolation-mode property with two values (bicubic and nearest-neighbor):

  • applies only to images (JPG, GIF, PNG, ...)
  • in IE7 only for images without transparency
  • does not inherit
  • default value IE7: nearest-neighbor (low quality)
  • default value IE8: bicubic (high quality)
  • obsolete as of IE9

[2] Supported with a non-standard name: -webkit-optimize-contrast.

[3] WebKit Nightly support, see bug

Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual imageData manipulation.