Imagens de produto ficam borradas depois do upload: onde os pixels se perdem

Quando imagens de produto ficam borradas depois do upload, quase nunca é problema de câmera. O arquivo que saiu do seu computador estava nítido. O arquivo que o celular do comprador realmente baixou não é aquele arquivo: ele foi reamostrado, recodificado, limitado e reservido, normalmente quatro ou cinco vezes, por sistemas ajustados para a velocidade da página e não para as suas cotas.

Ninguém sobe uma imagem borrada. A nitidez não é perdida no upload; ela é gasta, uma etapa por vez, e a maior parte dessas etapas é invisível a partir do painel do vendedor. Aqui está o pipeline inteiro em uma tabela, e depois o que fazer com as três etapas que mais custam caro.

Imagens de produto ficam borradas depois do upload: as oito etapas, em ordem

#	Etapa	O que ela faz com o seu arquivo	O que você perde	Está sob seu controle?
1	Captura	Trepidação, foco errado, difração em aberturas muito fechadas	Detalhe real, irrecuperável depois	Sim
2	Reamostragem na exportação	Redução para o tamanho em pixels desejado sem nitidez de saída	Microcontraste em bordas, pontas de seta e textos pequenos	Sim
3	A sua codificação JPEG	O ajuste de qualidade e a subamostragem de croma descartam detalhe de cor	Linhas coloridas finas, texto de cota em vermelho e azul	Sim
4	Ingestão da plataforma	O marketplace decodifica o seu JPEG e recodifica com os ajustes dele	Perda geracional, halos de ringing em bordas duras	Não
5	Teto de pixels	A plataforma armazena no maior lado máximo dela	Tudo acima do limite, de forma permanente	Só escolhendo o tamanho certo de exportação
6	Tamanhos derivados	A página pede uma cópia do tamanho da miniatura, não o seu arquivo original	Detalhe na proporção da taxa de redução	Em parte, pelo espaço que você mira
7	Densidade de pixels do dispositivo	Uma tela de celular 3x quer três pixels de imagem por pixel CSS	Dois terços da nitidez aparente em telas densas	Em parte
8	Entrega	Placeholders de carregamento lento, ajustes do tema, alternativas para rede lenta	Suavidade temporária ou persistente na primeira renderização	Em parte

As etapas 1 e 2 são suas. As etapas 4 e 5 pertencem à plataforma e não são negociáveis. Na prática, a maior parte das reclamações de que imagens de produto ficam borradas depois do upload volta para as etapas 3, 4 e 7: a codificação, a recodificação e a tela. É também por isso que refazer as fotos raramente resolve alguma coisa.

Etapa 3: a subamostragem de croma é o motivo de a sua seta de cota vermelha morrer primeiro

A subamostragem de croma é um atalho da codificação JPEG que guarda o brilho em resolução cheia, mas a cor em uma fração dela: no modo 4:2:0, o mais comum, uma amostra de cor a cada bloco de 2x2 pixels. O detalhe de brilho sobrevive; o detalhe de cor é reduzido a um quarto antes de o arquivo sequer sair da sua máquina.

É uma troca razoável para a foto de um sofá. É uma troca péssima para uma seta vermelha de um pixel desenhada sobre um painel cinza, porque um vermelho de tom médio sobre cinza de tom médio quase não tem diferença de brilho em relação ao fundo. Praticamente toda a visibilidade dessa linha é carregada pela matiz, exatamente o canal que o codificador joga fora primeiro. A linha não some: ela se espalha em um borrão rosa de uns dois pixels de largura, e a ponta da seta perde o bico.

A correção não é subir o controle de qualidade. A correção é fazer as cotas vencerem pelo brilho, e não pela cor:

Linha escura sobre fundo claro, ou linha clara sobre fundo escuro. Contraste em luminância, não em matiz.
Dê à linha um contorno fino de contraste ou um halo, para que a borda sobreviva a uma média de cor 2x2.
Mantenha o texto de cota com pelo menos 2 px de espessura no tamanho entregue, não no tamanho do arquivo original.
Evite texto vermelho ou azul saturado direto sobre um produto de tom médio. São as duas matizes que quebram primeiro.

Etapa 4: a recodificação que ninguém vê

