Conversor Pixel Art

Como o efeito é gerado?

Primeiro a imagem encolhe para uma versão pequena, em que cada "pixel art" passa a representar um bloco de N×N pixels reais. Depois disso, um algoritmo simples de quantização reduz a paleta até o número de cores que você escolheu.

Por fim, esse resultado é desenhado em escala maior, com bordas duras via image-rendering: pixelated. É daí que vem o visual retrô.

O processamento roda local, todo no Canvas.

Pixel art: da era 8-bit (Atari 2600) à cultura indie moderna (Stardew Valley, Celeste)

Pixel art é a colocação deliberada de quadradinhos de cor sobre uma grade de baixa resolução. Embora o termo tenha sido cunhado em 1982 por Adele Goldberg e Robert Flegal no Xerox PARC, a técnica remonta ao SuperPaint de Richard Shoup em 1972. O que a transformou em linguagem visual global foi a explosão dos arcades no fim dos anos 1970. Space Invaders (1978) e Pac-Man (1980) inventaram personagens expressivos com um punhado de pixels e duas ou três cores por sprite porque os chips gráficos da época não exibiam mais que isso.

O Atari 2600 (1977) era extremo: seu chip TIA renderizava só dois sprites de uma linha por vez. Os programadores viraram artistas por necessidade, explorando flicker, espelhamento e mudança de cor por scanline para criar cenas complexas. O Nintendo Entertainment System (1985) amadureceu a disciplina: 64 sprites num frame de 256 por 240, cada sprite um tile de 8 por 8 com três cores mais transparência, sacados de uma paleta de 54 cores visíveis. Super Mario Bros., The Legend of Zelda e Mega Man ainda são estudados porque cada tile reusa os mesmos truques sob esse limite duro.

A geração 16-bit (Super Nintendo, Sega Genesis, Neo Geo) afrouxou as regras. O SNES mostrava até 256 cores de uma paleta de 15 bits com 32.768, destravando shading e parallax em Chrono Trigger, Super Metroid e Sonic 3. O Game Boy seguiu o caminho oposto: LCD de 160 por 144 com quatro tons de verde-oliva, ponto. Essa restrição é exatamente por que a arte de Game Boy ainda parece icônica.

Quando o 3D dominou no fim dos anos 1990, pixel art perdeu o mainstream mas nunca sumiu. Sobreviveu em handhelds, jogos de navegador e na demoscene. O renascimento atual começou por volta de 2010 com Minecraft, Fez (2012), Shovel Knight (2014), Undertale (2015), Stardew Valley (2016), Celeste (2018), Dead Cells (2018), Dave the Diver (2023) e Balatro (2024). Estúdios indie escolheram pixel art porque a restrição deliberada produz silhuetas fortes, iteração rápida e identidade reconhecível.

Como o conversor funciona: redução de resolução (nearest-neighbor) + quantização de cores

Transformar uma foto em pixel art é um pipeline de duas etapas. Primeiro a imagem é reduzida usando nearest-neighbor (vizinho mais próximo): cada pixel de saída pega o valor do pixel de entrada mais perto, sem média. Interpolação bilinear ou bicúbica suavizaria as bordas e derrotaria o objetivo. Depois a imagem é renderizada de volta ao tamanho original com nearest-neighbor de novo, para que cada pixelzinho vire um quadrado visível. O CSS image-rendering: pixelated avisa o navegador a fazer o mesmo.

A segunda etapa é a quantização de cores: reduzir os 16,7 milhões de cores RGB possíveis para uma paleta pequena de N (tipicamente 4, 8, 16 ou 32). O median cut, inventado por Paul Heckbert em 1979, divide recursivamente o cubo de cores pelo eixo mais longo no ponto mediano, produzindo N caixas com contagem de pixels parecida e tirando média de cada para a paleta final. O k-means clustering trata a geração de paleta como problema de clustering 3D, movendo iterativamente cada cor para o centroide que melhor a representa. Median cut é rápido e determinístico; k-means produz fidelidade ligeiramente melhor ao custo de mais iterações.

Dithering: Floyd-Steinberg, Bayer (ordered), Atkinson — quando usar cada

