image-rendering

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2021.

* Some parts of this feature may have varying levels of support.

Die image-rendering-Eigenschaft von CSS setzt einen Algorithmus zur Bildskalierung. Die Eigenschaft gilt für das Element selbst, für alle in seinen anderen Eigenschaften gesetzten Bilder und für seine Nachkommen.

Probieren Sie es aus

Der User Agent skaliert ein Bild, wenn der Seitenautor Abmessungen angibt, die von seiner natürlichen Größe abweichen. Skalierung kann auch durch Benutzerinteraktionen (z.B. Zoomen) erfolgen. Zum Beispiel, wenn die natürliche Größe eines Bildes 100×100px beträgt, aber seine tatsächlichen Abmessungen 200×200px (oder 50×50px) sind, wird das Bild mithilfe des durch image-rendering angegebenen Algorithmus hoch- oder herunterskaliert. Diese Eigenschaft hat keinen Effekt auf nicht skalierte Bilder.

Syntax

css
/* Keyword values */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;

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

Werte

auto

Der Skalierungsalgorithmus ist UA-abhängig. Ab Version 1.9 (Firefox 3.0) verwendet Gecko eine bilineare Resampling-Methode (hohe Qualität).

smooth

Das Bild sollte mit einem Algorithmus skaliert werden, der das Erscheinungsbild des Bildes maximiert. Insbesondere sind Skalierungsalgorithmen akzeptabel, die Farben "glätten", wie bilineare Interpolation. Dies ist für Bilder wie Fotos gedacht.

crisp-edges

Das Bild wird mit einem Algorithmus wie "nächster Nachbar" skaliert, der Kontrast und Kanten im Bild erhält. Allgemein gedacht für Bilder wie Pixelkunst oder Liniendarstellungen, ohne Verwischung oder Farbschmierung.

pixelated

Das Bild wird mit dem "nächster Nachbar"-Algorithmus oder einem ähnlichen auf die nächste ganze Vielfache der ursprünglichen Bildgröße skaliert und dann mit glatter Interpolation auf die endgültige gewünschte Größe gebracht. Dies soll ein "verpixelt" Aussehen bewahren, ohne Skalierungsartefakte einzuführen, wenn die hochskalierte Auflösung kein ganzzahliges Vielfaches der ursprünglichen ist.

Hinweis: Die Werte optimizeQuality und optimizeSpeed, die in einem frühen Entwurf vorhanden sind (und von ihrem SVG-Pendant image-rendering stammen), sind als Synonyme für die Werte smooth bzw. pixelated definiert.

Hinweis: Das CSS images-Modul definiert einen high-quality-Wert für die image-rendering-Eigenschaft, um eine Präferenz für höherwertige Skalierung bereitzustellen. Dieser wird jedoch in keinem Browser unterstützt.

Formale Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

image-rendering = 
auto |
smooth |
high-quality |
pixelated |
crisp-edges

Beispiele

Festlegen von Bildskalierungsalgorithmen

In diesem Beispiel wird ein Bild dreimal wiederholt, wobei jedem ein anderer image-rendering-Wert zugewiesen wird.

CSS

css
.auto {
  image-rendering: auto;
}

.smooth {
  image-rendering: smooth;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

Ergebnis

Spezifikationen

Specification
CSS Images Module Level 3
# the-image-rendering
Scalable Vector Graphics (SVG) 2
# ImageRendering

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image-rendering
auto
crisp-edges
optimizeQuality
DeprecatedNon-standard
optimizeSpeed
DeprecatedNon-standard
pixelated
smooth
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch