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.
O objetivo desse processo é aumentar a velocidade e a performance da loja, que têm impacto na experiência do usuário, no SEO e nas taxas de conversão.
Existem dois tipos de compactação de imagens, descritos na tabela abaixo:
| Tipo de compactação | Descrição |
|---|---|
| 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. |
| 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. |
Na VTEX, os arquivos são armazenados em seu formato original, mas compactados em tempo real durante a navegação na loja.
Fazemos uma conversão automática para o formato WebP 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.
O 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.
Navegadores que ainda não são compatíveis com o formato 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.
PNG
Para 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.
Paralelamente, ocorre a otimização de imagens PNG utilizando pngquant, mantendo o formato, mas reduzindo o tamanho da imagem em até 70%.
Por fim, a VTEX entrega o menor arquivo, entre o WebP lossless e o PNG otimizado, conforme ilustrado no diagrama abaixo.
JPG / JPEG
Para 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 equivalente.
A 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.
