Convertidor de imagen a pixel art

Con 64 celdas de ancho, una foto 4:3 queda en 64 × 48 celdas: cada celda toma un color medio y se pinta con el color más cercano de la paleta

Convertir una imagen en pixel art consiste en dividir la foto en una cuadrícula de celdas y pintar cada celda de un solo color para que parezca pixel art. En el conversor de arriba fijas cuántas celdas de ancho quieres y el número de celdas de alto se ajusta a la proporción original (una foto de 640 × 480 px dividida en 64 celdas de ancho tiene 48 de alto). La herramienta calcula el color medio de los píxeles de cada celda y lo cambia por el color más cercano de la paleta que hayas elegido.

Si arrastras la imagen hacia los lados, ves el original superpuesto al resultado en el mismo punto, y la lista «Celdas por color» de más abajo indica cuántas celdas cubre cada color. Al guardar, cada celda se amplía por un factor entero (4, 8, 16, etc.) y se crea un PNG, de modo que los bordes no se difuminan. La imagen se procesa solo en tu navegador y no se envía a ningún servidor.

Cuándo conviene pasar una foto a pixel art

• Para crear una foto de perfil o un emoticono: con 32 a 64 celdas de ancho, el contorno de la cara sigue siendo reconocible. Cuanto más pequeño sea el icono, menos celdas necesitas, y con unos 8 colores el resultado queda más nítido.
• Para hacer el boceto de un sprite o un tile de videojuego: carga un PNG transparente sin fondo y activa el contorno para obtener un borrador antes de retocarlo a mano. También puedes probar enseguida una paleta fija como la de PICO-8.
• Para preparar un patrón de abalorios o de punto de cruz: una celda es un abalorio o una puntada. La cuadrícula añade una línea más oscura cada 10 celdas para contar con facilidad, y «Celdas por color» indica cuántas necesitas de cada color.
• Para crear una miniatura o un cartel de estilo retro: los cuatro verdes de la Game Boy o los dos colores en blanco y negro, con tramado (dithering), parecen una pantalla antigua.

Cómo se hace la conversión

1. Dividir en celdas: si las celdas de ancho son w, las celdas de alto son w × alto original ÷ ancho original, redondeado. El rango de píxeles de cada celda sale de dividir el ancho original en w tramos.
2. Color medio de la celda: se promedian el rojo, el verde y el azul de los píxeles de la celda, ponderados por su opacidad. Si la opacidad media llega a la mitad o la supera, la celda toma ese color medio; si no, queda como celda transparente.
3. Elegir la paleta: «Auto» agrupa los colores de las celdas en tantos colores como indiques con median cut (Heckbert, 1982), que divide una y otra vez por la mediana del canal de color más extendido, y después afina cuatro veces el promedio de cada grupo. PICO-8, CGA, Game Boy y B/N usan colores fijos.
4. Elegir el color más cercano: la diferencia entre el color de una celda y el de la paleta se mide como distancia en el espacio de color OKLab (Ottosson, 2020), más próximo a cómo percibe el ojo la luminosidad y la diferencia de color, y se pinta con el más cercano. Si activas el tramado, los colores se mezclan en este paso.
5. Ampliar y guardar: cada celda se amplía tal cual a n × n píxeles, sin interpolación que mezcle los colores vecinos. Si guardas 64 × 48 celdas a 8×, obtienes un PNG de 512 × 384 px.

Los píxeles transparentes no entran en el promedio de color, por eso la segunda fila también sale púrpura. Si pintas este púrpura (128, 0, 128) con la paleta PICO-8, resulta #7E2553 (púrpura oscuro), el más cercano por distancia OKLab.

Cuántas celdas elegir: para una foto 4:3

Cuando fijas las celdas de ancho, el número de celdas de alto y el tamaño al guardar quedan determinados. Los valores de abajo son para una foto con proporción 4:3, como una de 640 × 480 px.

Como referencia, la pantalla de la Game Boy original mide 160 × 144 píxeles (Pan Docs) y la de PICO-8, 128 × 128 píxeles (manual de PICO-8). Si el dibujo debe llenar una de esas pantallas, la referencia son de 128 a 160 celdas de ancho.

Seis paletas

Una paleta fija nunca usa colores que no estén en ella. Si conviertes la imagen de ejemplo con PICO-8, «Celdas por color» solo muestra, de los 16 colores, los que de verdad se pintan en alguna celda. La pantalla de la Game Boy original muestra cuatro tonos de verde, pero no existen valores RGB oficiales, así que los colores varían un poco de un emulador a otro. La NES (Famicom) no se incluye porque los colores de su pantalla dependen del televisor y de los circuitos de vídeo, y por eso no existe una única paleta RGB (NESdev Wiki).

Los valores de las paletas PICO-8 y Game Boy, el tamaño de pantalla de la Game Boy y de PICO-8 y los pesos del tramado se comprobaron en las fuentes originales indicadas arriba el 2026-10-12. Son valores que no cambian cada año.

