Otimização de Imagens em um Projeto Web

A velocidade de um website interfere diretamente na taxa de conversão, engajamento e também no posicionamento orgânico dos mecanismos de busca.

88% dos usuários que tiveram uma experiência ruim, ao acessar um site, devido à velocidade de carregamento, são menos propensos a comprar, e mais de um terço desses usuários vai compartilhar a experiência ruim com os amigos, revelou uma pesquisa da Econsultancy.

Um dos primeiros pontos a se fazer, ao iniciarmos um trabalho de otimização de performance, é analisar todas as requisições (requests) da página e verificar o tempo e o peso delas.

Ter imagens não otimizadas é um dos principais fatores para um tempo de carregamento lento. Esse tipo de descuido aumenta o risco de uma taxa de rejeição maior e de menos conversões, ou seja, oportunidades perdidas para lucrar. Ainda mais no mobile.

Listo, a seguir, algumas dicas para tirarmos um melhor proveito das imagens, no desenvolvimento de um website.

1 – Priorize as imagens mais importantes do seu site

• Remova imagens em alta resolução e GIFS desnecessários

• Substitua imagens por texto ou CSS sempre que possível

Faça uma lista e se pergunte: “Todas as imagens que compõem o seu layout são realmente necessárias?” Um título animado em GIF não poderia ser um título CSS animado? A interação do designer com o desenvolvedor é muito importante, nesses cenários. Em diversos casos, é possível utilizar CSS para substituir imagens — isso ajuda a economizar dados e, consequentemente, haverá um ganho de performance.

2 – Escolha um formato de imagem eficiente

• WebP: Imagens translúcidas e fotos com melhor compressão

• SVG: ícones e formas escalonáveis

Teste o WebP, que pode ser usado para imagens fotográficas, 30% mais comprimidas que o JPEG, sem perda de qualidade. Mas garanta sempre compatibilidade total de navegação. O Google forneceu uma documentação, que fala mais sobre a compatibilidade WebP.. https://developers.google.com/speed/webp/faq

3 – Comprima e reduza o peso das imagens

• Remova metadados

• Teste definições de qualidade

• AMP – Accelerated Mobile Pages

Reduza o tamanho, mas garanta qualidade, ao comprimir as imagens. Hoje, existem diversas aplicações, inclusive web, para compressão de imagens. Remover metadados (dia e hora de criação do arquivo, por exemplo) também é uma alternativa, mas nunca deixe de testar a qualidade. Nunca!

4 – Use técnicas de carregamento

• Imagens em diferentes versões

• Lazy loading

• Carregamento progressivo

• Placeholders

Ofereça múltiplas versões de uma mesma imagem, tendo como base diferentes dispositivos e tamanhos de tela dos usuários. Isso evita que uma imagem carregada no desktop seja a mesma para o mobile e vice-versa.

O lazy loading prioriza o carregamento das imagens disponíveis para uma visualização específica – as demais, que não aparecem naquele momento, são carregadas quando necessário. Isso evita que todas as imagens sejam carregadas, no carregamento inicial, prejudicando o processo.

Quando imagens grandes demoram a carregar, pense em implementar técnicas de carregamento progressivo, como placeholders (dicas, frases ou uma palavra que aparece na página para ajudar o usuário a preencher um formulário), indicadores de progresso ou formatos eficientes, como o JPEG progressivo. Esse tipo de otimização dá aos usuários a sensação de estar progredindo na página, e isso os mantêm engajados por mais tempo.

Implemente indicadores, para avaliar a performance, monitore com dashboards, alertas automáticos e faça um review mensal. Projetos que são atualizados constantemente devem ter esse nível de atenção.