Als Webentwickler arbeiten wir ständig mit Bildern. In den meisten Fällen können Browser Bilder gut skalieren, damit sie in die Grenzen unserer Websitedesigns passen und dabei gut aussehen. Was passiert aber, wenn Sie steuern möchten, wie der Browser die Bilder auf Ihrer Seite skaliert?
In Chrome 41 (Beta im Januar 2015) wird die neue CSS-Property image-rendering: pixelated (Spezifikation) eingeführt, mit der Sie etwas mehr Kontrolle darüber haben, wie der Browser ein vergrößertes Bild rendert.
Die CSS-Eigenschaft image-rendering und der Wert pixelated sind interessant, weil sie die standardmäßige glatte Skalierung des Browsers (normalerweise bilineare Interpolation) deaktivieren und beim Ändern der Größe der Bilder durch einen anderen Skalierungsalgorithmus (in den meisten Fällen Nearest Neighbor) ersetzen.
Wenn Sie ein Bild mit 2 × 2 Pixeln auf 100 × 100 Pixel vergrößern, rendert der Browser es so, dass es nicht blockartig aussieht. Beispiel:
Es gibt viele Fälle, in denen Sie dieses Glättungsverhalten nicht wünschen und stattdessen eine Methode verwenden möchten, die eine genauere Darstellung des Bildes ermöglicht.
Um diesen Effekt zu erzielen, wenden Sie image-rendering: pixelated; einfach wie folgt auf Ihr Bild an.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Demo ausprobieren Wie Sie sehen, hat die Anwendung der Property einen erheblichen Einfluss darauf, wie das Bild gerendert wird.
Diese Property kann an vielen Stellen angewendet werden:
<img>-Elemente<canvas style="image-rendering: pixelated">-Elemente- Alle Elemente mit der Property
background-image
Ich verstehe es immer noch nicht. Wo sollte ich das verwenden?
Wenn Sie auf Ihrer Website nur Fotos präsentieren, ist das wahrscheinlich nicht gewünscht.
Ein gutes Beispiel sind Spiele, bei denen Sie die Leinwand häufig vergrößern müssen, damit sie richtig auf den Bildschirm passt. Vor dieser CSS-Eigenschaft hat der Browser den Canvas so interpoliert, dass er verschwommen aussah (siehe unten [sic]).
Wenn Sie ein Tool für Flugtickets oder eine App entwickeln, in der QR-Codes angezeigt werden, soll die Anzeige häufig im Vollbildmodus erfolgen, damit das Scannen einfacher ist. Daher ist die Steuerung des Renderns von Bildern von entscheidender Bedeutung.
Wenn Sie sich für die Implementierung interessieren, sehen Sie sich Problem 317991 an. Es ist für die Implementierung des Werts „crisp-edges“ offen. Markieren Sie das Problem mit einem Stern, um die Implementierung zu verfolgen.