Gostaria de saber como faço para melhorar a qualidade das fotos, as imagens no site ficam todas pixeladas. há algo no html que possa ser feito?

tiramos fotos em alta qualidade e até os banners perdem a qualidade quando subo.

já conferimos a qualidade no tipos de arquivo e está no máximo.

segue o exemplo de fotos tirada com o mesmo tipo de câmera:

WhatsApp Image 2021-02-04 at 11.54.50WhatsApp Image 2021-02-04 at 11.54.51

Não é uma prática tão recomendada pois sua loja vai ficar pesada, mas se você subir as imagens em png ao invés de jpg, não perde tanta qualidade =)

Olá! Tudo bem?

Estamos revendo os tópicos mais relevantes/visitados da nossa comunidade e por isso, reabrimos a sua pergunta.

Trouxe três principais pontos que podem influenciar na qualidade das imagens renderizadas em sua loja e vou repassá-los com você abaixo, tá bem?

Os pontos são: tamanho das imagens, formato das imagens, e possibilidade de compressão no front.

Em relação ao tamanho das imagens, o mínimo recomendado é 1000x1000px. Para que o zoom das imagens funcione corretamente sem perder a resolução, por exemplo, recomendamos que as imagens tenham de 1500 a 2000 pixels. Além disso, as imagens não devem ter menos que 600 pixels (em cenários nos quais o zoom não seja um instrumento de relevância para sua pdp).

Já em relação ao formato das imagens, conforme menciona o Nathan e, segundo documentação da VTEX, a resolução da imagem poderá melhorar ao ser colocada em PNG​. Então, o que vocês podem fazer é tentar subir a imagem no formato .png para que o WebP utilize o "lossless", ou seja, comprima a imagem sem uma redução de qualidade e verificar se isso reflete de uma forma mais nítida no carrinho.

Uma outra opção é subir esta imagem em específico no mesmo formato .jpg mas com uma resolução melhor (kB maior), pois na hora de comprimir no carrinho é esperado que ela fique com uma resolução melhor também.

Ainda assim, gostaria de reiterar o que é tratado no próprio artigo que mencionei acima e trarei link abaixo: ambas alterações sugeridas podem resultar em uma redução na velocidade da página. Sendo assim, aconselho que vocês realizem testes em algumas imagens para verificar as modificações.​

Por fim, um ponto importante que sugiro ser verificado é ver com a agência responsável pelas customizações de front de vocês, se está sendo realizada alguma compressão no front.

Abaixo, trago links relevantes que tratam sobre essas recomendações que passei contigo acima. Recomendo leitura!

https://help.vtex.com/pt/faq/por-que-as-imagens-da-minha-loja-estao-sendo-exibidas-com-baixa-qualidade--5LxgbF8S2cIUOCaCO00GcK

https://help.vtex.com/pt/tutorial/boas-praticas-para-o-uso-de-imagens-no-catalogo--738K2yfq5U86kUI2k4AQIk

Espero ter ajudado, abraços!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.