Tramado (dithering): mezclar puntos para crear colores intermedios

Con pocos colores, las zonas que cambian suavemente, como el cielo o la piel, se rompen en unos pocos bloques. El tramado (dithering) mezcla dos colores cercanos punto a punto para que, desde lejos, parezcan un color intermedio.

Con pocas celdas, el tramado puede verse áspero. Una forma sencilla de elegir es no usar tramado con 32 celdas de ancho o menos, y probar primero la difusión en fotos de 64 celdas o más. «Original» no reduce los colores, así que no necesita tramado.

Errores frecuentes

• Guardar pequeño y ampliar en otro programa: la mayoría de los programas de imagen mezclan los colores vecinos al ampliar, y los bordes se difuminan. Guarda desde el principio al tamaño que necesitas, como 8× o 16×.
• Volver a guardar el PNG como JPG: la compresión JPG deja manchas alrededor de los bordes de las celdas y rellena las celdas transparentes. Conserva el pixel art en PNG.
• Usar más celdas que píxeles tiene el original: si divides una imagen de 300 px de ancho en 512 celdas, solo consigues más celdas que píxeles originales, sin más detalle. La herramienta lo avisa justo debajo del ajuste de celdas.
• Reducir los colores y desactivar el tramado: pintar una cara o un cielo con 4 a 8 colores crea bandas. Sube a 16 colores o más, o activa la difusión.
• Dejar un fondo complicado: con pocas celdas, el fondo y la figura se mezclan. Si cargas un PNG transparente sin fondo, las celdas transparentes se quedan vacías, y con el contorno activado se dibuja una línea alrededor de la figura.
• Creer que las redes sociales conservan el tamaño original: cada servicio puede reducir o recomprimir las imágenes que subes. Si las celdas se emborronan, cambia el múltiplo al guardar y sube la imagen de nuevo.

Límites y precauciones

• Todo el cálculo se hace en tu navegador. Para promediar las celdas, el original se lee tras reducirlo a 1024 px o menos en el lado largo, y hasta 512 celdas de ancho el resultado casi no cambia.
• El ancho va de 8 a 512 celdas y el alto llega hasta 1024 celdas. Al guardar, solo puedes elegir tamaños de hasta 4096 px por lado y 4096 × 4096 px de superficie, porque el límite del lienzo (canvas) en los navegadores de iOS es de 4096 × 4096 (MDN).
• Solo se aceptan los formatos que tu navegador puede abrir. Un GIF animado usa únicamente su primer fotograma, y los formatos que tu navegador no abra (HEIC en muchos navegadores) hay que convertirlos antes a JPG o PNG. Se aceptan archivos de hasta 40 MB.
• La paleta Auto da siempre el mismo resultado con la misma imagen y los mismos ajustes, pero no se garantiza que supere a una combinación de colores elegida a mano. Si no te gustan los colores, cambia el número de colores y compara.
• El contorno es un método sencillo: convierte en color de línea las celdas claramente más oscuras que las vecinas y las celdas contiguas a una celda transparente. No puedes elegir exactamente qué líneas se dibujan.
• Solo imita los colores de máquinas antiguas como la Game Boy o la CGA. No refleja las limitaciones del hardware, como el número de colores que podía usar cada tile o sprite.

Fuentes

• 01Lexaloffle — PICO-8 User ManualPantalla de 128 × 128, paleta fija de 16 colores (numerados del 0 al 15) — comprobado el 2026-10-12
• 02Lospec — PICO-8 PaletteValores HEX de los 16 colores de PICO-8 (Lexaloffle Games). Los cuatro colores de la Game Boy usan los valores de la Nintendo Gameboy (BGB) Palette del mismo sitio
• 03Pan Docs — SpecificationsPantalla de la Game Boy original (DMG) de 160 × 144, cuatro tonos de verde
• 04NESdev Wiki — PPU palettesLa salida de vídeo compuesto no tiene una única paleta válida para todos los juegos; cada entrada de la paleta apunta a uno de 64 colores
• 05Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. Reducción de colores con median cut
• 06Björn Ottosson — A perceptual color space for image processing2020-12-23. Transformación OKLab (sRGB lineal → LMS → raíz cúbica → Lab)
• 07Wikipedia — Floyd–Steinberg ditheringFloyd & Steinberg (1976), An adaptive algorithm for spatial grey scale, Proceedings of the SID 17: 75–77. Pesos del error 7·3·5·1/16. En el mismo sitio, Ordered dithering (Bayer, 1973, IEEE ICC)
• 08Wikipedia — Color Graphics Adapter16 colores RGBI de la CGA de IBM (1981), color 6 marrón #AA5500
• 09MDN — <canvas>: Maximum canvas sizeLos dispositivos iOS tienen un límite de 4096 × 4096; si se supera, no se puede usar el lienzo

Preguntas frecuentes

Herramientas para usar junto a esta