Pixelige Bilder pixelig halten, wenn sie skaliert werden

Dies ist eine kleine Erinnerung daran, dass es eine CSS-Eigenschaft gibt, die dabei hilft zu steuern, was mit Bildern geschieht, wenn sie skaliert werden: image-rendering.

Wir sind es gewohnt, dass das Vergrößern eines Bildes über seine natürliche Größe hinaus (Upscaling) zu Unschärfe führt. So schlimm das auch ist, der Browser versucht sein Bestes, um ein Bild algorithmisch über mehr Pixel als Daten auszugleichen. Aber nehmen wir an, Sie möchten das wirklich *lieber nicht* tun. Angenommen, das Bild ist bereits pixelig (Pixel-Art) oder Sie bevorzugen das Aussehen eines pixeligen Upscalings.

Das können Sie tun!

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

Es ist etwas umständlich, da die Spezifikation drei Werte bietet: auto, pixelated und crisp-edges. Sowohl pixelated als auch crisp-edges scheinen für Pixel-Art für mich dasselbe zu tun, obwohl die Spezifikation sie etwas anders beschreibt (pixelated empfiehlt den "Nearest-Neighbor"- oder einen ähnlichen Algorithmus, während crisp-edges nicht so spezifisch ist).

Zur Umständlichkeit trägt bei, dass Chrome nur pixelated und Firefox nur crisp-edges unterstützt, und für die tiefste Browserunterstützung müssen Sie es mit -moz-crisp-edges präfixen. Glücklicherweise können Sie sie alle zusammenfügen und es scheint in Ordnung zu sein.

Hier ist ein Beispiel mit und ohne, unter Verwendung eines Bildes von James T., das ich auf Tumblr gefunden habe

Siehe den Pen pixelated images von Chris Coyier (@chriscoyier) auf CodePen.