Als Webentwickler spielen wir ständig mit Bildern und in den meisten Fällen sind Browser großartig, wenn es darum geht, Bilder so zu skalieren, dass sie in die Grenzen unserer Websitedesigns passen und gleichzeitig schön aussehen. Aber was passiert, 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-Eigenschaft image-rendering: pixelated (Spezifikation) eingeführt, mit der du besser steuern kannst, wie der Browser ein vergrößertes Bild rendert.
Die CSS-Eigenschaft image-rendering und der Wert pixelated sind interessant, da sie die standardmäßige gleichmäßige Skalierung des Browsers (normalerweise bilineare Interpolation) deaktivieren und beim Ändern der Bildgröße durch einen anderen Skalierungsalgorithmus (meist der nächste Nachbar) ersetzen.
Angenommen, Sie haben ein Bild mit 2 × 2 Pixeln und skaliert es auf 100 × 100 Pixel. Der Browser würde es so rendern, dass es nicht blockig aussieht. Beispiel:
Es gibt viele Fälle, in denen dieses Glättungsverhalten nicht gewünscht ist und stattdessen eine Methode verwendet werden sollte, bei der eine genauere Darstellung des Bildes beibehalten wird.
Wenden Sie image-rendering: pixelated; einfach wie unten beschrieben auf Ihr Bild an, um diesen Effekt zu erzielen.
<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 Eigenschaft große Auswirkungen darauf, wie das Bild gerendert wird.
Diese Eigenschaft kann an vielen Stellen angewendet werden:
<img>-Elemente<canvas style="image-rendering: pixelated">-Elemente- Jedes Element mit einer
background-image-Eigenschaft
Ich habs immer noch nicht verstanden. Wo sollte ich diese Funktion verwenden?
Wenn Sie auf Ihrer Website nur Fotos anzeigen, möchten Sie dies wahrscheinlich nicht.
Ein toller Anwendungsfall sind Spiele. Oft müssen Sie den Canvas vergrößern, damit er auf die Bildschirmgröße passt. Vor dieser CSS-Eigenschaft interpoliert der Browser den Canvas so, dass er verschwommen aussieht (siehe unten [sic]).
Wenn Sie ein Tool für Flugtickets oder eine App entwickeln, die QR-Codes anzeigt, möchten die Nutzer häufig, dass sie im Vollbildmodus angezeigt werden, damit sie leichter gescannt werden können. Daher ist die Kontrolle des Image-Renderings von entscheidender Bedeutung.
Wenn Sie sich die Implementierung ansehen möchten, gehen Sie zu Problem 317991. Hier ist noch offen für die Implementierung des Wertes „Crisp-Edges“. Markieren Sie das Problem, um die Implementierung zu verfolgen.)