CSS img rendering – schärfere Grafiken bei Vergrößerungen

Mit Pixelwiederholung gegen Anti Aliasing

CSS img-rendering verhindert das Weichzeichnen durch die Anti-Aliasing-Funktion bei der Vergrößerung und Verkleinerung von Bildern, Hintergrundbildern und canvas-Elementen. Bei Fotos und Illustrationen leistet Anti-Aliasing eine gute Wirkung, aber bei einigen Grafiken wirkt das Anti-Aliasing eher störend und wir würden eine Pixelwiederholung und scharfe Kanten vorziehen.

Bilder werden heute nur in Ausnahmen in ihrer natürlichen Größe im Browser angezeigt, sondern je nach Größe des Viewports verkleinert oder vergrößert.

Schaubild: So funktioniert die Vergrößerung von Bitmap-Bildern

So funktioniert das Vergrößern von Bildern: Neue Pixel werden eingefügt und die Farbe der neuen Pixel wird aus der Farbe ihrer Nachbar-Pixel berechnet.

Die Browser entgegnen den sichtbaren Auswirkungen von Vergrößerungen mit Anti-Aliasing, um skalierte Bilder ohne sichtbare Pixelstufen anzuzeigen. Dem Anti-Aliasing und dem damit verbundenen Weichzeichnungseffekt wiederum entgegnet CSS img-rendering mit den zwei Werten pixelated und crisp-edges, zu vergleichen mit den Einstellungen bilinear und Pixelwiederholung in Bildbearbeitungsprogrammen wie Photoshop.

Interessant ist image-rendering für einfache Grafiken, Karten mit kleinen Details und gescannte Texte – Bilder, die ihre scharfen Kanten brauchen –, allerdings nicht für Fotos.

Gescannter Text und Strichzeichnungen

brehm
<style>
img { 
   width: 100%; height: auto; 
}
</style>
…
<img src="brehm.jpg" width="600" height="400">

Statistik mit Blockgrafik

stats
<style>
img { width: 100%; height: auto; }
</style>
…
<img src="statistic.jpg" width="600" height="400">

Karte mit kleinen Details (als Hintergrundbild)

<style>
.karte { 
   background: url("karte.png");  background-size: 120%; }
</style>
…
…
<div class="karte"></div>

Chrome unterstützt nur pixelated, Safari unterstützt zwar sowohl pixelated als auch crisp-edges, allerdings ohne sichtbaren oder messbaren Unterschied, und bei Hintergrundbildern passiert gar nichts. Firefox unterstützt lt. caniuse image-rendering mit -moz-Präfix, davon ist allerdings in diesen drei Beispielen nichts zu sehen.

Edge ignoriert image-rendering, IE 11 hat noch die nicht standard-konforme Variante -ms-interpolation-mode: nearest-neighbor.

Wenn es zum Bildtyp passt – muss man ausprobieren – , spricht die fehlende Browserunterstützung nicht gegen den Einsatz von image-rendering.

PIXELATED