Cómo ampliar pixel art sin desenfocarlo
Introduce un sprite de 32×32 en casi cualquier editor de imágenes, herramienta de redimensionado o sistema de miniaturas de CMS y saldrá suavizado: la cuadrícula nítida de píxeles se sustituye por una mezcla de colores intermedios. No es un fallo del programa. Es el cálculo de redimensionado predeterminado haciendo exactamente lo que debe hacer, en una imagen para la que ese cálculo es la opción equivocada.
Por qué un redimensionado normal desenfoca pixel art
Todo redimensionador de imágenes de uso general —el integrado en tu navegador, el visor de miniaturas del sistema operativo, el predeterminado de Photoshop y la optimización automática de la mayoría de los frameworks web— utiliza alguna forma de interpolación. La más común es bilineal, y las variantes más costosas (bicúbica, Lanczos) refinan la misma idea: para calcular un píxel nuevo, observan los píxeles vecinos de la imagen original y los mezclan según la distancia.
Ese es el enfoque correcto para una fotografía. Una foto no tiene bordes definidos a nivel de píxel: el degradado de una mejilla o un fondo desenfocado debe verse suave. Mezclar muestras vecinas reconstruye algo parecido a una captura de mayor resolución. El cálculo supone que la imagen es una versión muestreada de una escena continua.
El pixel art no es una fotografía muestreada. Cada píxel es una decisión discreta: color exacto, celda exacta y límite definido. El escalado bilineal fabrica degradados entre colores que no debían mezclarse porque no sabe que el borde es intencionado. El resultado es la neblina habitual: contornos negros convertidos en halos grises y zonas planas con degradados inexistentes en el original.
Vecino más cercano: la solución básica
Vecino más cercano escalado hace otra pregunta: cada píxel copia el original más cercano sin mezclas. De 16×16 a 64×64, cada uno se vuelve bloque 4×4 del mismo color. No inventa colores ni suaviza: es el mínimo para conservar pixel art.
La mayoría de las herramientas lo ofrecen como opción explícita, no como valor predeterminado, porque el vecino más cercano no es adecuado para fotografías: produce resultados cuadriculados y dentados. Debes activarlo:
- Photoshop / GIMP: configura el remuestreo como «Nearest Neighbor» (Photoshop) o «None» (GIMP) antes de escalar.
- ImageMagick: -filter point antes -resize.
- API Canvas (navegador/JS): ctx.imageSmoothingEnabled = false antes de dibujar la imagen escalada.
- Python / Pillow: Image.resize(size, Image.NEAREST).
Por qué el factor de escala debe ser un entero
El vecino más cercano por sí solo no basta. El segundo requisito es que el factor de escala sea entero —2x, 3x, 4x—, no 1.5x ni un ancho arbitrario entre múltiplos exactos.
A una escala entera, cada píxel original se corresponde con un bloque del mismo tamaño de píxeles de salida: 3x significa que cada píxel se convierte en un cuadrado limpio de 3×3. La cuadrícula sigue siendo uniforme y todos los píxeles originales reciben una representación igual y consistente.
A una escala no entera como 1.5x, algunos píxeles originales quedan representados por un bloque de 2×2 píxeles de salida y otros por uno de 1×1 o un 2×1 desigual, porque la cuadrícula de muestreo no se divide uniformemente. Técnicamente la imagen sigue usando «vecino más cercano», por lo que no se mezclan colores, pero los tamaños de píxel se vuelven visiblemente inconsistentes: algunos bloques parecen más gruesos que otros y las diagonales rectas de la ilustración original adquieren irregularidades que antes no tenían. Se percibe como un fallo sutil y difícil de identificar, no como una ampliación limpia.
Elige el tamaño a partir de un múltiplo entero del original, no de un objetivo fijo. Si el original mide 48×48 y quieres unos 150px, usa 3x (144px) o 4x (192px) y deja que CSS o el diseño absorban la diferencia, en vez de pedir exactamente 150px.
Mantener la nitidez en CSS
Escalar el archivo solo resuelve la mitad del problema web. Incluso un PNG ampliado por vecino más cercano se desenfoca si el navegador lo redimensiona al dibujarlo con su suavizado predeterminado. Se corrige con una propiedad CSS aplicada al <img> o elemento canvas:
image-rendering: pixelated;
Indica al navegador que use vecino más cercano al redimensionar para mostrar, incluso con zoom del usuario o contenedores adaptables que no controlas. Todos los navegadores principales actuales lo admiten. Una alternativa antigua y menos uniforme es image-rendering: crisp-edges;, que algunos navegadores tratan de forma idéntica y otros como un algoritmo de enfoque ligeramente distinto; para pixel art en particular, pixelated es la opción más predecible.
Filtrado puntual en motores de juegos
Los motores de juegos tienen el mismo problema una capa más abajo, porque los sprites se escalan mediante el zoom de cámara, la resolución de pantalla y los ajustes de píxeles por unidad en tiempo de ejecución, no solo al exportar. Todos los motores ofrecen un ajuste de filtro de textura y la opción segura para pixel art siempre se llama alguna variante de «puntual» o «vecino más cercano»:
- Unity: Filter Mode configurado como Point (no filter) en los ajustes de importación de textura, explicado en detalle en nuestra Guía de importación de sprites en Unity.
- Godot: el filtro de textura en Nearest, por textura o como predeterminado del proyecto 2D de pixel art.
- Unreal: Texture Group o Filter en Nearest Neighbor en las texturas de sprites.
Dejar activo el filtro bilineal/lineal predeterminado es la razón más habitual por la que un juego de pixel art se ve borroso en el motor aunque los archivos originales sean nítidos.
Algoritmos específicos de escalado de pixel art
El vecino más cercano es fiel pero cuadriculado: al ampliar mucho, las diagonales y curvas muestran escalones, porque el algoritmo solo conoce píxeles, no líneas. Una familia de algoritmos específicos de pixel art intenta suavizarlos sin desenfoque, analizando patrones locales en vez de cada píxel aislado.
- Scale2x / Scale3x (también llamados AdvMAME2x/3x): el más simple. Examina cuatro vecinos directos y, al detectar una diagonal, divide el píxel ampliado para inclinar el borde en vez de escalonarlo. Rápido y razonable para contornos simples.
- EPX / hqx (hq2x, hq3x, hq4x): amplía esa idea con más patrones vecinos y formas posibles, produciendo curvas más redondas. Funciona en contornos dibujados y peor con ruido o tramado, donde detecta bordes falsos.
- xBRZ: un descendiente más reciente y generalmente de mayor calidad, ajustado para diagonales y curvas suaves con menos artefactos en sprites detallados. Es el algoritmo de filtros de ampliación de muchos emuladores.
Los tres comparten la misma limitación: deducen bordes a partir de patrones locales de píxeles, por lo que funcionan mejor en ilustraciones con contornos limpios y deliberados y tienen dificultades con tramados estilizados, ruido o degradados construidos con píxeles alternos. Son técnicas habituales en el pixel art antiguo que estos algoritmos pueden confundir con bordes que deben suavizarse. Para la mayoría de los sprites, un escalado entero sencillo por vecino más cercano es la opción más segura y predecible; utiliza hqx o xBRZ solo cuando los escalones de las curvas te molesten visiblemente y hayas comprobado el resultado en las zonas tramadas.
Por qué los ampliadores con IA suelen ser la opción equivocada
Los ampliadores con IA de uso general —los entrenados para añadir detalle fotográfico a fotos borrosas— resuelven el problema opuesto al del pixel art. Están entrenados para inventar detalles finos plausibles —textura de piel, trama de tejido, vegetación— a partir de una entrada de baja resolución, suponiendo que esta perdió detalle al reducirse o comprimirse y que el trabajo del modelo es reconstruirlo mediante estimación.
El pixel art no ha perdido detalle: cada píxel es exactamente lo que quiso el artista a esa resolución. Un modelo pensado para inventar textura faltante suaviza bordes, inventa degradados y elimina o sustituye detalles —un brillo de un píxel, un corte de color intencionado— por algo vagamente pictórico ajeno al original. Algunos ampliadores tienen modos «pixel art» o «anime» cercanos a vecino más cercano con limpieza, que merece la pena probar caso por caso. El modo general para fotos casi garantiza desenfoque en vez de conservación.
Si el sprite salió de un generador de imágenes con IA, en vez de dibujarse como pixel art auténtico, probablemente no esté sobre una cuadrícula limpia y ningún escalado lo corregirá; consulta nuestra guía de instrucciones para sprites con IA para obtener un original más limpio desde el principio.
Una lista de comprobación práctica
- Confirma que el original realmente sea pixel art sobre una cuadrícula consistente, no una exportación ráster de bordes suaves.
- Elige un factor entero (2x, 3x, 4x) según el tamaño objetivo, no al revés.
- Escala por vecino más cercano / muestreo puntual, no con el modo bilineal o bicúbico predeterminado.
- Aplicar image-rendering: pixelated a cualquier elemento web que pueda volver a redimensionar la imagen.
- Configura el filtro de textura en Point/Nearest en el motor, independientemente de la escala de exportación.
- Usa hqx/xBRZ solo si los escalones del vecino más cercano te molestan visiblemente, y comprueba primero el resultado en las zonas con tramado.
Si prefieres no configurarlo a mano, nuestro Ampliador de pixel art hace los tres primeros pasos: elige un factor entero entre 2x y 32x y replica cada píxel con vecino más cercano, sin mezclar colores, para exportarlo como PNG.
Preguntas frecuentes
¿Puedo corregir un sprite borroso después de haberlo escalado con filtrado bilineal?
No limpiamente. Al mezclar colores vecinos en píxeles intermedios desaparecen los bordes definidos, y ningún enfoque los recupera completamente: aumenta el contraste, no restaura la cuadrícula de colores. Vuelve a escalar el original sin desenfoque con factor entero y vecino más cercano.
¿Importa si primero amplío o primero recorto?
Recorta primero a la resolución original y después escala. Recortar después de una ampliación entera también funciona si los límites del recorte coinciden con múltiplos del factor de escala; recortar en un límite arbitrario de píxel de la imagen ampliada puede dividir el bloque que antes era un único píxel original.
¿Por qué mi pixel art se ve bien en el editor pero borroso al exportar PNG y verlo en el navegador?
Probablemente el editor muestra el sprite a su tamaño nativo, con un zoom de vista previa por vecino más cercano. El navegador, sin image-rendering: pixelated configurado, suaviza por defecto cuando el tamaño mostrado difiere del nativo, casi siempre con CSS o diseño adaptable.
¿Hay diferencia de calidad entre vecino más cercano y no escalar en absoluto?
No escalar es válido si tu diseño muestra el sprite al tamaño nativo. El vecino más cercano solo importa al mostrarlo mayor o menor que sus dimensiones originales; aun entonces no cambia los datos de color, solo cuántos píxeles de pantalla representan cada píxel original.
Escala un sprite sin desenfocarlo
El ampliador de pixel art replica cada píxel con vecino más cercano y factores enteros de 2x a 32x, manteniendo bordes definidos. Detecta imágenes que parecen ya ampliadas, exporta PNG y admite hasta 20 archivos con descarga ZIP: todo en el navegador, sin subidas. Si llega como hoja de varios fotogramas, sepáralos en PNG con Divisor de hojas de sprites primero y después escala los fotogramas.
Abrir Ampliador de pixel art