Qual formato usar em fotos de produto?

Para fotos, prefira WebP com perdas (~80–85%). Use PNG ou WebP lossless apenas para logos, ícones ou gráficos com texto muito nítido.

Qual tamanho exportar?

Exporte para a largura real de exibição (por exemplo 1200px) e use srcset para telas Retina. Defina width/height no HTML.

Como evitar imagens embaçadas?

Use tripé, boa iluminação difusa, foco no ponto correto e exporte na resolução certa. Evite redimensionar no HTML/CSS além do necessário.

E-commerce: como manter nitidez em fotos de produto (sem pesar o site)

Por que a nitidez importa

Fotos nítidas aumentam confiança, reduzem dúvidas e melhoram conversão. Em marketplaces e lojas próprias, a percepção de qualidade do produto começa pela imagem.

Configuração de captura (rápida e eficaz)

Luz difusa: use softbox, janela com difusor ou uma tenda de luz para reduzir sombras duras.
Tripé + temporizador: evita microtremores e garante foco constante.
Foco no detalhe: em produtos pequenos, foque no ponto de interesse (ex.: textura, bordado, conector).
Balanço de branco: padronize (Kelvin fixo) para evitar variações de cor entre sessões.

Fundo, recorte e consistência visual

Use fundo neutro (branco, cinza claro) e mantenha distância suficiente para evitar sombras no fundo. Recorte o produto se necessário, mas preserve bordas nítidas.

Centralize o produto e mantenha margens similares em todas as fotos.
Padrões ajudam: mesma altura de câmera, distância e iluminação por categoria.
Para transparência perfeita (logos, vidro), compare PNG x WebP lossless.

Exportação: tamanho, formato e qualidade

Evite enviar imagens gigantes para um card de produto de 1200px. Exporte no tamanho real de exibição e ofereça zoom com uma versão maior quando fizer sentido.

Tamanho: 1200px (desktop herói), 800–1000px (página produto), 600–800px (listagens). Ajuste ao seu layout.
Formato: fotos em WebP (80–85%); PNG/WebP lossless para gráficos/ícones.
Dimensões no HTML: defina width e height para reduzir CLS.

PNG/JPG → WEBP WEBP → PNG JPG/PNG → PDF

Dicas específicas para e-commerce

Variedade de ângulos: frente, trás, detalhes e escala (na mão ou ao lado de um item comum).
Padronize nomes de arquivo: sku-produto-cor-angulo.webp (ajuda no SEO e no DAM).
ALT text: descrição objetiva com termo-chave natural (veja o guia de ALT text).
Zoom responsivo: ofereça imagem maior sob demanda (lazy-loading) para não pesar a página inicial.
Fundo consistente: aumenta a percepção de organização e valor.

Checklist rápido

✔ Iluminação difusa e tripé
✔ Foco preciso no detalhe
✔ Exportar no tamanho real de exibição
✔ WebP ~80–85% para fotos
✔ PNG/WebP lossless para elementos com borda/ícone
✔ ALT text + nomes descritivos

FAQ

Minhas fotos ficam embaçadas no celular. O que fazer?: Use tripé, luz constante e ajuste o ponto de foco. Garanta que a imagem não esteja sendo esticada além do tamanho exportado.
Quando usar fundo recortado (transparente)?: Quando o layout exige sobreposição ou troca dinâmica de fundos. Compare PNG x WebP lossless para bordas limpas.
Qual a melhor qualidade WebP para produto?: Comece com 80–85% e valide visualmente detalhes finos (zíperes, costuras, tipografia).