Otimização de imagens. Como e quando fazer?

Imagens pesadas são uma das causas mais comuns de um site lento, e um site lento perde visitantes. Este guia explica como reduzir o peso das imagens sem estragar a qualidade.

Porque é que a otimização de imagens importa?

1. Velocidade de carregamento
   Imagens não otimizadas estão muitas vezes na origem da lentidão de um website.
   Segundo um estudo da Google e da SOASTA (2017), 53% das visitas a websites móveis são abandonadas se a página demorar mais de 3 segundos a carregar.

2. Experiência do utilizador
   Uma navegação rápida mantém os visitantes no site e reduz a taxa de rejeição.

3. SEO
   O Google considera a velocidade de carregamento um fator de ranking. Websites mais rápidos tendem a obter melhores posições nos resultados de pesquisa.

4. Custos de alojamento e largura de banda
   Imagens otimizadas ocupam menos espaço, o que reduz os custos de alojamento e de transferência de dados.

Como otimizar imagens para a web?

Otimizar imagens passa por escolher o formato adequado, ajustar as dimensões e comprimir.

Estas são as estratégias principais:

1. Escolha o formato correto
   PNG para imagens com transparência, JPEG para fotografias e WebP como alternativa moderna e mais leve.

2. Redimensione as imagens
   Não carregue uma imagem de 2000x2000 pixels se o espaço máximo no seu design for de 800x800 pixels.

3. Comprima as imagens
   Use ferramentas de compressão para reduzir o tamanho do ficheiro sem perda visível de qualidade.

4. Use lazy loading
   Carregue só as imagens que estão visíveis no ecrã e adie as restantes.

5. Use imagens responsivas
   Com o atributo srcset, o navegador escolhe a versão da imagem adequada ao dispositivo e à resolução do ecrã.

Ferramentas recomendadas para otimização de imagens

Estas são três ferramentas populares. Para a primeira, incluímos um guia passo a passo.

1. Squoosh (https://squoosh.app/): esta ferramenta online permite comparar formatos e níveis de compressão lado a lado e controlar com precisão o resultado.

   Guia passo a passo para utilizar o Squoosh:

   a) Aceda a https://squoosh.app/
   b) Clique em "Drop or paste" ou arraste uma imagem para a área indicada.
   c) Depois de carregar a imagem, vê a original à esquerda e a versão otimizada à direita.
   d) No painel lateral direito, experimente diferentes opções de compressão:

   • Selecione o formato de saída (por exemplo, MozJPEG para JPEGs otimizados ou WebP para melhor compressão). Ajuste a qualidade com o controlo deslizante e observe como muda o tamanho do ficheiro e a qualidade da imagem.

   e) Se necessário, redimensione a imagem com a opção "Resize" no painel lateral esquerdo.
   f) Quando estiver satisfeito, clique em "Download" no canto inferior direito para guardar a imagem. Experimente com várias imagens e compare os tamanhos dos ficheiros antes e depois.

2. TinyPNG (https://tinypng.com/) Este serviço online comprime imagens PNG e JPEG e reduz bastante o tamanho do ficheiro, mantendo uma qualidade visual aceitável. É útil para otimizar muitas imagens de uma vez.

3. ImageOptim (https://imageoptim.com/) Uma aplicação gratuita para macOS que remove metadados desnecessários e comprime sem perdas (lossless), o que dá ficheiros mais pequenos sem afetar a qualidade da imagem.
   Serve para quem prefere uma aplicação de computador.

Estas estratégias melhoram o desempenho do seu website. Meça a velocidade de carregamento das páginas com o Google PageSpeed Insights ou o GTmetrix para ver o efeito das otimizações.

A otimização de imagens repete-se: sempre que adicionar conteúdo novo ao site, otimize as imagens antes de as carregar. Se precisar de ajuda com a velocidade do seu website, conheça o nosso serviço de gestão de websites ou contacte-nos.

Fontes:
Squoosh documentation: https://github.com/GoogleChromeLabs/squoosh
Google/SOASTA Research, 2017: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/Web.dev - Image Optimization: https://web.dev/fast/#optimize-your-images