Por que sua imagem fica borrada após enviá-la online

As cinco causas num relance

Uma foto nítida costuma ficar borrada após o envio por uma de cinco razões. Encontre o seu sintoma e então leia a seção correspondente abaixo.

Causa 1: recompressão da plataforma

A maioria das plataformas web — redes sociais, criadores de sites, sistemas CMS, plataformas de e-commerce — comprime as imagens após o envio para reduzir custos de armazenamento e melhorar os tempos de carregamento. A compressão que aplicam costuma ser agressiva e otimizada para uma redução média do tamanho de arquivo, não para a sua imagem específica.

O resultado é uma versão da sua foto que passou por duas passagens de compressão: uma ao exportá-la da sua câmera ou editor, e de novo quando a plataforma a recomprimiu. Cada passagem com perda introduz novos artefatos sobre os existentes. Gradientes suaves desenvolvem banding. Bordas nítidas ficam macias. O detalhe fino desaparece. Estratégias de mitigação:

• Envie numa qualidade mais alta do que você acha que precisa. As plataformas que recomprimem trabalham com a sua versão enviada. Se você envia em qualidade JPEG 95, a recompressão da plataforma parte de uma base mais limpa do que se você enviasse em qualidade 70.
• Envie nas dimensões de exibição exatas se você as conhece. Uma plataforma que recebe uma imagem já no tamanho alvo pode pular ou reduzir o redimensionamento, o que evita um dos passos de degradação.
• Consulte a documentação da plataforma para as especificações de envio recomendadas. Muitas plataformas publicam as dimensões e o formato que recomendam para a melhor qualidade.

Causa 2: enviar uma imagem menor que o tamanho de exibição

Se você envia uma imagem de 600 pixels de largura e ela é exibida a 1200 pixels de largura, o navegador precisa ampliá-la para caber no contêiner. Ampliar uma imagem além das suas dimensões originais — upscaling — revela a grade de pixels subjacente. A imagem fica macia, borrada ou quadriculada conforme o algoritmo de escala. A solução é usar uma imagem de origem ao menos tão grande quanto o tamanho de exibição, e de preferência 2× maior para telas de alta densidade (retina). Uma largura de exibição de 800 pixels CSS numa tela retina precisa de uma imagem de 1600 pixels para parecer nítida. Isso acontece quando:

• Você reduz uma foto agressivamente demais antes do envio, ficando menor que o tamanho de exibição
• Você usa uma foto tirada num dispositivo antigo com uma câmera de baixa resolução
• Você tira uma captura de tela numa tela não retina e a exibe num contexto retina
• Você envia uma versão do tamanho de uma miniatura de uma imagem para um espaço que a mostra grande

Causa 3: incompatibilidade de tela retina / de alta densidade

As telas retina e de alta densidade (também chamadas HiDPI ou telas 2×) usam dois pixels físicos para exibir cada pixel CSS. Uma área padrão de 100×100 pixels CSS usa uma grade de 200×200 pixels físicos nessas telas. Se você fornece uma imagem de apenas 100×100 pixels para um espaço que precisa de 200×200, ela aparece borrada em dispositivos retina enquanto parece boa em telas padrão.

A maioria dos laptops modernos, iPhones, iPads, telefones Android de ponta e muitos monitores de desktop são telas de alta densidade. Se o seu público usa dispositivos modernos e suas imagens parecem nítidas no seu monitor mas borradas quando outros as veem, uma incompatibilidade retina é a causa provável.

A solução: forneça imagens em 2× as dimensões de exibição CSS. Para um espaço CSS de 400 pixels de largura, envie uma imagem de 800 pixels de largura.

Causa 4: formato errado causando artefatos visuais que parecem desfoque

A compressão JPEG forte pode produzir artefatos que aparecem como desfoque em vez de quadriculado — em particular em zonas de gradiente suave como céu, pele e fundos desfocados. O que parece uma imagem borrada pode na verdade ser um JPEG muito comprimido onde o detalhe fino foi quantizado e removido.

O teste: amplie uma borda nítida na imagem (um caractere de texto, um contorno de alto contraste). Se a borda parece macia e cercada de ruído de cor, o problema são os artefatos de compressão JPEG. Se a borda é nítida mas à imagem geral falta detalhe, o problema é resolução insuficiente.

Corrija os artefatos JPEG enviando com um ajuste de qualidade mais alto ou convertendo para WebP, que lida com gradientes de forma mais limpa em tamanhos de arquivo equivalentes.

Causa 5: a confusão do DPI

Os editores de imagem muitas vezes mostram um valor «DPI» ou «PPI» nas configurações do arquivo. Algumas pessoas reduzem esse valor pensando que vai reduzir o tamanho de arquivo ou mudar como a imagem aparece na tela. Não faz nenhuma das duas coisas. O DPI (pontos por polegada) só tem sentido para a impressão — diz a uma impressora com qual densidade depositar a tinta. As telas usam pixels, não pontos por polegada, e o valor de DPI num JPEG ou PNG é ignorado por todos os navegadores.

Reduzir uma imagem de 300 DPI para 72 DPI num editor de imagem não a deixa menor nem mais borrada na tela — a menos que o editor também tenha reamostrado (redimensionado) as dimensões em pixels ao mesmo tempo. Verifique se as dimensões em pixels mudaram. Se não mudaram, a mudança de DPI não teve efeito na versão web.

Lista de verificação de prevenção

• Envie as imagens em 2× a largura de exibição CSS para nitidez retina
• Envie em qualidade JPEG 85+ ou qualidade WebP 82+ antes da recompressão da plataforma
• Verifique as dimensões de imagem recomendadas pela plataforma antes de enviar
• Nunca amplie uma imagem pequena para preencher um espaço grande — parta de uma origem de alta resolução
• Use WebP ou AVIF em vez de JPEG onde a plataforma permitir — eles lidam com a compressão de qualidade com mais elegância