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:
| Motivo | Ancho útil | Por qué |
|---|---|---|
| Icono o logo simple | 16–32 px | Formas grandes, sin detalle interno |
| Personaje de cuerpo entero | 32–64 px | Silueta reconocible, cara esquemática |
| Retrato | 64–128 px | Por debajo de ~48 px de alto la cara deja de leerse |
| Paisaje o escena | 128–256 px | Hay 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:
- 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.
- 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.