• 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!

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

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.

 
This site was designed with the
.com
website builder. Create your website today.
Start Now