image-rendering

Zusammenfassung

Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gillt für alle Bilder welche einem HTML untergeordnet sind, betrifft allerdings nur skalierte Bilder.  Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.

Syntax

auto | crisp-edges | pixelated

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

image-rendering: inherit

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'.

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%  100%  138%  downsized  upsized 

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

78%  100%  138%  downsized  upsized 

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

78%  100%  138%  downsized  upsized 

Specifications

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

Browser compatibility

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

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