preloader

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 nos mecanismos de busca.

88% dos usuários que tiveram uma experiência ruim ao acessar um site devido a 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 peso delas.

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

Listo a seguir algumas dicas para tirarmos um 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õe 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 terá 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 onde 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!

Adote o AMP – Accelerated Mobile Pages, se possível. O AMP é uma tecnologia que manipula códigos HTML de páginas da internet para montar uma visualização rápida e leve. Há um modelo padrão com título, resumo, autor, texto e imagens que ajuda a acelerar o processo de carregamento, deixando de lado elementos desnecessários do site original.

4 – Use técnicas de carregamento

  • Imagens em diferentes versões
  • Lazy loading
  • Carregamento progressivo
  • Placeholders

Oferecer múltiplas versões de uma mesma imagem, tendo como base diferentes dispositivos e tamanhos de tela dos usuários. Isso evita com 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 com que todas as imagens são carregadas no carregamento inicial prejudicando o carregamento.

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 e 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. 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *