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.

Die image-rendering-CSS-Eigenschaft legt einen Bildskalierungsalgorithmus fest. Die Eigenschaft gilt für ein Element selbst, für alle Bilder, die in dessen anderen Eigenschaften festgelegt sind, und für seine Nachkommen.

Probieren Sie es aus

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

Syntax

css

/* Keyword values */
image-rendering: auto;
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. Seit 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 die Erscheinung des Bildes maximiert. Insbesondere sind Skalierungsalgorithmen akzeptabel, die Farben "glätten", wie etwa die bilineare Interpolation. Dies ist für Bilder gedacht, wie z. B. Fotos.
high-quality: Identisch mit smooth, aber mit einer Vorliebe für eine qualitativ hochwertigere Skalierung. Wenn die Systemressourcen eingeschränkt sind, sollten Bilder mit high-quality gegenüber denen mit jedem anderen Wert priorisiert werden, wenn es darum geht, welche Bilder in ihrer Qualität zu verschlechtern sind und in welchem Maße.
crisp-edges: Das Bild wird mit einem Algorithmus wie "nächster Nachbar" skaliert, der Kontrast und Kanten im Bild erhält. Generell für Bilder wie Pixelgrafiken oder Zeichnungen ohne Verwischung oder Farbeglättung gedacht.
pixelated: Das Bild wird mit dem Algorithmus "nächster Nachbar" oder einem ähnlichen auf das nächste ganzzahlige Vielfache der Originalgröße skaliert und verwendet dann eine glatte Interpolation, um das Bild auf die endgültige gewünschte Größe zu bringen. Dies dient dazu, einen "verpixelten" Look zu bewahren, ohne Skalierungsartefakte einzuführen, wenn die hochskalierte Auflösung kein ganzzahliges Vielfaches der Originalgröße ist.

Hinweis: Die Werte optimizeQuality und optimizeSpeed, die in einem frühen Entwurf und aus dem SVG-Gegenstück image-rendering stammen, sind als Synonyme für die Werte smooth und pixelated definiert.

Formale Definition

Initialer Wert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Festlegen von Bildskalierungsalgorithmen

In diesem Beispiel wird ein Bild dreimal wiederholt, wobei für jedes ein anderer image-rendering-Wert angewendet wird.

<div>
  <img
    class="auto"
    alt="A small photo of some white and yellow flower against a leafy green background. The image is about 33% smaller than the size it is being displayed at. This upscaling causes the image to appear blurry, with notable soft edges between objects."
    src="blumen.jpg" />
  <img
    class="pixelated"
    alt="The same photo as the previous image, which is also being upscaled the same amount. Browsers that support the pixelated value for the image-rendering property display the image as very pixelated. Individual pixels are clearly visible and edges appear much sharper."
    src="blumen.jpg" />
  <img
    class="crisp-edges"
    alt="The same photo as the previous images, which is also being upscaled the same amount. Browsers that support the crisp-edges value for the image-rendering property display the image as very pixelated. In these examples, there is virtually no perceivable difference between the pixelated and crisp-edges versions."
    src="blumen.jpg" />
</div>

img {
  height: 200px;
}

CSS

css

.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

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

Ergebnis

Spezifikationen

Specification
CSS Images Module Level 3 # the-image-rendering

Browser-Kompatibilität

BCD tables only load in the browser