Diese Übersetzung ist in Arbeit.

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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
Experimentell
Chrome Vollständige Unterstützung JaEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.6IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung 41Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
crisp-edges
Experimentell
Chrome Vollständige Unterstützung Ja
Alternativer Name
Vollständige Unterstützung Ja
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 Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung Ja
Alternativer Name
Vollständige Unterstützung Ja
Alternativer Name
Alternativer Name Verwendet den nicht standardisierten Namen: -webkit-optimize-contrast
WebView Android ? Chrome Android ? Edge Mobile ? 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 ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
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 ? WebView Android ? Chrome Android Vollständige Unterstützung 41Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 28Safari iOS ? Samsung Internet Android Vollständige Unterstützung 4.0
optimizeQuality
VeraltetNicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.6IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
optimizeSpeed
VeraltetNicht standardisiert
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 3.6IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
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.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Djfe, Sebastianz, Sheppy, robinboening, vale981
Zuletzt aktualisiert von: mdnwebdocs-bot,