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 gut 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-Property image-rendering: pixelated (Spec) eingeführt, mit der Sie die Darstellung eines vergrößerten Bilds im Browser etwas besser 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. Zum 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- Jedes Element mit einem
background-image-Attribut
Ich verstehe es immer noch nicht. Wo kann ich dieses Tool 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 hat der Browser das Canvas so interpoliert, dass es verschwommen aussieht (siehe unten [sic]).
Wenn Sie ein Tool für Flugtickets oder eine App entwickeln, in der QR-Codes angezeigt werden, sollte der Nutzer häufig im Vollbildmodus sein, damit er leichter gescannt werden kann. Daher ist es wichtig, das Bild-Rendering zu kontrollieren.
Wenn Sie sich die Implementierung ansehen möchten, sehen Sie sich Issue 317991 an. Dieses Problem bleibt offen, bis der Wert „crisp-edges“ implementiert wurde. Setzen Sie ein Sternchen auf das Problem, um die Implementierung zu verfolgen.