Como melhorar a resolução de minhas imagens?

Olá, pessoal! Tudo bem?

Essa documentação faz parte de uma iniciativa VTEX para fomentar conhecimento dentro da comunidade!

Nesta thread, comentarei sobre um cenário que pode ser vivenciado em sua loja: baixa resolução das imagens refletindo em seu front. Trarei três principais pontos que podem ser analisados por você ou seu time de desenvolvimento para melhoria da resolução de imagens de seu site: tamanho das imagens, formato das imagens, possível compressão das imagens no front.

1) 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).

O Google disponibiliza um tutorial para que você consiga inspecionar o tamanho de imagens de seu site utilizando o DevTools. O tutorial é super simples e você consegue acessá-lo por aqui.

2) Já em relação ao formato das imagens, você consegue verificar pelo inspecionamento orientado pelo tutorial do Google mencionado acima, em qual formato se apresentam suas imagens. É muito comum, por exemplo, que os clientes disponham imagens em suas lojas no formato .jpg. Contudo, segundo a documentação deste link, a resolução da imagem poderá melhorar ao ser colocada em PNG​.

Então, o que vocês poderiam fazer, caso suas imagens estejam em .jpg, é 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: 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.​

3) Por fim, um outro 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. Isto pode tornar a resolução das imagens de seu site menor e é uma questão, conforme mencionado, que deve ser verificado com o time de desenvolvimento de sua loja.

Espero ter ajudado, abraços!