Como desarrolladores web, jugamos con imágenes todo el tiempo y, en la mayoría de los casos, los navegadores son excelentes para escalar imágenes para que se ajusten a los límites de los diseños de nuestro sitio y, al mismo tiempo, mantenerlas atractivas. Pero ¿qué sucede cuando quieres controlar cómo el navegador escala las imágenes de tu página?
Chrome 41 (beta en enero de 2015) presenta una nueva propiedad CSS image-rendering: pixelated (especificaciones) que te brinda un poco más de control sobre cómo el navegador renderiza una imagen ampliada.
La propiedad CSS image-rendering y el valor pixelated son interesantes porque desactivan la escalamiento suave estándar del navegador (normalmente, la interpolación bilinear) y la reemplazan por otro algoritmo de escalamiento (el 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 escalas a 100 × 100 píxeles, el navegador la renderiza de una manera que no hace que se vea bloqueada. Algo como lo siguiente:
Hay muchos casos en los que no deseas este comportamiento de suavizado y, en su lugar, usas un método que conserva 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=">
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 debería usar esto?
Si solo muestras fotos en tu sitio, es probable que no quieras hacerlo.
Un buen caso de uso son los juegos. Por lo general, debes ampliar el lienzo para que se ajuste al tamaño de la pantalla correctamente. Antes de esta propiedad CSS, el navegador interpolaba el lienzo de manera tal que se veía desenfocado (consulta a continuación [sic]).
Si estás compilando una herramienta de venta de boletos de una aerolínea o una app que muestra códigos QR, con frecuencia, el usuario querrá que sea de pantalla completa para que sea más fácil escanearlos, por lo que es fundamental controlar la renderización de imágenes.
Si te interesa ver la implementación, consulta el error 317991 (se deja abierto para la implementación del valor de bordes nítidos). Destaca el problema para hacer un seguimiento de la implementación).