Ampliador de pixel art
Amplía pixel art sin desenfocarlo: escala entera y un bloque uniforme por píxel
Suelta sprites aquí
o haz clic para elegir archivos: hasta 20 a la vez
Cada píxel original se copia en un bloque cuadrado uniforme. No se sube nada ni se mezcla nada.
Escala
Solo enteros. Un factor como 1.5× daría a algunos píxeles un bloque de 2×2 y a otros de 1×1, haciendo que un resultado de «vecino más cercano» siga pareciendo incorrecto.
Disponible cuando un archivo resulta ser una ampliación entera de un original más pequeño.
img.pixel-art,
canvas.pixel-art {
image-rendering: pixelated;
}Sin esto, el navegador vuelve a desenfocar el sprite cada vez que lo redimensiona para mostrarlo.
Antes de empezar con Ampliador de pixel art
Amplía pixel art y sprites por vecino más cercano con factores enteros para mantener los bordes nítidos.
Ideal para
- Ampliación de sprites, piezas, iconos y pequeños recursos de juego de pixel art
- Mantener cada píxel original como un bloque de bordes nítidos
- Procesar hasta 20 salidas PNG de escala similar en un lote
Lo que debes saber antes de empezar
- La herramienta replica píxeles existentes; no inventa detalle ni amplía fotografías
- Los factores de escala son enteros de 2× a 32×
- La salida es PNG para conservar bordes nítidos y transparencia
Continúa el flujo de trabajo
Cómo utilizarlo
1. Arrastra tus sprites aquí
Hasta veinte archivos a la vez, decodificados por tu navegador sin subirse. Cada uno se examina píxel a píxel y recibe un veredicto: un verdadero Original a 1× está listo para escalar; ya N× significa que el archivo replica exactamente en bloques un original menor, y el panel ofrece restaurarlo primero; bordes suaves significa que la paleta es demasiado grande para pixel art y un escalado previo mezcló los bordes. La comprobación interpreta los píxeles, no garantiza nada: muestra su aspecto para decidir y nunca promete arreglar lo que no puede.
2. Elige un factor entero
Elige una de las opciones rápidas o introduce cualquier entero de 2 a 32. La fila de cada archivo muestra el proceso completo antes de confirmar — 32×32 → 8× → 256×256, o 256×256 → restore to 32×32 → 8× → 256×256 cuando Restaurar está activo. Toma el píxel superior izquierdo de cada bloque detectado y aplica tu factor a la imagen menor; solo aparece si se detectó ampliación entera. Si excede unos 16,384 píxeles por lado o 256 megapíxeles, rechaza y ofrece el mayor factor válido, no una imagen vacía.
3. Comprueba la vista previa y descarga
Los paneles de antes y después se renderizan con image-rendering: pixelated, así que lo que ves es lo que contiene el archivo, no el suavizado que aplica el navegador. Descarga un resultado individual o todos los resultados como ZIP. La salida siempre es PNG: un formato con pérdida volvería a introducir bordes suaves y halos en una imagen cuyo propósito es tener bordes nítidos. El fragmento CSS del panel es la otra mitad del trabajo: cópialo en tu hoja de estilos para que el navegador no deshaga el trabajo al redimensionar el sprite para mostrarlo.
Por qué el factor de escala debe ser un número entero
Escalar por vecino más cercano significa que cada píxel de salida copia el color del píxel original más cercano: no promedia, no añade colores ni suaviza bordes. Eso no basta. El factor también debe ser entero, y muchas herramientas fallan silenciosamente en este punto.
A 3×, cada píxel original se convierte en un cuadrado idéntico de 3×3. La cuadrícula sigue siendo uniforme y cada píxel original recibe exactamente la misma parte de la imagen de salida. A 1.5×, la cuadrícula de muestreo ya no se divide uniformemente: dos píxeles originales deben compartir tres píxeles de salida, así que uno se convierte en un bloque de ancho 2 y su vecino en uno de ancho 1, alternándose por toda la imagen. Sigue sin haber mezcla —técnicamente el resultado usa vecino más cercano—, pero los tamaños de píxel son visiblemente inconsistentes. Las líneas rectas adquieren irregularidades, las diagonales desarrollan escalones que no estaban en la ilustración y un tramado de damero se convierte en franjas. Se percibe como algo vagamente incorrecto, no como un desenfoque evidente, por lo que suele pasar la revisión.
Elige el objetivo hacia atrás. Para mostrar un sprite de 48×48 en unos 150 píxeles, exporta 3× (144) o 4× (192) y deja absorber la diferencia a CSS o la cuadrícula. No pidas 150 exactos. Por eso se ofrece un factor, no un ancho: no hay una forma fiel de alcanzar cualquier tamaño con pixel art.
Preguntas
¿Puede corregir un sprite que ya está borroso?
No, ni puede hacerlo otra herramienta. Cuando un escalado bilineal o bicúbico promedia colores vecinos, desaparecen los límites definidos originales: la información de dónde terminaba un color se descartó al escribir los píxeles intermedios. Enfocar aumenta el contraste, pero no restaura la cuadrícula de colores; un ampliador de IA inventa detalle plausible, no recupera el real. La herramienta lo señala como bordes suaves para saberlo antes de invertir tiempo. Vuelve al original sin desenfocar y escala ese.
¿Por qué solo PNG?
PNG es sin pérdida: guarda exactamente los píxeles calculados. JPG, pensado para fotos, descarta detalle de alta frecuencia; el borde entre colores uniformes es de frecuencia máxima y vuelve con halos y contaminación. Son justamente los artefactos que queremos evitar. WebP con pérdida tiene el mismo problema, aunque menor. Ofrecerlos permitiría deshacer el trabajo.
¿Qué hay de hqx, xBRZ y scale2x?
Esos algoritmos analizan vecinos y suavizan escalones sin desenfoque. Pueden mejorar contornos limpios y empeorar tramados o ruido al confundir patrones con bordes y borrar detalle intencionado. No los implementamos porque el vecino más cercano entero es predecible y adecuado por defecto. Nuestra guía para ampliar pixel art explica qué hace realmente cada uno y cuándo merece la pena usarlo.
¿Por qué mi imagen se ve borrosa en el navegador después de descargar?
Porque el navegador volvió a redimensionarla al renderizar usando su suavizado predeterminado. Cualquier contenedor adaptable, zoom de página o pantalla de alta densidad puede provocar esto, incluso cuando el archivo ya tiene el tamaño que querías mostrar. Añade image-rendering: pixelated al <img> o elemento canvas —es el fragmento del panel— y el navegador usa vecino más cercano. En motores vive en la textura: filtrado Point o Nearest, independiente de la escala de exportación.
¿Funciona con fotos?
Funcionará, pero vecino más cercano no es adecuado para una fotografía. Una foto es una muestra de una escena continua, por lo que sus degradados deben ser suaves, y mezclar muestras vecinas reconstruye algo parecido a lo que mostraría una captura de mayor resolución. Replicar cada píxel en un cuadrado duro produce bloques visibles sin ganar detalle. Utiliza un redimensionado normal para fotos y reserva esto para ilustraciones dibujadas sobre una cuadrícula de píxeles.
Relacionado
Encontrarás todos los detalles —por qué el escalado bilineal arruina el pixel art, qué hace el filtrado puntual en Unity y Godot y dónde encajan hqx y xBRZ— en cómo ampliar pixel art sin desenfocarlo. Si tu ilustración llega como una hoja de fotogramas en lugar de sprites individuales, divídela primero: Divisor de hojas de sprites divide en PNG individuales con límites correctos, y ampliar después cada fotograma mantiene la misma cuadrícula.