{"section":"tutorials","requestedLocale":"pt","requestedSlug":"melhorando-a-performance-de-imagens-do-site","locale":"pt","slug":"melhorando-a-performance-de-imagens-do-site","path":"docs/pt/tutorials/catálogo/produtos-e-skus/melhorando-a-performance-de-imagens-do-site.md","branch":"main","content":"As imagens dos produtos são muitas vezes o principal vilão da performance de sua loja.\n\nO objetivo deste artigo é mostrar como usar o VTEX Img para tornar o carregamento das imagens mais eficiente e melhorar a performance do site.\n\nO **VTEX Img**, serviço que entrega essas imagens ao front da loja, tem uma pequena API que, se bem utilizada, pode trazer grandes benefícios aos seus clientes.\n\nA URL da imagem de um SKU tem o seguinte formato:\n`http://[ACCOUNT_NAME].vteximg.com.br/arquivos/ids/[ID](-[LARGURA]-[ALTURA])/([NOME_DA_IMAGEM])`\n\nO que está entre colchetes são valores que mudam de acordo com a loja, SKU e imagem (ou seja, o account name da loja, o ID, a largura, a altura e o nome da imagem).\n\nO que está entre parênteses são parâmetros opcionais (ou seja, largura, altura e nome da imagem).\n\n## Exemplo\n\nO nosso catálogo envia as imagens dos SKUs no seguinte formato:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602/robo.jpg`\n\nNessa URL, temos:\n\n- **[ACCOUNT\\_NAME]**: instoreqa\n- **[ID]**: 155602\n- **[LARGURA]**: não especificada\n- **[ALTURA]**: não especificada\n- **[NOME\\_DA\\_IMAGEM]**: robo.jpg\n\nO nome da imagem é um parâmetro opcional. Por isso, a mesma imagem é entregue se abrirmos a seguinte URL:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602/`\n\n## Melhorando a performance\n\nA maneira mais eficaz de melhorar a performance das imagens é fazer com que elas tenham o tamanho que será realmente usado no site. Por exemplo:\n\nUma loja quer exibir em uma página a imagem de um produto com tamanho de 50x50. Imagine que a loja escreva em seu código html a seguinte URL:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602/robo.jpg`\n\nNeste caso, o navegador irá baixar a imagem com tamanho completo, ou seja, a mesma imagem em alta definição que foi enviada no upload para o Catálogo.\n\nIsso significa que os dados que estão sendo trafegados estão além do necessário, o que é ruim para a performance da loja.\n\n### O que fazer?\n\nPodemos pedir ao VTEX Img que envie a imagem em um tamanho específico.\n\nNo nosso exemplo anterior, basta escrever da seguinte maneira a URL da imagem no código html:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602-50-50/`\n\nDesta forma, o VTEX Img entregará a imagem com um tamanho de 50x50. Isto tornará seu carregamento muito mais rápido.\n\n![tamanhosImg](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/catálogo/produtos-e-skus/melhorando-a-performance-de-imagens-do-site_1.png)\n_Entregar imagens em um tamanho maior que o de exibição prejudica a performance da sua loja._\n\n## Imagens retangulares\n\nAo redimensionar imagens retangulares, o VTEX Img mantém sua proporção, ou seja, elas são redimensionadas sem distorção.\n\nEm lojas de roupas, por exemplo, é muito comum as imagens terem um formato de retrato, em que a altura é maior do que a largura, como 300x400. Se a loja precisar dessa imagem quadrada (num formato de 50x50, por exemplo) ela acabará distorcida.\n\nO VTEX Img impede distorções completando o espaço vazio com um fundo branco."}