- Felipe Barrozo
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.