image-rendering: ¿Cómo mostrar imágenes pixeladas con CSS3?

Ver ejemplo Descargar

Las imágenes son un recurso fundamental en todo aplicación tanto web, como de escritorio, como móvil; hace poco escuché un comentario indicando que es mejor colocar una imagen representativa (una metáfora) como la siguiente:

Qué emplear frases o palabras indicando la misma acción, que para nuestro ejemplo pudiese ser "Reproducir" en español o "Play" en inglés; y esto por nombrar algunos idiomas, ahora imaginemos si queremos traducir la aplicación a múltiples idiomas y traducir muchas veces la mismas frases o palabras, nos ahorramos mucho tiempo con tan solo indicar la metáfora.

Imágenes pixeladas con CSS

Volviendo al tema principal de esta entrada; Google Chrome en sus últimas versiones (a partir de la versión 41, puedes revizar el soporte del resto de los navegadores en MDN image-rendering) incorporó una nueva opción para el reenderizado de las imágenes (más información en Pixelated Image Rendering Sample) mediante la propiedad image-renderin en conjunto con su valor pixelated permiten mostrar imágenes pixeladas:

.img { 
  image-rendering: pixelated; 
}

Es una propiedad poco común o no es lo normal que emplearía los desarrolladores ya que a veces como que poco importa pero aquí existe y se llama image-rendering como puedes apreciar en el código CSS anterior.

Ejemplo de imágenes pixeladas con CSS

Tomando prestado el ejemplo presentado en el enlace anterior el cual hace uso de la siguiente imagen cuyo tamaño natural (sin distorsionar su tamaño con width y/o height) es de 2x2 píxeles:

Ahora, si aumentamos el tamaño mediante CSS (width y height) a unos 300x300 píxeles veremos la diferencia:

Este en un ejemplo un poco radical o ido a los extremos para poder entender claramente la diferencia (una imagen vale más que mil palabras), ya que en rara ocasión emplearemos una imagen de estas dimensiones (2x2 píxeles) para aumentarla a las dimensiones anteriores (300x300 píxeles); veamos un ejemplo un poco más realista con la siguiente imagen:

Y cambiando sus tamaño natural desde los 200 píxeles hasta los 50 píxeles vea sus efectos y considere sus uso según el efecto que desea conseguir en las imágenes:

Ver ejemplo Descargar

Cuando podemos mostrar imágenes pixeladas

Anteriormente vimos cómo mostrar imágenes pixeladas, ahora, para que nos sirve esta propiedad, como casi todo, la imaginación es el límite pero un posible uso sería que tengamos una imagen de pequeñas dimensiones, y por lo tanto muy ligera y rápida de cargar como imagen promocional (y luego podemos cargar la imagen final por ajax u otra tecnología), de tal forma que el usuario tenga un indicio de que es lo que se está mostrando, y dependiendo del tipo de imagen puedes decidir como quieras que se vea esta imagen de pequeñas proporciones.

Otro escenario posible es el desarrollo de juegos, si al pasar alguna dimensión en especifica indicar como quieras que se vea.

Un último escenario son los códigos QR, al ser imágenes que están compuestas de cuadrados, entonces podemos tener una excelente visualización de las mismas al aumentar de tamaños las mismas, es decir, al ser reescaladas las mismas como vimos en un ejemplo parecido al inicio de esta entrada:

Imagen de 120px de alto y largo con image-rendering: pixelated

Imagen de 120px de alto y largo sin image-rendering: pixelated

Otros valores de la propiedad image-rendering

Esta propiedad en definitiva nos permite indicar al navegador ciertos aspectos claves de la imagen cuando esta va a ser reescalada, en general como queremos que luzca en base a las opciones que tenemos; por tal motivo esta propiedad puede tomar otros valores que no sean solamente el de pixelated como vimos anteriormente, valores como podemos ver a continuación:

• autoEste viene siendo el valor predefinido e indica al algoritmo que maximiza la apariencia de la imagen.
• crisp-edges: Esta propiedad permite que la imagen que se va a escalar se preserve el contraste y de esta forma no existan borrones en el renderizado de la imagen.