CSS image-rendering Eigenschaft
CSS image-rendering steuert den Skalierungsalgorithmus für Bilder. Erklärt auto, pixelated und crisp-edges mit Beispielen und Browser-Unterstützung.
Die CSS-Eigenschaft image-rendering teilt dem Browser mit, welchen Skalierungsalgorithmus er verwenden soll, wenn ein Bild in einer anderen als seiner natürlichen (intrinsischen) Auflösung angezeigt wird. Sie steuert wie Pixel interpoliert werden — nicht ob das Bild skaliert wird.
Diese Seite erklärt, was jeder Wert bewirkt, wann pixelated gegenüber crisp-edges zu bevorzugen ist, wie Browser-Unterschiede behandelt werden, und enthält ausführbare Beispiele.
Wann würde ich es verwenden?
Standardmäßig wendet der Browser glatte Interpolation (bilinear oder bikubisch) an, wenn er ein Bild vergrößert oder verkleinert. Das sieht bei Fotografien gut aus, unschärft aber Bilder, die pixelgenau scharf bleiben sollen. Greifen Sie auf image-rendering zurück, wenn:
- Sie Pixel-Art, Retro-Spieler-Sprites oder 8-Bit-Icons hochskalieren und eckige Pixel statt Unschärfe beibehalten möchten.
- Sie einen QR-Code, Strichcode oder ein technisches Diagramm vergrößern, bei dem jedes Pixel Bedeutung trägt.
- Sie ein niedrigauflösendes Bild bewusst hochskalieren und klare, harte Kanten einem weichen, matschigen Ergebnis vorziehen.
- Sie ein canvas-basiertes Spiel entwickeln und möchten, dass der Browser skalierte Canvas-Pixel scharf hält.
Für Fotografien und Verläufe belassen Sie es bei auto — dort ist die Glättung genau das, was Sie möchten.
crisp-edges und pixelated sind ähnlich, aber nicht identisch. pixelated garantiert Nearest-Neighbor-Skalierung; crisp-edges lässt jeden Browser einen scharfen Algorithmus wählen. Autoren listen oft beide auf, damit eines als Fallback für das andere über verschiedene Engines hinweg dient.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente |
| Vererbt | Ja |
| Animierbar | Diskret |
| Version | CSS3 |
| DOM Syntax | object.style.imageRendering = "pixelated" |
Syntax
image-rendering: auto | crisp-edges | pixelated | initial | inherit;Die Eigenschaft akzeptiert ein einzelnes Schlüsselwort. Es gibt keine Kurzschreibweise.
Werte
| Wert | Beschreibung |
|---|---|
auto | Der Browser wählt einen Algorithmus, der die visuelle Qualität maximiert. Bei den meisten Browsern bedeutet dies bilineare oder bikubische Interpolation — glatt, kann aber bei Pixel-Art unscharf wirken. Dies ist der Standardwert. |
crisp-edges | Das Bild wird ohne jegliche Glättung oder Anti-Aliasing skaliert. Der Browser wählt seinen eigenen kontrastreichen Algorithmus (kann Nearest-Neighbor oder eine andere scharfe Methode sein). Die Ergebnisse können zwischen Engines leicht variieren. |
pixelated | Strikte Nearest-Neighbor-Skalierung. Jedes Quellpixel wird einem oder mehreren Zielpixeln der gleichen Farbe ohne Mischung zugeordnet. Garantiert den blockhaften Pixel-Look in allen unterstützenden Browsern. |
initial | Setzt die Eigenschaft auf ihren Standardwert (auto) zurück. |
inherit | Erbt den Wert vom Elternelement. |
pixelated vs crisp-edges — was ist der Unterschied?
Beide Werte verhindern Glättung, aber ihre Verträge unterscheiden sich:
pixelatedist eine präzise Spezifikation: der Browser muss Nearest-Neighbor-Skalierung verwenden. Jedes Pixel in der Ausgabe entspricht genau einem Quellpixel — Sie erhalten harte, zackige, absichtlich blockhafte Ergebnisse. Darauf verlassen sich Pixel-Art-Spiele.crisp-edgessagt "Glättung vermeiden und Kontrast erhalten", überlässt den Algorithmus aber dem Browser. Firefox verwendet seinen eigenen scharfen Algorithmus; älteres Safari verwendete-webkit-optimize-contrast. Das visuelle Ergebnis ist normalerweise sehr ähnlich wie beipixelated, wird aber nicht garantiert identisch sein.
Für Pixel-Art bevorzugen Sie pixelated. Verwenden Sie crisp-edges als Sicherheitsnetz für ältere Browser, die pixelated nicht implementiert haben.
Beispiele
Grundlegender Vergleich: auto vs pixelated
Das folgende Beispiel zeigt dasselbe kleine Bild, das auf das Dreifache seiner natürlichen Breite gerendert wird. Die auto-Version ist unscharf; pixelated behält harte Kanten.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.pixelated {
image-rendering: pixelated;
}
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.resize {
flex: 1 1 45%;
}
.resize img, .original img {
width: 100%;
display: block;
}
body {
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<h2>Image-rendering property example</h2>
<div class="wrapper">
<div class="original">
<p>Original image size:</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
</div>
<div class="resize">
<p><code>image-rendering: auto</code></p>
<img src="https://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
</div>
<div class="resize">
<p><code>image-rendering: pixelated</code></p>
<img class="pixelated" src="https://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
</div>
</div>
</body>
</html>Ergebnis
Verwendung von crisp-edges mit einem Fallback
Da crisp-edges eine wechselhafte Geschichte hat (älteres Safari benötigte -webkit-optimize-contrast), ist es am sichersten, alle drei Deklarationen zu stapeln. Der Browser behält den letzten Wert bei, den er erkennt:
.sharp-upscale {
image-rendering: -webkit-optimize-contrast; /* Safari < 13 */
image-rendering: crisp-edges; /* Firefox, most modern browsers */
image-rendering: pixelated; /* Chrome, Edge, Safari 13+ */
}image-rendering auf einen CSS-Hintergrund anwenden
Die Eigenschaft funktioniert sowohl bei background-image als auch bei <img>-Elementen. Dies ist nützlich für gekachelte Pixel-Art-Hintergründe:
.pixel-bg {
background-image: url('sprite-sheet.png');
background-size: 300%; /* zoom in */
image-rendering: pixelated; /* keep pixels sharp */
}image-rendering auf ein Canvas-Element anwenden
Wenn Sie bei niedriger logischer Auflösung auf einem <canvas> zeichnen und das Element dann per CSS hochskalieren, hält pixelated die Canvas-Pixel scharf — eine gängige Technik für Pixel-Art-Spiele:
<canvas
id="game"
width="64"
height="64"
style="width: 320px; height: 320px; image-rendering: pixelated;"
></canvas>Die width/height-Attribute legen die Zeichenfläche fest (64 × 64 Pixel). Die CSS-width/height skalieren das Element auf dem Bildschirm um das 5-Fache. Ohne pixelated würde der Browser das skalierte Canvas unscharf darstellen.
Was zu beachten ist
- Es betrifft nur skalierte Bilder. Wenn ein Bild in seiner natürlichen Größe angezeigt wird, gibt es nichts zu interpolieren, daher hat
image-renderingkeinen sichtbaren Effekt. - Vererbung kann überraschen. Die Eigenschaft wird vererbt, daher gilt das Setzen von
image-rendering: pixelatedauf einem<div>für alle untergeordneten<img>- und Hintergrundbilder, es sei denn, Sie überschreiben es. pixelatedskaliert auch herunter. Nearest-Neighbor gilt auch, wenn das Bild kleiner als seine Quelle ist, was aliasbehaftet wirken kann. Für allgemeines Downscaling siehtautonormalerweise besser aus.- Es gilt für
<img>,background-image,<canvas>und SVG-<image>-Elemente — nicht für Vektorinhalte (Inline-SVG-Pfade), die der Browser direkt rastered. - HiDPI / Retina-Bildschirme. Auf einem 2×-Bildschirm erscheint Pixel-Art, die mit
image-rendering: pixelatedangezeigt wird, mit 2 CSS-Pixeln pro Quellpixel. Erwägen Sie eine@media (min-resolution: 2dppx)-Regel mit einem größeren natürlichen Bild, wenn Sie mehr physische Pixeldetails möchten. object-fitwird vorimage-renderingausgeführt. Die Eigenschaftobject-fitentscheidet, wie das Bild seine Box füllt;image-renderingentscheidet dann, wie das skalierte Ergebnis aussieht.
Browser-Unterstützung
pixelated wird in Chrome, Edge, Safari 13+ und Firefox 93+ gut unterstützt. crisp-edges wird in allen modernen Browsern (Firefox, Chrome, Safari, Edge) unterstützt und ist die sicherere Wahl für Code, der auf älteren Browsern laufen muss. Der Legacy-Wert -webkit-optimize-contrast wird nur für Safari 12 und älter benötigt.
Verwandte Eigenschaften
background-image— Bilder setzen, dieimage-renderingdann schärfen kann.background-size— Hintergrundbilder skalieren, wodurchimage-renderingrelevant wird.object-fit— steuern, wie ein ersetztes Element seine Box füllt, bevor das Rendering greift.object-position— das Bild innerhalb der Box zusammen mitobject-fitneu positionieren.width— Elemente in der Größe verändern, wasimage-renderingrelevant macht.filter— visuelle Effekte (Unschärfe, Kontrast usw.) nach dem Rendering anwenden.- CSS3 properties — weitere moderne CSS-Eigenschaften durchsuchen.