Halten Pixelige Bilder Verpixelt, da Sie Skala

0
47

Dies ist eine kleine Erinnerung daran, dass es eine CSS-Eigenschaft für das helfen Sie Steuern, was geschieht, zu Bildern, wie Sie scale-up: Bild-rendering.

Wir sind sehr verwendet, um die Idee, dass die Skalierung eines Bildes größer als seine Natürliche Größe (upscaling), wird es unscharf. So schrecklich wie das ist, es ist der browser tun das beste, Sie können, um algorithmisch glatt aus einem Bild mit mehr Pixel, als Sie es Daten. Aber angenommen, Sie würde wirklich lieber, es nicht tun. Sagen das Bild ist schon pixel-y – (pixel-art), oder Sie bevorzugen das Aussehen von einem verpixelten upscaling.

Sie können es tun!

img {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}

Es ist ein wenig umständlich, dass die Spezifikation bietet drei Werte: auto, pixelig und scharfe Kanten. Beide verpixelt und scharfe Kanten, für die pixel-Kunst, scheinen das gleiche zu tun für mich, obwohl die spec spricht über Sie leicht unterschiedlich (pixelig empfiehlt die “nächsten Nachbarn” oder ähnlichen Algorithmus, während scharfe Kanten sind nicht so spezifisch).

Hinzufügen, um die Ungeschicklichkeit, Chrome unterstützt nur pixelig und Firefox unterstützt nur scharfe Kanten, und für die tiefsten browser-Unterstützung, du solltest das Präfix-moz-crisp-edges. Glücklicherweise können Sie zerschlagen Sie alle zusammen und es scheint in Ordnung.

Hier ein Beispiel mit und ohne, mit einem Bild von James T. fand ich auf Tumblr:

Finden Sie den Stift, pixelige Bilder von Chris Coyier (@chriscoyier) auf CodePen.