{"section":"tutorials","requestedLocale":"pt","requestedSlug":"compactacao-de-imagens","locale":"pt","slug":"compactacao-de-imagens","path":"docs/pt/tutorials/storefront/layout/compactacao-de-imagens.md","branch":"main","content":"A compactação ou compressão de imagens é um processo que reduz o tamanho dos arquivos de imagem para otimizá-las para a web, para garantir que as imagens sejam carregadas rapidamente enquanto um usuário navega em um site.\n\nO objetivo desse processo é aumentar a velocidade e a performance da loja, que têm impacto na experiência do usuário, no [SEO](https://developers.google.com/search/blog/2010/04/using-site-speed-in-web-search-ranking) e nas taxas de conversão.\n\nExistem dois tipos de compactação de imagens, descritos na tabela abaixo:\n\n| Tipo de compactação | Descrição |\n| - | - |\n| Lossy (com perdas) | Reduz o tamanho e a qualidade da imagem de forma a reter as informações mais significativas sem manter todos os pixels. | \n| Lossless (sem perdas) | Reescreve um arquivo de imagem sem remover nenhuma informação. Apesar de manter a qualidade original, é menos eficaz do que a compactação lossy ao reduzir o arquivo. |\n\nNa VTEX, os arquivos são armazenados em seu formato original, mas compactados em tempo real durante a navegação na loja.\n\nFazemos uma conversão automática para o formato [WebP](https://developers.google.com/speed/webp?hl=pt-br) sempre que for mais vantajoso, ou seja, sempre que o tamanho da imagem for menor, independentemente se a imagem original é no formato **PNG** ou **JPG / JPEG**.\n\nO uso do WebP pode gerar um ganho de 1 a 2 segundos no tempo de carregamento das páginas, variando conforme o layout. Confira a seguir como funciona a otimização de imagens em cada formato.\n\n> ℹ️ Navegadores que ainda não são [compatíveis com o formato WebP](https://developers.google.com/speed/webp/faq?hl=pt-br#which_web_browsers_natively_support_webp) e serviços como integrações e marketplaces sempre recebem imagens não convertidas, em qualquer formato. Arquivos no formato GIF não passam pela conversão para WebP.\n\n## PNG\n\nPara imagens em formato PNG, indicado para cores sólidas, gráficos detalhados e alto contraste, a conversão para WebP é realizada com compressão lossless, para evitar perdas grandes de qualidade. As imagens WebP lossless podem ser até 26% menores em comparação com as imagens em PNG.\n\nParalelamente, ocorre a otimização de imagens PNG utilizando [pngquant](https://pngquant.org/), mantendo o formato, mas reduzindo o tamanho da imagem em até 70%.\n\nPor fim, a VTEX entrega o menor arquivo, entre o WebP lossless e o PNG otimizado, conforme ilustrado no diagrama abaixo.\n\n![png-image-compression-pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/compactacao-de-imagens_1.PNG)\n\n## JPG / JPEG\n\nPara imagens no formato **JPG / JPEG**, indicado para fotos, a conversão para WebP é realizada com compressão lossy, podendo haver perdas de qualidade, mas garantindo um tamanho otimizado. Imagens WebP lossy são de 25% a 34% menores que imagens similares com índice de qualidade [SSIM](https://ece.uwaterloo.ca/~z70wang/research/ssim/) equivalente.\n\nA VTEX entrega ao cliente a imagem com menor tamanho de arquivo, dentre a original e a convertida em WebP lossless, conforme ilustrado no diagrama abaixo.\n\n![webp-image-compression-pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/compactacao-de-imagens_2.PNG)\n\n## Artigos relacionados\n\n* [Boas práticas para o uso de imagens no Catálogo](/pt/docs/tutorials/boas-praticas-para-o-uso-de-imagens-no-catalogo)\n* [Adicionar imagem à descrição do produto](/pt/docs/tutorials/adicionar-ou-editar-produto)\n* [Importar imagens por planilha](/pt/docs/tutorials/importando-imagens-por-planilha)\n* [Como atualizar a imagem de um SKU?](/pt/docs/tutorials/como-atualizar-a-imagem-de-um-sku)[Reutilizando imagens com o Image Widget](/pt/docs/tutorials/image-widget)"}