image-Renderización:pixelada

Como desarrolladores web, jugamos con imágenes todo el tiempo y, en la mayoría de los casos, los navegadores son excelentes para adaptar las imágenes a los límites de nuestros diseños de sitios y, al mismo tiempo, mantener las imágenes bonitas. Pero ¿qué sucede cuando quieres controlar la forma en que el navegador ajusta la escala de las imágenes de tu página?

Chrome 41 (versión beta en enero de 2015) presenta una nueva propiedad de CSS image-rendering: pixelated (Especificaciones) que te da un poco más de control sobre la manera en que el navegador renderiza una imagen ampliada.

La propiedad de CSS image-rendering y el valor pixelated son interesantes porque desactivan el ajuste de escala suave estándar del navegador (interpolación bilineal normalmente) y lo reemplazan por otro algoritmo de escalamiento (vecino más cercano en la mayoría de los casos) cuando se cambia el tamaño de las imágenes.

Imagina que tienes una imagen de 2 × 2 píxeles y la escalaste a 100 × 100 píxeles, el navegador la renderizaría de una manera que no la viera formada por bloques. Algo como:

Renderización fluida

Hay muchos casos en los que no quieres este comportamiento de suavizado y, en su lugar, se usa un método que preserva una representación más precisa de la imagen.

Para obtener este efecto, simplemente aplica image-rendering: pixelated; a tu imagen de la siguiente manera.

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Renderización pixelada

Prueba la demostración. Como puedes ver, la aplicación de la propiedad tiene un efecto significativo en la forma en que se renderiza la imagen.

Esta propiedad se puede aplicar en muchos lugares:

  • Elementos <img>
  • Elementos <canvas style="image-rendering: pixelated">
  • Cualquier elemento con una propiedad background-image

Sigo sin entender. ¿Dónde debo usar esta función?

Si solo muestras fotos en tu sitio, es probable que no quieras que esto suceda.

Un buen caso de uso son los juegos, con frecuencia tienes que ampliar el lienzo para que se ajuste al tamaño de la pantalla de forma correcta. Antes de esta propiedad de CSS, el navegador interpolaba el lienzo de tal manera que se vería borroso (consulta a continuación [sic]).

Si estás creando una herramienta de venta de boletos de una aerolínea o una app que muestra códigos QR, con frecuencia, el usuario querrá que esté en pantalla completa para que sea más fácil de escanear, por lo que controlar la renderización de imágenes es fundamental.

Si te interesa ver la implementación, consulta el error 317991 (queda abierto para la implementación del valor de bordes nítidos). Destaca el problema para hacer un seguimiento de la implementación).