Como redimensionar imagens sem perda de qualidade

“Sem perda de qualidade” é assimétrico. Reduzir — tornar uma imagem menor — perde informação por definição (você tem menos pixels que a fonte), mas a perda é geralmente invisível se você usar um bom algoritmo. Ampliar — torná-la maior — inventa detalhes que não estavam lá, e o resultado sempre parece mais suave que uma fonte de resolução nativa. Este guia explica quais fluxos de trabalho preservam a qualidade visível e quais não.

Reduzir: geralmente seguro

Se sua fonte é de 3000×2000 pixels e você precisa de 600×400 para a web, você está descartando 96% dos pixels. Contanto que o algoritmo de redução faça a média dos pixels descartados nos mantidos (em vez de apenas amostrar cada N-ésimo pixel), o resultado parece correto.

Navegadores modernos, Photoshop e ferramentas dedicadas usam interpolação bilinear ou bicúbicapor padrão. Para reduções agressivas (> 4× de redução), eles encadeiam múltiplas passagens para evitar aliasing.

Quando reduzir dá errado: amostragem por vizinho mais próximo (que preserva pixel art, mas produz fotografias serrilhadas) ou redução em única passagem em proporções extremas (que causa padrões de moiré). Quase nenhuma ferramenta de consumidor usa vizinho mais próximo por padrão; você teria que solicitá-lo explicitamente.

Ampliar: sempre perde

Uma imagem de 100×100 pixels tem 10.000 informações. Ampliá-la para 400×400 produz 160.000 pixels — 150.000 dos quais o algoritmo inventou interpolando entre vizinhos. O resultado é matematicamente uma suposição.

Três tipos de ampliação:

• Bilinear / Bicúbico. Interpolação padrão. Resultados suaves, ligeiramente borrados. O padrão quando você muda o tamanho de <img> em CSS.
• Lanczos. Mais nítido que bicúbico, preserva melhor as bordas. Algumas ferramentas usam isso por padrão para ampliações 2×.
• Ampliação por IA.Topaz Gigapixel, Super Resolution da Adobe, ferramentas baseadas em ESRGAN. Treinadas em milhões de exemplos de alta resolução; alucinam detalhes plausíveis. Os resultados parecem melhores que a interpolação, mas não são realmente precisos — o “detalhe” é inventado.

Regra prática: nunca amplie um ativo final. Encontre uma fonte de maior resolução. Se a fonte genuinamente não existe (uma fotografia antiga, um logotipo minúsculo), ampliação por IA é a melhor das más opções.

O formato afeta a qualidade visível

Mesmo com redimensionamento perfeito, o formato em que você salva determina o que sobrevive. Veja nosso guia PNG vs JPG vs WebP para o detalhamento completo; a versão curta:

• PNG — sem perdas. Redimensionar e salvar como PNG preserva a imagem redimensionada exatamente. Use para logotipos, ilustrações, capturas de tela com texto nítido.
• JPEG @ 90% — visualmente indistinguível do PNG para fotografias em tamanhos de visualização típicos. As quedas de qualidade não são sobre o redimensionamento, são sobre a codificação JPEG.
• WebP @ 80% — 25-35% menor que JPEG em qualidade equivalente. O padrão web para fotografias desde 2020.
• GIF — limitado a 256 cores; GIFs redimensionados de fotografias parecem com pôster. Converta para PNG ou WebP.

O fluxo de trabalho de proteção da fonte

Uma vez que você redimensiona e salva, você não pode recuperar o detalhe original. Então:

1. Archive a fonte. PNG ou RAW em resolução original. Etiquete-a/pasta para que o seu eu futuro possa encontrá-la.
2. Gere derivativos. Tamanhos web a partir da fonte, não de uma cópia previamente redimensionada. Cada rodada de redimensionar e salvar acumula artefatos de compressão; começar do zero a partir da fonte evita isso.
3. Gere os tamanhos de que você realmente precisa. Comum: @1× para displays tradicionais, @2× para Retina, @3× para telefones de alta qualidade. Sirva via <img srcset> ou <picture>.
4. Não reedite um JPEG. Cada salvamento descarta mais informações. Se você precisar corrigir cores depois, faça isso na fonte e reexporte.

Redimensionamento no navegador vs. no desktop

Navegadores modernos fazem redimensionamento de alta qualidade no Canvas2D — o que nossa ferramenta de redimensionamento de imagem usa. Os resultados são visualmente idênticos ao bilinear/bicúbico do Photoshop na maioria dos casos. Para reduções agressivas (> 8× de redução), o “Image Size” do Photoshop com bicúbico mais nítido ainda tem uma leve vantagem na preservação de detalhes finos.

Para processamento em lote ou necessidades de interpolação incomuns, ferramentas de desktop (ImageMagick, GraphicsMagick, oxipng) dão controle mais refinado. A maioria dos fluxos de trabalho não precisa desse controle; o navegador é suficiente.