Depois da quantização, a imagem costuma mostrar banding visível. O dithering esconde o banding misturando cores da paleta em padrões que o olho funde em tons intermediários. Floyd-Steinberg (1976) é o algoritmo de difusão de erro mais popular: quando um pixel é quantizado, empurra 7/16 do erro residual para a direita, 3/16 para o inferior-esquerdo, 5/16 para baixo e 1/16 para o inferior-direito. Como 100% do erro é redistribuído, o brilho médio é preservado exatamente, fazendo dele o padrão para fotos em paletas pequenas.

O dithering de Atkinson, nomeado em homenagem a Bill Atkinson do time do Macintosh original, difunde só seis vizinhos e descarta 25% do erro. O resultado tem contraste maior: sombras mais fundas, brilhos mais claros. Use Atkinson para o visual retrô de um bit estilo Mac clássico.

O dithering de Bayer (ordered) usa uma matriz de threshold fixa (2x2, 4x4 ou 8x8). Não há propagação de erro, o que o torna paralelo, determinístico e livre dos artefatos em forma de "verme" que a difusão pode produzir em regiões chapadas. O preço é o padrão de hachura visível. Bayer é a escolha certa para sprites de jogo porque o padrão regular é lido como textura intencional, não ruído.

Paletas clássicas: NES (54), Game Boy (4), CGA (16), PICO-8 (16)

• NES: 54 cores visíveis; sprites limitados a 3 cores mais transparência por tile 8x8.
• Game Boy: quatro tons, originalmente verde-oliva na tela do DMG.
• CGA: 16 cores no total, 4 simultâneas em modo gráfico, com a famosa paleta ciano-magenta-branco.
• EGA: 16 cores de uma paleta de 64, padrão dos jogos DOS do fim dos anos 1980.
• PICO-8: 16 cores fixas desenhadas pela Lexaloffle, enormemente influente na pixel art indie.
• Pyxel: console de fantasia em Python com paleta de 16 cores derivada da PICO-8.
• DawnBringer 16/32: paletas curadas por artista, muito reutilizadas em projetos indie.

Boas práticas: começar com 8x8 ou 16x16, contraste, anti-aliasing manual

• Comece pequeno. Ícones em 8x8 ou 16x16; personagens em 16x16 a 32x32.
• Desenhe para a silhueta. Se a forma é ilegível em preto puro, cor não salva.
• Force contraste. Cada cor da paleta deve diferir em matiz e luminância.
• Anti-aliasing manual só em bordas-chave. Exagerar cria borrão.
• Faça cluster de pixels, não linhas. Diagonais vêm de "degraus" de 1, 2, 4 pixels.

Ferramentas adjacentes: Aseprite, Piskel, GraphicsGale, GIMP

• Aseprite: padrão de fato da pixel art indie, com timeline e editor de tiles.
• Piskel: gratuito, no navegador, ideal para iniciantes.
• GraphicsGale: favorito no Windows, gratuito desde 2017, forte para sprite sheets.
• Pro Motion NG: ferramenta profissional usada em muitos títulos comerciais.
• GIMP / Photoshop: editores genéricos com pixel-snap, não otimizados para tile.

Casos de uso: ícones retrô, NFTs, jogos indie, avatares, camisetas

• Ícones em estilo retrô para landing pages e launchers de jogos.
• Coleções NFT (os CryptoPunks popularizaram o formato 24x24).
• Sprites, tilesets e elementos de HUD para jogos indie.
• Avatares de fórum e Discord, onde o tamanho pequeno esconde anti-aliasing.
• Camisetas, adesivos e pôsteres imprimem bem em tamanhos pequenos pelo alto contraste.
• Referência para ponto-cruz e mosaicos de Lego.

FAQ

O conversor produz pixel art "de verdade"? Produz imagens em estilo pixel art. Pixel art artesanal envolve colocação cluster a cluster e curadoria de paleta que nenhum filtro replica. O conversor é excelente para protótipos e referências.

Quantas cores escolher? Comece com 16 e ajuste. Fotos com gradientes precisam de 24-32; arte cartunesca comprime bem em 8-12; estética de um bit precisa de 2 com dithering.

Por que minha saída parece borrada? Confirme que o CSS usa image-rendering: pixelated (Chrome/Edge) ou crisp-edges (Firefox) no canvas de saída.

Qual o tamanho mínimo útil de pixel? Oito pixels por lado é o limite para personagens reconhecíveis; quatro só serve para indicadores simbólicos.