Como ampliar pixel art sem borrar

Por que um redimensionamento comum borra pixel art

Todo redimensionador de imagens de uso geral — o integrado ao navegador, o visualizador de miniaturas do sistema operacional, o padrão do Photoshop, a otimização automática de imagens da maioria dos frameworks web — usa alguma forma de interpolação. A mais comum é bilinear, e as variantes mais exigentes (bicúbica, Lanczos) refinam a mesma ideia: para calcular um novo pixel, examine os pixels vizinhos na imagem original e misture-os conforme a distância.

Essa é a abordagem correta para uma fotografia. Uma foto não tem de fato bordas abruptas no nível dos pixels — um degradê sobre uma bochecha ou um fundo desfocado deve parecer suave, e misturar amostras vizinhas reconstrói algo próximo do que uma captura de maior resolução mostraria. O cálculo presume que a imagem é uma versão amostrada de uma cena contínua.

Pixel art não é uma fotografia amostrada. Cada pixel é uma decisão deliberada e individual de um artista — esta cor exata, nesta célula exata, com um limite definido até a próxima. Quando um redimensionador bilinear amplia isso, ele fabrica pixels de degradê entre cores que nunca deveriam se misturar, porque não tem como saber que o limite é intencional. O resultado é o conhecido aspecto suave e nebuloso: contornos pretos nítidos viram halos cinzentos, e áreas de cor chapada ganham um degradê sutil que nunca existiu na origem.

Vizinho mais próximo: a correção básica

Vizinho mais próximo a escala faz outra pergunta. Para cada pixel da imagem de saída, ela não mistura nada — apenas copia a cor do pixel de origem mais próximo. Redimensionar um sprite de 16×16 para 64×64 com vizinho mais próximo significa que cada pixel de origem vira um bloco sólido de 4×4 da mesma cor. Nenhuma cor nova é inventada, nenhuma borda é suavizada. Esse é o requisito mínimo para pixel art continuar parecendo pixel art após ser redimensionada.

A maioria das ferramentas oferece isso como opção explícita, não como padrão, porque vizinho mais próximo é uma escolha ruim para conteúdo fotográfico — produz resultados em blocos e serrilhados. Você precisa ativá-la:

• Photoshop / GIMP: defina o método de reamostragem como "Nearest Neighbor" (Photoshop) ou "None" (GIMP) antes de redimensionar.
• ImageMagick: -filter point antes -resize.
• API Canvas (navegador/JS): ctx.imageSmoothingEnabled = false antes de desenhar a imagem redimensionada.
• Python / Pillow: Image.resize(size, Image.NEAREST).

Por que o fator de escala precisa ser inteiro

Vizinho mais próximo sozinho não basta. A segunda exigência é que o fator de escala seja um número inteiro — 2x, 3x, 4x —, não 1.5x nem uma largura de destino arbitrária que fique entre múltiplos exatos.

Em uma escala inteira, cada pixel original corresponde a um bloco de pixels de saída do mesmo tamanho: 3x significa que cada pixel vira um quadrado nítido de 3×3. A grade permanece uniforme, e todos os pixels originais recebem uma representação igual e consistente.

Em uma escala não inteira como 1.5x, alguns pixels originais acabam representados por um bloco de 2×2 pixels de saída e outros por um de 1×1 ou um retângulo de 2×1, porque a grade de amostragem não se divide uniformemente. A imagem ainda é tecnicamente ampliada por "vizinho mais próximo", então não há mistura de cores, mas os tamanhos dos pixels pela imagem ficam visivelmente inconsistentes — alguns blocos parecem mais grossos que outros, e linhas diagonais retas na arte original desenvolvem degraus irregulares que não tinham antes. O resultado parece sutilmente errado, de uma forma difícil de identificar, em vez de uma ampliação limpa.

Na prática, isso significa escolher o tamanho de destino a partir de um múltiplo inteiro das dimensões de origem, não a partir de uma meta fixa em pixels. Se sua origem tem 48×48 e você precisa exibi-la com cerca de 150px, use 3x (144px) ou 4x (192px) e deixe o CSS ou seu layout absorver a diferença, em vez de pedir exatamente 150px ao redimensionador.

Mantendo a nitidez no CSS

Redimensionar o próprio arquivo é apenas metade do problema na web. Até um PNG redimensionado por vizinho mais próximo volta a ficar borrado se o navegador o redimensionar novamente na renderização usando sua suavização padrão. A solução é uma propriedade CSS aplicada ao elemento exibido <img> ou elemento canvas:

image-rendering: pixelated;

Isso informa ao navegador que deve usar amostragem por vizinho mais próximo sempre que precisar redimensionar a imagem para exibição — inclusive em casos que você não controla diretamente, como o usuário ampliando a página ou a imagem em um contêiner responsivo que muda com a área de visualização. Todos os principais navegadores atuais aceitam isso. Uma alternativa mais antiga e com compatibilidade menos consistente é image-rendering: crisp-edges;, que alguns navegadores tratam de forma idêntica e outros tratam como um algoritmo de nitidez ligeiramente diferente; especificamente para pixel art, pixelated é a escolha mais previsível.

Filtragem por ponto nas engines de jogos

Engines de jogos têm o mesmo problema em outra camada, porque sprites são redimensionados pelo zoom da câmera, pela resolução da tela e pelas configurações de pixels por unidade durante a execução, não apenas uma vez na exportação. Todas as engines oferecem uma configuração de filtro de textura, e a escolha segura para pixel art é sempre chamada de alguma variante de "point" ou "nearest":

