image-rendering

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Zusammenfassung

Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt 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.

Initialwertauto
Anwendbar aufalle Elemente
VererbtJa
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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'.
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

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 Images Module Level 3
Die Definition von 'image-rendering' in dieser Spezifikation.
Anwärter Empfehlung  

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
image-rendering
Experimentell
Chrome Vollständige Unterstützung 13Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.6IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 6Samsung Internet Android Vollständige Unterstützung 1.0
crisp-edges
Experimentell
Chrome Vollständige Unterstützung 13
Alternativer Name
Vollständige Unterstützung 13
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 65
Vollständige Unterstützung 65
Vollständige Unterstützung 3.6
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15
Alternativer Name
Vollständige Unterstützung 15
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
Keine Unterstützung ? — 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung 6
Alternativer Name
Vollständige Unterstützung 6
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
WebView Android Vollständige Unterstützung ≤37
Alternativer Name
Vollständige Unterstützung ≤37
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
Chrome Android Vollständige Unterstützung 18
Alternativer Name
Vollständige Unterstützung 18
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
Firefox Android Vollständige Unterstützung 65
Vollständige Unterstützung 65
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 14
Alternativer Name
Vollständige Unterstützung 14
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
Keine Unterstützung ? — 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari iOS Vollständige Unterstützung 6
Alternativer Name
Vollständige Unterstützung 6
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
Samsung Internet Android Vollständige Unterstützung 1.0
Alternativer Name
Vollständige Unterstützung 1.0
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
optimizeQuality
VeraltetNicht standardisiert
Chrome Vollständige Unterstützung 28Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.6IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 28Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 7Samsung Internet Android Vollständige Unterstützung 1.5
optimizeSpeed
VeraltetNicht standardisiert
Chrome Vollständige Unterstützung 28Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.6IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15Safari Vollständige Unterstützung 6.1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 28Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 7Samsung Internet Android Vollständige Unterstützung 1.5
pixelated
Experimentell
Chrome Vollständige Unterstützung 41Edge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Vollständige Unterstützung 26Safari Vollständige Unterstützung 10WebView Android Vollständige Unterstützung 41Chrome Android Vollständige Unterstützung 41Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 26Safari iOS Vollständige Unterstützung 10Samsung Internet Android Vollständige Unterstützung 4.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.