Besuchen Sie unseren Adventskalender 2022!

CSS/Eigenschaften/image-rendering

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
Defaultwert

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