Todo marketplace decodifica o que você sobe e escreve a própria cópia. JPEG tem perda, então a segunda codificação não apenas repete os erros da primeira: ela quantiza uma imagem que já contém artefatos de compressão, e esses artefatos passam a ser tratados como detalhe que vale a pena preservar. O resultado visível é o ringing: halos fracos grudados em cada borda dura, mais óbvios em texto preto sobre branco e nas linhas retas de um diagrama de especificações.

Você não consegue desligar isso. O que dá para fazer é parar de alimentar o processo com material já danificado:

Guarde um original sem perda (PNG, TIFF ou o arquivo em camadas). Nunca edite o JPEG exportado e salve por cima.
Exporte uma única vez, a partir do original, no tamanho final em pixels. Cada salvamento intermediário em JPEG é uma geração que você está pagando.
Não pré-comprima para bater uma meta de peso de arquivo que o próprio teto da plataforma já resolve.

A regra que sai das etapas 3 e 4: o número de vezes que uma imagem de anúncio é codificada em JPEG importa mais do que o controle de qualidade de qualquer codificação isolada.

Etapa 5: o piso de pixels que mantém o zoom vivo

O zoom é o recurso que o comprador usa para conferir se uma especificação está legível, e toda plataforma o libera apenas acima de um limite de pixels. Se você não atinge esse limite, a imagem não está borrada: simplesmente nunca existe uma versão em alta resolução para servir.

Plataforma	Mínimo aceito	Limite para zoom	Teto
Amazon	500 px no maior lado	1.000 px no mínimo; 1.600 px ou mais para a melhor experiência de zoom	10.000 px no maior lado
eBay	500 px no maior lado	1.600 px no maior lado	12 MB por foto
Shopify	Sem piso publicado	Acima de 800 x 800 px para o zoom funcionar	5.000 x 5.000 px, até 20 MB; 2.048 x 2.048 px recomendado para o formato quadrado

Duas conclusões saem daí. Primeira, subir um arquivo fisicamente maior não acrescenta resolução que nunca foi capturada; é a mesma confusão por trás da discussão de 300 DPI x 72 DPI, em que um número gravado no cabeçalho do arquivo é confundido com detalhe de imagem. Segunda, exportar no teto da plataforma costuma ser de graça e é sempre mais seguro do que exportar no tamanho que o seu tema por acaso exibe hoje.

Etapa 7: o imposto de 2x nas telas densas

Densidade de pixels do dispositivo é a quantidade de pixels físicos de tela que o navegador usa para um pixel CSS. Celulares atuais costumam informar 2 ou 3. Uma imagem de 1.000 pixels colocada em um espaço de 500 pixels CSS parece nítida em um notebook antigo e visivelmente suave no celular, porque o celular pediu 1.500 pixels e recebeu 1.000.

Este é o motivo mais comum para um vendedor dizer "no meu monitor está ótimo". Provavelmente está mesmo. O seu monitor pediu menos pixels do que o celular do seu comprador. Confira cada imagem de anúncio em um celular, a 100%, antes de concluir que o arquivo está bom.

O corte agrava tudo. Se o espaço de exibição da plataforma tem formato diferente do da sua exportação, a parte nítida da imagem pode ser cortada antes mesmo de ser redimensionada: uma falha diferente que, para o olho, se lê como a mesma suavidade. Essa é uma decisão à parte, tratada em proporção das imagens de produto.

O que mudar, em ordem de retorno

Exporte no teto da plataforma, uma única vez, a partir de um original sem perda. É o maior ganho isolado e não custa nada.
Ajuste o contraste das cotas antes de mexer no controle de qualidade. Luminância vence matiz em qualquer codificação.
Aplique nitidez depois de redimensionar, nunca antes. Aplicar nitidez em um original de 6.000 px e depois reduzir joga essa nitidez fora e ainda acrescenta halos.
Pare de reprocessar JPEG. Uma exportação por tamanho entregue, sempre a partir do original.
Confirme no celular. Não na pré-visualização do desktop, e não na janela de upload.

Existe uma quinta alavanca que está acima de tudo isso: como a cota foi criada em primeiro lugar. Linhas de cota e textos de especificação desenhados como geometria e exportados uma única vez no tamanho entregue em pixels continuam nítidos mesmo depois da recodificação da plataforma, porque são formas de borda dura e alto contraste de luminância renderizadas em resolução nativa. Os mesmos números digitados em um editor de imagens sobre uma visualização ampliada e depois reduzidos já chegam suaves antes de a compressão começar. Ferramentas que encaixam a medida nas bordas reais do produto e exportam a imagem anotada no tamanho de diagrama de cada plataforma pulam as etapas 2 e 3 por completo; e como a geometria é medida em vez de gerada, o número na seta é o número da trena, não uma cifra plausível inventada por um modelo de imagem. Se você está pesando as abordagens, a lista curta de ferramentas para adicionar dimensões a fotos de produto é um ponto de partida sensato.

