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

Ver ejemplo Descargar

Las imágenes son un recurso fundamental en cualquier aplicación: web, móvil o de escritorio. En mi experiencia, siempre que puedo prefiero usar metáforas visuales antes que texto. Un icono de “play”, por ejemplo, comunica mucho más rápido que la palabra Reproducir, y además evita problemas cuando la aplicación debe traducirse a varios idiomas:

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.

Esa idea de aprovechar mejor las imágenes conecta directamente con el tema de este artículo: cómo controlar el renderizado de imágenes en CSS para conseguir un efecto pixelado, algo especialmente útil cuando escalamos imágenes pequeñas o buscamos un estilo visual concreto.

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.

¿Qué es el renderizado pixelado en CSS?

Cuando una imagen se escala (aumentando o reduciendo su tamaño con width y height), el navegador aplica por defecto algoritmos de suavizado para que no se vea “mal”. El problema es que ese suavizado difumina los píxeles, algo totalmente indeseado en ciertos casos.

Aquí es donde entra en juego la propiedad:

image-rendering: pixelated;

Con este valor le indicamos al navegador que respete los píxeles originales de la imagen, mostrando bloques bien definidos en lugar de un reescalado borroso.

No es una propiedad que la mayoría de desarrolladores use a diario, pero cuando la necesitas, marca una diferencia enorme.

La propiedad image-rendering y sus valores

image-rendering permite controlar cómo se interpola una imagen al cambiar de tamaño. Los valores más relevantes son:

• auto: Es el valor por defecto. El navegador decide el algoritmo que “mejor se vea”, normalmente suavizando la imagen.
• pixelated: Prioriza píxeles grandes y definidos. Ideal para pixel art, imágenes pequeñas, QR o gráficos cuadriculados.
• crisp-edges: Intenta preservar el contraste y los bordes sin tanto suavizado, aunque el resultado depende bastante del navegador.

En la práctica, pixelated es el valor más claro y consistente cuando lo que buscas es un efecto pixelado real.

¿Cómo aplicar imágenes pixeladas con CSS?

La aplicación es tan simple como añadir una clase CSS a la imagen:

.img {
 image-rendering: pixelated;
}

A partir de ahí, el efecto se aprecia cuando modificas el tamaño real de la imagen.

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:

Pixel art vs renderizado por defecto de los navegadores

(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:

Si la escalamos a 300×300:

• Sin image-rendering: pixelated → la imagen se ve borrosa.
• Con image-rendering: pixelated → cada píxel se convierte en un bloque perfectamente definido.

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

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

pixelated vs renderizado por defecto de los navegadores

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

pixelated vs renderizado por defecto de los navegadores

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.

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.

Casos de uso prácticos

• Placeholders rápidos y ligeros
  • Un uso muy interesante es mostrar una imagen muy pequeña y ligera como vista previa mientras se carga la versión final (por AJAX u otra técnica). El usuario percibe inmediatamente qué se va a mostrar, aunque sea de forma pixelada, y la carga inicial es mucho más rápida.
• Juegos y arte pixel
  • Si estás desarrollando juegos o interfaces con estética retro, image-rendering: pixelated es prácticamente obligatorio. Permite escalar sprites sin que pierdan su esencia, algo clave en este tipo de proyectos.
• Códigos QR y otros gráficos cuadriculados
  • Otro caso donde lo he visto funcionar especialmente bien es con códigos QR. Al estar compuestos por cuadrados, el escalado pixelado mantiene una visualización limpia y legible, incluso al aumentar mucho el tamaño de la imagen.

Sin esta propiedad, el suavizado puede introducir borrones que afectan a la lectura del código.

Compatibilidad entre navegadores

El soporte de image-rendering: pixelated es bastante bueno en navegadores modernos. Chrome lo incorporó a partir de versiones relativamente antiguas, y hoy en día está disponible en la mayoría de entornos habituales.

Aun así, conviene revisar siempre la compatibilidad actualizada en la documentación de MDN si el proyecto tiene requisitos muy específicos.

Preguntas frecuentes sobre imágenes pixeladas en CSS

¿image-rendering: pixelated funciona al reducir imágenes?
Sí, aunque el efecto se nota más cuando escalas hacia arriba. Al reducir, ayuda a mantener un estilo más “duro” sin suavizados.

• ¿Es lo mismo pixelated que crisp-edges?
  • No exactamente. pixelated fuerza bloques visibles; crisp-edges intenta preservar bordes, pero el resultado puede variar más según el navegador.
• ¿Sirve para cualquier tipo de imagen?
  • Funciona mejor con imágenes simples, pixel art, gráficos técnicos o QR. En fotografías grandes, el efecto puede no ser deseable.

Conclusión

image-rendering: pixelated es una de esas propiedades de CSS3 que pasan desapercibidas, pero cuando encajan con el problema que tienes, son oro puro. Permite controlar exactamente cómo se escalan las imágenes, evita suavizados innecesarios y abre la puerta a estilos visuales muy concretos.

En mi experiencia, no se trata de usarla siempre, sino de saber cuándo usarla: placeholders, juegos, imágenes pequeñas o gráficos cuadriculados. Si encaja con tu caso, el resultado es inmediato y muy efectivo.