• Unity: Filter Mode definido como Point (no filter) nas configurações de importação da textura, explicado em detalhes no nosso Guia de importação de sprites no Unity.
• Godot: a propriedade de filtro da textura definida como Nearest, por textura ou como padrão de todo o projeto para projetos 2D de pixel art.
• Unreal: Texture Group ou Filter definido como Nearest Neighbor nas texturas dos sprites.

Deixar o filtro bilinear/linear padrão ativo é o motivo mais comum de um jogo de pixel art parecer borrado na engine, mesmo quando os arquivos originais da arte são nítidos.

Algoritmos específicos de redimensionamento de pixel art

Vizinho mais próximo é fiel, mas produz blocos — em grandes ampliações, linhas diagonais e curvas da arte original mostram degraus visíveis, porque o algoritmo não entende linhas, apenas pixels individuais. Uma família de algoritmos criada especificamente para pixel art tenta suavizar esses degraus sem introduzir desfoque, analisando padrões locais de pixels em vez de tratar cada pixel isoladamente.

• Scale2x / Scale3x (também chamados de AdvMAME2x/3x): o mais simples da família. Ele examina os quatro vizinhos diretos de cada pixel e, quando detecta um padrão de borda diagonal, divide o pixel ampliado para que a borda pareça inclinada, não em degraus. Rápido e um padrão razoável para sprites simples com contornos limpos.
• EPX / hqx (hq2x, hq3x, hq4x): amplia a mesma ideia com uma tabela maior de padrões de pixels vizinhos e mais formas possíveis de saída por padrão, produzindo resultados mais arredondados e curvos. Funciona bem em contornos de sprites desenhados à mão e menos bem em pixel art com pontilhamento ou ruído, em que o reconhecimento de padrões detecta bordas falsas.
• xBRZ: um descendente mais recente e geralmente de maior qualidade da mesma família, ajustado para produzir diagonais e curvas mais suaves com menos artefatos em sprites detalhados. É o algoritmo por trás dos filtros de ampliação encontrados em muitas interfaces de emuladores.

Os três compartilham a mesma limitação: inferem bordas a partir de padrões locais de pixels, então funcionam melhor em arte com contornos nítidos e intencionais e têm dificuldades com dithering estilizado, ruído ou gradientes feitos de pixels alternados — técnicas comuns em pixel art antiga que esses algoritmos podem confundir com bordas a suavizar. Para a maioria dos trabalhos com sprites, uma ampliação simples por vizinho mais próximo com fator inteiro é a escolha mais segura e previsível; use hqx ou xBRZ apenas quando o efeito de escada nas curvas realmente incomodar e você tiver conferido o resultado nas áreas com dithering.

Por que ampliadores de IA normalmente são a ferramenta errada

Ampliadores por IA de uso geral (os treinados para adicionar detalhes fotográficos a fotos borradas) são feitos para resolver o problema oposto ao que pixel art precisa. Eles são treinados para inventar detalhes finos plausíveis — textura de pele, trama de tecido, folhagem — a partir de uma entrada de baixa resolução, supondo que a entrada perdeu detalhes na redução ou compressão e que o trabalho do modelo é estimar como recuperá-los.

Pixel art não perdeu nenhum detalhe. Cada pixel já é exatamente o que o artista pretendia, na resolução que ele pretendia. Passá-la por um modelo ajustado para inventar texturas ausentes produz exatamente o que seria esperado: bordas suavizadas, degradês inventados e pequenos detalhes estilísticos (um único pixel de brilho, uma mudança de cor intencionalmente abrupta) apagados ou substituídos por algo com um aspecto vagamente pictórico, sem nenhuma semelhança com a obra original. Alguns ampliadores agora oferecem um modo específico de "pixel art" ou "anime", mais próximo de uma passagem controlada de vizinho mais próximo com limpeza, e pode valer a pena testá-los caso a caso. Mas o modo padrão geral feito para fotos quase certamente vai borrar a pixel art, em vez de preservá-la.

Se o sprite veio originalmente de um gerador de imagens por IA — em vez de ter sido desenhado como pixel art de verdade —, provavelmente não está em uma grade de pixels limpa, e nenhum método de redimensionamento corrigirá isso; consulte nosso guia de prompts de sprites com IA para obter uma origem mais limpa desde o início.

Uma lista de verificação prática

1. Confirme que a imagem original realmente é pixel art em uma grade consistente, não uma exportação rasterizada com bordas suaves.
2. Escolha um fator de escala inteiro (2x, 3x, 4x) com base no tamanho desejado, não o contrário.
3. Redimensione com amostragem por vizinho mais próximo / ponto, não com o modo bilinear ou bicúbico padrão da ferramenta.
4. Aplicar image-rendering: pixelated a qualquer elemento web que possa redimensionar a imagem novamente.
5. Defina o filtro de textura como Point/Nearest na sua engine de jogos, separadamente da escala de exportação.
6. Use hqx/xBRZ apenas se os degraus do vizinho mais próximo simples realmente incomodarem, e confira primeiro o resultado nas áreas com dithering.

Se preferir não configurar nada disso manualmente, nosso Ampliador de pixel art faz as três primeiras etapas por você: escolha um fator inteiro entre 2x e 32x, e ele replica cada pixel de origem com amostragem por vizinho mais próximo, sem misturar nada, e exporta PNG.

Perguntas frequentes