Este es un pequeño recordatorio de que existe una propiedad CSS para ayudar a controlar lo que sucede con las imágenes a medida que aumentan de tamaño: renderizado de imágenes.
Estamos bastante acostumbrados a la idea de que escalar una imagen más grande que su tamaño natural (escalado) hace que se vea borrosa. Por terrible que sea, es el navegador el que hace lo mejor que puede para suavizar algorítmicamente una imagen en más píxeles de los que tiene datos. Pero digamos que realmente prefieres no hacerlo. Digamos que la imagen ya es pixel-y (pixel art), o prefiere el aspecto de una mejora pixelada.
¡Puedes hacerlo!
img {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}Es un poco incómodo porque la especificación ofrece tres valores: auto, pixelated, y crisp-edges. Ambos pixelated y crisp-edges, para el arte de píxeles, parece que me hacen lo mismo, aunque la especificación habla de ellos de manera ligeramente diferente (pixelated recomienda el “vecino más cercano” o un algoritmo similar mientras crisp-edges no es tan específico).
Además de la incomodidad, Chrome solo admite pixelated y Firefox solo admite crisp-edges, y para obtener la compatibilidad más profunda con el navegador, debe anteponerlo a -moz-crisp-edges. Afortunadamente, puedes aplastarlos todos juntos y parece estar bien.
Aquí hay un ejemplo con y sin, usando una imagen de James T. que encontré en Tumblr:
Vea las imágenes pixeladas de Pen por Chris Coyier (@chriscoyier) en CodePen.