Als Webentwickler arbeiten wir ständig mit Bildern und in den meisten Fällen sind Browser sehr gut darin, Bilder so zu skalieren, dass sie in die Grenzen unserer Websitedesigns passen und gleichzeitig schön aussehen. Aber was passiert, wenn Sie festlegen 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
(Spec) eingeführt, mit der Sie die Darstellung eines vergrößerten Bilds im Browser etwas genauer steuern können.
Die CSS-Eigenschaft image-rendering
und der Wert pixelated
sind interessant, da 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.
Angenommen, Sie haben ein Bild mit 2 × 2 Pixeln und skalieren es auf 100 × 100 Pixel. Der Browser würde es so rendern, dass es nicht klobig aussieht. Beispiel:

In vielen Fällen ist dieses Glätten jedoch nicht erwünscht. Stattdessen sollten Sie eine Methode verwenden, die eine genauere Darstellung des Bildes beibehält.
Um diesen Effekt zu erzielen, wenden Sie image-rendering: pixelated;
einfach wie unten beschrieben auf Ihr Bild an.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">

Demo ansehen 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- Beliebiges Element mit einer
background-image
-Property
Ich verstehe es immer noch nicht. Wo sollte ich das verwenden?
Wenn Sie nur Fotos auf Ihrer Website präsentieren, ist das wahrscheinlich nicht erforderlich.
Ein guter Anwendungsfall sind Spiele, bei denen Sie den Canvas häufig skalieren müssen, damit er richtig zur Bildschirmgröße passt. Vor dieser CSS-Eigenschaft interpolierte der Browser den Canvas so, dass er unscharf wirkte (siehe unten [sic]).
Wenn Sie ein Tool für Flugtickets oder eine App entwickeln, in der QR-Codes angezeigt werden, möchten Nutzer häufig, dass das Bild den gesamten Bildschirm einnimmt, damit es leichter zu scannen ist. Daher ist es wichtig, die Bilddarstellung zu steuern.
Wenn Sie sich die Implementierung ansehen möchten, sehen Sie sich Issue 317991 an. Dieses Problem bleibt offen, bis der Wert „crisp-edges“ implementiert ist. Setzen Sie ein Sternchen auf das Problem, um die Implementierung zu verfolgen.