O diagnóstico de 60 segundos

Faça isto antes de refazer qualquer foto. Ele separa as três causas de imagens de produto que ficam borradas depois do upload (pixels de menos, codificações demais, tela densa demais) em cerca de um minuto:

Abra o anúncio publicado no celular e dê zoom com os dedos. O zoom chega a ativar? Se não, você está abaixo do limite de zoom da plataforma: é um problema de contagem de pixels, não de nitidez.
Clique com o botão direito na imagem publicada e abra em uma nova aba. Compare as dimensões em pixels com as do que você subiu. Um número menor significa que a plataforma limitou ou derivou de novo.
Olhe uma borda dura de preto sobre branco a 200%. Halos claros e fracos dos dois lados indicam recodificação, e não foco suave.
Olhe uma linha de cota colorida a 200%. Se a linha vazou para os lados mas o texto preto ao redor está limpo, isso é subamostragem de croma.
Confira o arquivo que você subiu. Se ele já foi aberto e salvo de novo como JPEG, refaça a exportação a partir do original.
Compare o maior lado do original com o teto da plataforma. Se estiver bem abaixo, exporte de novo em tamanho maior.

Se os seis passarem e a imagem ainda parecer suave, só então é problema de captura, e nesse ponto a correção está na foto, não na exportação. Montar uma cena que continue mensurável é uma disciplina própria, tratada em como fotografar um produto para medição.

Perguntas frequentes

Por que minhas imagens de produto ficam borradas depois do upload na Shopify, mas nítidas no meu computador?

Porque o seu computador mostra o original e a loja mostra um derivado. A Shopify redimensiona as imagens automaticamente para caber em telas menores, então o comprador normalmente recebe uma cópia reduzida, e não o seu arquivo. A Shopify aceita imagens de até 5.000 x 5.000 px e 20 MB, recomenda 2.048 x 2.048 px para imagens de produto quadradas e precisa de imagens acima de 800 x 800 px para o zoom funcionar; se o seu upload estiver bem abaixo disso, todo derivado já começa com detalhe de menos.

Subir um arquivo maior deixa a imagem mais nítida?

Só até a resolução que você realmente capturou. Mais pixels ajudam quando o limite de zoom da plataforma ou os tamanhos derivados estão deixando a exibição sem material; por exemplo, sair de 800 px para 1.600 px na Amazon ou no eBay liga o zoom. Ampliar uma foto de 900 px para 3.000 px acrescenta peso e nenhum detalhe, e muitas vezes ainda soma uma suavidade visível de interpolação.

Por que o texto da minha cota fica bom na imagem principal e empastado na miniatura da galeria?

A miniatura é um derivado separado, gerado por redução. Um texto de 14 px de altura em um original de 1.600 px vira cerca de 4 px em uma miniatura de 450 px, abaixo do tamanho em que as formas das letras sobrevivem a qualquer reamostragem. Dimensione o texto de cota contra o menor espaço em que ele vai aparecer, e não contra o original.

Devo subir PNG em vez de JPEG para diagramas de especificações?

Onde a plataforma permitir, sim para imagens que são majoritariamente cor chapada, linhas duras e texto, porque PNG não tem perda e é imune à subamostragem de croma. O detalhe é que a maioria dos marketplaces recodifica para JPEG na ingestão de qualquer forma, então o PNG protege as etapas 2 e 3, mas não a 4. Ainda assim vale a pena: uma entrada limpa sobrevive muito melhor a uma recodificação do que uma já degradada.

Por que minhas imagens ficam piores no 4G do que no wi-fi?

Alguns navegadores e redes substituem por uma versão de qualidade mais baixa em conexões limitadas, e muitas lojas exibem um placeholder minúsculo e borrado enquanto o arquivo real carrega. Se a imagem fica nítida depois de um segundo, aquilo era o placeholder e não há nada a corrigir. Se continuar suave, volte pelas etapas 5 a 7.