Erros comuns

• Redimensionar em CSS em vez de no código. Uma imagem de 4000×3000 servida a width=400 em CSS ainda são 4000×3000 bytes na rede. O navegador pode redimensionar, mas a rede já pagou. Redimensione no tempo de exportação, não no tempo de exibição.
• Esquecer o Retina. Uma imagem de 200×200 em um display @2× renderiza borrada. Exporte em 400×400, exiba como 200×200 pixels CSS.
• Recortar ampliando. Se você recortar 25% de uma imagem, você tem uma imagem de resolução de um quarto de volta. Ampliá-la para as dimensões originais apenas amplia os artefatos. Recorte primeiro, depois aceite a resolução menor como o novo teto.

Para a ferramenta ao vivo, veja nosso redimensionador de imagem apenas no navegador e o compressor de imagem complementar. Ambos funcionam inteiramente no seu navegador — os arquivos não saem da página.

Exemplo trabalhado: uma imagem hero para laptop Retina

Espaço alvo no design: 1200 × 600 pixels CSS. Fonte: uma foto DSLR de 24 megapixels, 6000 × 4000 pixels, JPEG sRGB.

• Escolha as dimensões de saída. Para Retina @2×, exporte 2400 × 1200 pixels de dispositivo. Para telefones com DPR @3×, exporte 3600 × 1800. Use <picture> com srcset para servir o certo.
• Recorte, depois reamostre. Recorte o 6000 × 4000 para uma região 2:1 (ex: 6000 × 3000), depois reamostre para 2400 × 1200 usando Lanczos3 no ImageMagick: magick input.jpg -filter Lanczos -resize 2400x1200^ -gravity center -extent 2400x1200 [email protected].
• Codifique WebP na qualidade 80. cwebp -q 80 [email protected] -o [email protected]. Tamanho de arquivo esperado: ~85-130 KB nesta resolução.
• Adicione uma variante AVIF para navegadores que suportam. avifenc --speed 6 -q 60 [email protected] [email protected] → outro 25-40% menor que WebP.
• Payload total: ~95 KB AVIF para navegadores modernos, ~110 KB WebP de fallback, ~200 KB JPEG de fallback legado. Comparado a servir o original DSLR de 6 MB sem redimensionar: 60× menor.

Erros comuns

• Salvar novamente JPEG após cada edição. Cada codificação JPEG é com perdas. Após 5-10 ciclos, os artefatos tornam-se visíveis. Sempre inicie edições a partir do original (PNG/PSD/RAW) e trate o JPEG apenas como uma exportação final.
• Usar vizinho mais próximo por acidente. CSS image-rendering: pixelatedou PowerPoint “Inserir imagem, não reamostrar” ambos contornam o dimensionador suave. Pixel art precisa de vizinho mais próximo; fotografias nunca precisam.
• Esquecer o canal alfa. Redimensionar um PNG com transparência usando um algoritmo não pré-multiplicado produz bordas escuras nas bordas alfa. Pré-multiplique antes de reamostrar, depois desfaça. O -alpha set do ImageMagick lida com isso quando fornecidos os sinalizadores corretos.
• Confiar no imageSmoothingQuality="high" do navegador uniformemente. Safari, Firefox e Chrome implementam isso de forma diferente. Para trabalho de precisão pixel, faça a redução do lado do servidor (sharp, ImageMagick) e envie o ativo pronto.
• Tratar “Photoshop bicúbico mais nítido” como universalmente melhor. Bicúbico mais nítido introduz artefatos de ringing em bordas de alto contraste. Para texto, use Lanczos. Para fotografias em reduções moderadas, bilinear com um leve afiamento é frequentemente visualmente equivalente e muito mais rápido.

Casos especiais

• SVG. Gráficos vetoriais não precisam de reamostragen — eles re-renderizam em qualquer tamanho sem perdas. A única preocupação de redimensionamento é o hinting para posicionamento sub-pixel e garantir que larguras de traço não colapsen abaixo de 1px no tamanho alvo.
• GIF/WebP animado. Reamostragen por quadro sem coerência temporal introduz cintilação entre quadros. Use ffmpeg com um filtro temporal, ou converta para um formato animado moderno (WebP, AVIF, AV1).
• Imagens HDR. Conteúdo codificado PQ/HLG de 10 e 12 bits precisa de reamostradoras HDR-aware; uma reamostradra padrão de 8 bits esmaga realces e sombras. Fluxos de trabalho OpenColorIO e ACES lidam com isso.
• Impressão a >300 DPI em papel não revestido. O ganho de ponto de tinta em papel não revestido satura em torno de 250 DPI; reamostrar a fonte para 600 DPI são bytes desperdiçados. Combine com a capacidade da impressora, não com os metadados do arquivo.