Para uma foto de produto atender telas de alta densidade, descubra primeiro a largura em que ela aparece no site, em pixels CSS, e multiplique pelo fator de densidade que você quer contemplar. Se a foto ocupa 500 pixels CSS e o fator é 2, uma referência é preparar um arquivo com 1000 pixels de largura — desde que o original tenha resolução suficiente e a loja realmente entregue essa versão.
Aqui no utilzinho, nossa posição é simples: não começamos pela pergunta “qual é o maior tamanho possível?”, mas por “como essa loja mostra a imagem?”. A conta ajuda a planejar; quem dá a resposta final é o teste na página publicada. Vamos fazer essa escolha sem transformar uma foto de produto em um arquivo gigante por puro entusiasmo.
Por que a largura exibida vem antes da largura do arquivo?
Uma foto pode ter uma largura no arquivo e aparecer bem menor na vitrine. O arquivo traz pixels de imagem; o espaço ocupado na página é medido em pixels CSS. Eles não são necessariamente equivalentes em uma tela de alta densidade: o dispositivo pode usar mais pixels físicos para representar a mesma área da página.
Por isso, perguntar apenas “minha foto tem quantos pixels?” deixa metade da história de fora. Se o cartão do produto é estreito, não faz sentido escolher uma largura pensando só na tela inteira. Se a página abre uma visualização ampliada, por outro lado, pode haver outra necessidade além daquela do cartão. Uma mesma loja ainda pode usar tamanhos diferentes na listagem, na página do produto e na versão para celular.
Nosso conselho é anotar cada lugar em que a foto será usada. Veja a largura em que ela de fato aparece e confira se o site aplica corte, zoom ou uma área de exibição diferente. Não é preciosismo: uma foto que parece ótima na grade de produtos pode denunciar falta de detalhe quando alguém abre a imagem maior.
Como calcular a resolução para uma tela retina?
Use esta conta como ponto de partida: largura de exibição em pixels CSS × fator de densidade considerado = largura de referência do arquivo em pixels. Para uma área de 500 pixels CSS e um fator 2, o resultado é 1000 pixels de largura. O fator indica quantos pixels físicos podem corresponder a cada pixel CSS naquela situação; não é uma etiqueta mágica colada em toda tela.
Quer saber qual resolução usar para foto de produto em tela retina? Primeiro, identifique a largura exibida no contexto que importa; depois, aplique o fator escolhido e confira se o arquivo original comporta a largura calculada. A altura acompanha a proporção da imagem, salvo quando a loja exige um enquadramento específico. Se houver corte, decida o enquadramento antes de exportar: ninguém quer descobrir na vitrine que a alça da bolsa ficou de fora.
Não trate 1000 pixels como receita universal. É o resultado daquele exemplo, não uma exigência para todo produto ou site. O mesmo vale para o fator: telas e formas de entrega variam. A decisão útil é relacionar o tamanho da área ocupada à versão que a loja vai servir, em vez de procurar um número isolado para todas as fotos.
O que conferir na loja antes de preparar a imagem?
Comece pela página real, não só pelo arquivo aberto no computador. Observe a foto na listagem e na página do produto, em uma tela comum e em uma de alta densidade, se você tiver acesso a ambas. Confira também a apresentação no celular: muitas lojas reorganizam o espaço e podem entregar arquivos diferentes conforme o dispositivo.
Se você administra o site, inspecione o espaço que a imagem ocupa e qual arquivo o navegador efetivamente carrega. O código da página pode oferecer versões alternativas para larguras ou densidades diferentes; nesse caso, subir uma imagem maior não garante, por si só, que aquela versão será mostrada. Se você usa uma plataforma de loja, consulte as orientações de imagem dela e teste uma publicação. Algumas plataformas processam o arquivo após o envio, o que também altera o resultado observado.
Compare o que aparece na tela com o original: bordas do produto, textura e textos na embalagem são bons lugares para perceber falta de definição. Faça essa comparação na página onde o cliente compra, não apenas ampliando o arquivo localmente. O objetivo é verificar se a imagem atende telas de alta densidade na sua loja, e não vencer uma competição imaginária de megapixels.
Por que aumentar a imagem não recupera detalhes?
Redimensionar muda as dimensões em pixels, mas não refaz informação que não foi registrada na foto. Se o original é pequeno, desfocado ou excessivamente comprimido, ampliá-lo pode produzir mais pixels sem recuperar a textura do tecido ou a nitidez de um rótulo. É como aumentar a letra de uma receita borrada: a página cresce, a leitura não melhora junto.
Antes de ampliar, procure o arquivo original de melhor qualidade disponível. Se ele não tiver detalhe suficiente para a largura desejada, considere refazer a foto ou escolher outra imagem. Também vale verificar se o problema é realmente resolução: uma imagem pode parecer ruim por causa de foco, iluminação, corte inadequado ou tratamento feito pela própria loja.
Quando o original permite, você pode preparar as dimensões necessárias em nossa ferramenta de redimensionar imagem. Use a largura calculada como referência e preserve a proporção, a menos que seu layout peça outro enquadramento. Nós preferimos deixar esse limite claro: a ferramenta ajusta largura e altura em pixels; não inventa os detalhes que faltam ao arquivo de origem.
Como equilibrar nitidez e tamanho do arquivo?
Uma imagem grande demais pode aumentar o peso da página sem melhorar o que o visitante realmente vê. Por isso, depois de preparar a largura adequada, compare a aparência no site e o tamanho do arquivo. Se a versão menor já atende ao espaço de exibição e ao teste em tela de alta densidade, não há motivo para manter uma versão enorme apenas por garantia.
O formato também faz diferença no tamanho final. Dependendo da fotografia e das exigências da loja, uma alternativa pode gerar um arquivo menor mantendo aparência aceitável. Se a plataforma aceitar o formato escolhido, nossa ferramenta de converter imagem ajuda a preparar versões em JPG, PNG ou WEBP. Antes de trocar de formato, confira se transparência, cores e detalhes continuam como você precisa.
Para decidir, teste a versão na vitrine e na visualização ampliada, observe se há perda visível e confirme qual arquivo foi entregue pelo site. Se a plataforma criar suas próprias versões, trabalhe de acordo com esse fluxo. A melhor escolha não é simplesmente a imagem com mais pixels ou o menor arquivo possível: é a que apresenta o produto com clareza no uso real, sem peso desnecessário.
Perguntas frequentes sobre resolução de foto de produto
- Qual resolução usar para foto de produto em tela retina?
- Depende da largura em pixels CSS em que a foto aparece e da densidade que você pretende contemplar. Multiplique esses valores para obter uma largura de referência e confirme na loja se ela entrega e exibe a versão esperada.
- Uma foto com 1000 pixels de largura sempre basta?
- Não. Esse número atende ao exemplo de uma área de 500 pixels CSS com fator 2. Uma área de exibição ou visualização ampliada diferente pede uma avaliação própria, sempre considerando a qualidade do original.
- Posso ampliar uma foto pequena para ela ficar nítida?
- Você pode aumentar as dimensões do arquivo, mas isso não recria detalhes ausentes. Se o produto já aparece borrado no original, procure uma fonte melhor ou faça outra foto antes de preparar a versão para a loja.
- Preciso enviar a mesma imagem para celular e computador?
- Isso depende de como sua loja recebe, adapta e entrega imagens. Confira as orientações da plataforma e teste as páginas nos dois contextos; não presuma que o arquivo enviado será exibido exatamente como saiu do seu computador.
Em resumo, para a imagem atender telas de alta densidade, parta do espaço que ela ocupa, faça a conta da densidade e valide o resultado na loja. Se o original tiver qualidade suficiente, prepare a largura correspondente em redimensionar imagem e depois confira a página publicada. É um próximo passo mais confiável do que aumentar tudo e torcer pela nitidez.