CSS/Eigenschaften/image-rendering

Browserunterstützung
caniuse.com

Die Eigenschaft image-rendering gibt an, wie sich der Browser beim Skalieren eines Bildes verhält. Diese Eigenschaft entspricht dem gleichnamigen SVG Präsentationsattribut, führt aber neue Werte ein.

Erlaubte Werte

• auto: (Standardwert) Der Browser wählt den Skalierungsalgorithmus aus.
• crisp-edges: Der Browser verwendet ein Verfahren, das Kontrast und Kanten erhält und keine Unschärfe im Bilder erzeugt.
  Chromium-Browser kennen diesen Wert nicht. MDN behauptet zwar, sie würden statt dessen -webkit-optimize-contrast verwenden, steht damit aber im Widerspruch zu caniuse.com und zu eigenen Versuchen.
• pixelated: Die Skalierung soll den pixeligen Charakter des Bildes erhalten. Unschärfen können dabei in Kauf genommen werden.
• smooth: Der Browser soll einen Skalierungsalgorithmus verwenden, der für Fotos die bestmögliche Darstellung liefert. Der Unterschied zu auto ist, dass der Browser im auto-Modus je nach Systemressourcen den Algorithmus wählen darf.
  Bisher in keinem Browser implementiert (Stand 2022)
• high-quality: Ähnlich zu smooth, aber Bilder mit der Angabe high-quality sollen bei knappen Systemressourcen vorrangig bearbeitet werden.
  Bisher in keinem Browser implementiert (Stand 2022)
• optimizeSpeed: (missbilligt, nicht verwenden!): Wird unterstützt, weil die SVG-Spezifikation diesen Wert eingeführt hatte. Die CSS Spezifikation und MDN sind sich nicht einig, ob dieser Wert ein Alias für crisp-edges oder pixelated ist.
• optimizeQuality: (missbilligt, nicht verwenden!): Ebenfalls zur SVG-Kompatibilität vorhanden. Entspricht smooth.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

nein

Beispiel

img {
   image-rendering: crisp-edges;
}

 

Siehe auch

Bilder im Internet / Einbindung mit img - Qualität der Bildskalierung