Pixel art · imagen

Cómo convertir una foto en pixel art sin que quede una foto borrosa

Reducir el tamaño no es pixelar. Qué factor de reducción elegir, por qué el suavizado arruina el resultado, cuántos colores usar y el límite por debajo del cual una cara deja de ser una cara.

Casi todo el mundo empieza igual: coge una foto, la reduce mucho, la vuelve a ampliar y espera pixel art. Lo que sale es una foto borrosa con bloques. La diferencia entre las dos cosas está en tres decisiones —el factor de reducción, el método de reescalado y el número de colores— y en ninguna de ellas el valor por defecto del editor es el correcto.

Primero: el factor de reducción, no el «nivel de pixelado»

Pixelar una imagen es agrupar bloques de n × n píxeles originales en un solo píxel nuevo. Lo que decides realmente es cuántos píxeles de ancho quieres que tenga el resultado:

ancho final = ancho original ÷ factor

Una foto de 1920 × 1080 con factor 8 se convierte en 240 × 135 píxeles reales: 32.400 píxeles en total. Con factor 12 baja a 160 × 90. Esa cifra, y no un porcentaje abstracto, es la que conviene tener en la cabeza, porque es la que determina si el motivo sigue siendo reconocible.

Como orientación por tipo de imagen:

MotivoAncho útilPor qué
Icono o logo simple16–32 pxFormas grandes, sin detalle interno
Personaje de cuerpo entero32–64 pxSilueta reconocible, cara esquemática
Retrato64–128 pxPor debajo de ~48 px de alto la cara deja de leerse
Paisaje o escena128–256 pxHay muchos elementos compitiendo

El umbral del retrato es el que más sorprende. Los rasgos que el cerebro usa para reconocer una cara —la separación de los ojos, la línea de la boca— ocupan muy pocos píxeles, y por debajo de unos 48 píxeles de alto sencillamente no caben. El resultado no es «una cara pixelada»: es una mancha. Si el retrato es lo importante, sube la resolución antes que bajar colores.

Segundo: el método de reescalado lo decide todo

Aquí es donde se pierde la mayoría de los intentos. Al reducir una imagen, el programa tiene que decidir qué color le pone a cada píxel nuevo, y hay dos familias de respuestas:

  • Interpolación suave (bilineal, bicúbica, Lanczos): calcula una media ponderada de los píxeles de alrededor. Es lo correcto para redimensionar una foto que va a seguir siendo una foto, porque evita el dentado. Y es exactamente lo que no quieres aquí: introduce colores intermedios en cada borde y produce ese halo difuminado que delata el «pixel art falso».
  • Vecino más próximo (nearest neighbour): copia el color del píxel que cae en el centro del bloque, sin mezclar nada. Los bordes quedan limpios y duros.

La regla práctica tiene dos partes, y la segunda se olvida siempre:

  1. Al reducir, una media por bloque —el promedio de todos los píxeles del cuadrado, no el del centro— suele dar mejores colores que el vecino más próximo, porque el vecino más próximo puede elegir justo el píxel de ruido del sensor y meterlo en el resultado.
  2. Al volver a ampliar para ver o exportar la imagen grande, el método tiene que ser vecino más próximo, sin excepción. Si amplías con interpolación suave, todo el trabajo se convierte otra vez en un degradado.

En una página web esto se consigue con image-rendering: pixelated en el CSS. Si exportas la imagen para enviarla, amplíala tú a un múltiplo entero —×4, ×8— antes de compartirla, o el visor de quien la reciba hará la interpolación por su cuenta.

Tercero: menos colores, más pixel art

Una foto tiene decenas de miles de colores distintos. El pixel art clásico vive con entre 8 y 32. La razón no es nostalgia por las limitaciones técnicas: es que reducir la paleta obliga a que cada zona se resuelva con una forma en vez de con un degradado, y eso es lo que da el aspecto deliberado y legible.

Puntos de partida razonables: 16 colores para un icono o un sprite, 32 para un personaje con sombreado, 64 para un paisaje. Por encima de 128 el resultado se parece cada vez más a la foto original, y a partir de ahí ya solo estás pixelando, no estilizando.

Cuando bajas mucho la paleta aparece el banding: los degradados suaves del cielo se convierten en franjas planas con escalones visibles. Hay dos maneras de tratarlo:

  • Aceptarlo. Las franjas planas son parte del lenguaje del pixel art y, con una paleta bien elegida, se ven intencionadas.
  • Difuminar (dithering). Se alternan píxeles de dos colores en un patrón para simular el intermedio. Funciona muy bien en cielos y sombras, pero satura de ruido las zonas de detalle, así que conviene usarlo con poca intensidad y no en toda la imagen por igual.

Lo que conviene hacer antes de convertir

Este es el consejo que más cambia el resultado y el que menos se sigue. Cuando reduces una imagen a 64 píxeles de ancho, cada píxel del resultado tiene que cargar con mucha información, y una foto normal no está preparada para eso. Tres ajustes previos en cualquier editor:

  1. Recorta fuerte. Todo lo que sobra en la foto original se lleva píxeles del resultado. Un retrato de medio cuerpo con fondo se convierte, a 64 px, en una cabeza de doce píxeles. Recorta a la cabeza y tendrás cuarenta.
  2. Sube el contraste. La reducción de paleta aplasta las diferencias sutiles; si el motivo y el fondo tienen luminosidades parecidas, se fundirán en el mismo color. Separarlos antes es la única forma de que sobrevivan.
  3. Simplifica el fondo. Un fondo con textura se convierte en ruido de colores que compite con el motivo. Desenfocarlo o sustituirlo por un tono plano antes de convertir suele mejorar más el resultado que cualquier ajuste posterior.

Al exportar

Guarda siempre en PNG, nunca en JPEG. La compresión del JPEG está diseñada para fotografías y funciona inventando transiciones suaves justo en los bordes duros; en pixel art produce artefactos visibles alrededor de cada bloque de color y, además, un PNG de paleta reducida pesa menos. Si la imagen lleva transparencia, PNG también es la respuesta.

Si el resultado «no parece pixel art» pero no sabes por qué, amplía la imagen al 800 % y mira un borde cualquiera. Si entre el color de dentro y el de fuera hay uno o dos tonos intermedios, el problema es la interpolación, no la paleta ni el tamaño.