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

- Andrés Cruz

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:

Reproducir icono

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.

Es mejor emplear metáforas en vez de frases en la medida de lo posible.

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:

imagen cuadrado

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

pixelated vs renderizado por defecto de los navegadores

imagen cuadrado imagen cuadrado

(Tamaño natural de la imagen 2x2 píxeles)

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:

tigre blanco

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:

pixelated vs renderizado por defecto de los navegadores

tigre blanco tigre blanco

(Tamaño natural de la imagen 200x200 píxeles)

pixelated vs renderizado por defecto de los navegadores

tigre blanco tigre blanco

Tamaño natural de la imagen 100x100 píxeles

pixelated vs renderizado por defecto de los navegadores

tigre blanco tigre blanco

Tamaño natural de la imagen 50x50 píxeles

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:

QR small

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

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.
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.