Pergunta a qualquer programador web o que está a deixar a maioria dos websites lenta e a resposta é quase sempre a mesma. As imagens. A otimização de imagens para a web é o processo de reduzir o tamanho dos ficheiros de imagem sem perder qualidade visual, para que as páginas carreguem mais depressa sem parecerem piores. Uma única fotografia não comprimida pode ter vários megabytes. A mesma imagem, bem formatada e comprimida, pode ter menos de 100 kilobytes sem diferença visível no ecrã. Este artigo explica os formatos de ficheiro certos, como funciona a compressão, quando redimensionar antes de carregar, onde entra o lazy loading e o que faz maior diferença prática na velocidade de carregamento das tuas páginas.
As imagens são o maior contributo para o peso da página na maioria dos websites. Uma página com cinco fotografias não otimizadas pode pesar dez vezes mais do que precisa. Esse peso traduz-se diretamente em carregamento mais lento, numa pior pontuação de Largest Contentful Paint e em visitantes que saem antes de a página acabar de ser desenhada. Para perceberes porque é que a velocidade de carregamento afeta o teu negócio e o posicionamento nas pesquisas, vê o artigo sobre porque é que a velocidade do website importa.
Porque é que as imagens tornam os websites lentos?
Quando um visitante abre uma página, o navegador descarrega todos os recursos dessa página antes de a mostrar. As imagens são normalmente o maior desses recursos. Cada imagem exige o seu próprio pedido, e o navegador tem de esperar que esses pedidos terminem antes de conseguir desenhar o conteúdo por completo.
Como afetam as imagens as métricas de carregamento
- As imagens afetam diretamente o Largest Contentful Paint (LCP). Se o maior elemento visível de uma página for uma imagem principal, o LCP é o tempo que essa imagem demora a carregar por completo
- As imagens não otimizadas aumentam o peso total da página, o que atrasa todas as outras métricas ao longo da linha de carregamento
- Em ligações móveis, o efeito é amplificado. Uma imagem principal de 3 MB que carrega em dois segundos numa ligação de banda larga pode demorar oito ou mais segundos numa rede móvel média
- Várias imagens grandes agravam o problema. Uma galeria ou uma página de produtos com dez fotografias não comprimidas pode ser difícil de usar em ligações mais lentas
Que formatos de ficheiro deves usar nas imagens para a web?
JPEG
- O formato padrão para fotografias e imagens com gradientes e muitas cores
- Suporta compressão com perdas, o que significa que alguns dados da imagem são removidos de forma permanente para reduzir o tamanho do ficheiro
- Suportado por todos os navegadores e dispositivos, sem exceção
- Uma definição de qualidade de 75 a 85 produz ficheiros 60 a 80 por cento mais pequenos do que o original, sem perda de qualidade visível na maioria das fotografias
PNG
- O formato para imagens que precisam de fundo transparente, incluindo logótipos, ícones e gráficos com áreas de cor plana
- Usa compressão sem perdas, o que significa que nenhum dado é removido e a imagem é preservada exatamente
- Os ficheiros PNG são significativamente maiores do que os JPEG nas fotografias. Usa PNG apenas quando a transparência for necessária; usa JPEG ou WebP para fotografias
WebP
- Um formato moderno criado para substituir o JPEG e o PNG, com melhor compressão para a mesma qualidade
- As imagens WebP são tipicamente 25 a 35 por cento mais pequenas do que os ficheiros JPEG equivalentes
- Suporta compressão com e sem perdas, e suporta transparência
- Suportado por todos os principais navegadores. Se o teu criador de websites não converter automaticamente as imagens para WebP, converte-as manualmente antes de as carregares
AVIF
- Um formato mais recente que oferece melhor compressão do que o WebP, muitas vezes 50 por cento mais pequeno do que o JPEG com qualidade comparável
- O suporte nos navegadores está a crescer mas ainda não é universal. Usa AVIF onde for suportado, com uma alternativa automática para WebP ou JPEG nos navegadores que não o suportam
O que é a compressão de imagens e como funciona?
A compressão reduz o tamanho do ficheiro removendo ou simplificando dados da imagem. Há dois tipos, e a diferença determina quando usar cada um.
Compressão com perdas
- Remove de forma permanente alguns dados da imagem para obter um ficheiro mais pequeno
- Os dados removidos são escolhidos com base no que o olho humano tem menos probabilidade de notar, normalmente variações subtis de cor e pormenores finos de textura
- Usada no JPEG e no WebP com perdas
- Uma definição de qualidade de 75 a 85 produz ficheiros muito mais pequenos, com imagens que parecem idênticas ao original não comprimido na maioria dos usos práticos
- Evita voltar a guardar um JPEG já comprimido com uma definição de qualidade mais baixa. Isto acumula artefactos de compressão e degrada ainda mais a imagem a cada gravação
Compressão sem perdas
- Reduz o tamanho do ficheiro sem remover nenhum dado da imagem. Cada píxel é preservado exatamente
- Usada no PNG e no WebP sem perdas
- Poupa menos tamanho do que a compressão com perdas, mas sem qualquer perda de qualidade
- Mais adequada para diagramas de produtos, capturas de ecrã, gráficos com muito texto ou qualquer imagem em que os artefactos de compressão seriam visíveis ou inaceitáveis
Precisas de redimensionar as imagens antes de as carregar?
O tamanho do ficheiro e as dimensões em píxeis são questões separadas, e ambas afetam a velocidade de carregamento. Comprimir uma imagem com 4.000 píxeis de largura não ajuda se o navegador só precisar de a mostrar com 800 píxeis de largura. O navegador descarrega a imagem completa de 4.000 píxeis e depois reduz-lhe o tamanho na janela de visualização, desperdiçando largura de banda e tornando a página mais lenta para todos os visitantes.
Como dimensionar corretamente as imagens antes de as carregar
- Identifica a largura máxima a que a imagem vai alguma vez ser mostrada. Para imagens de largura total no computador, são tipicamente 1.440 a 1.920 píxeis
- Para imagens em colunas ou cartões, a largura mostrada é menor, muitas vezes 400 a 800 píxeis
- Redimensiona a imagem para o seu tamanho máximo de apresentação antes de a carregares
- Para ecrãs retina e de alta densidade, multiplica a largura de apresentação por 1,5 a 2. Uma imagem de cartão com 400 píxeis de largura beneficia de um ficheiro de origem com 600 a 800 píxeis de largura para aparecer nítida em ecrãs retina
O que é o lazy loading e como afeta a otimização de imagens?
O lazy loading atrasa o descarregamento das imagens que ainda não estão visíveis na janela de visualização. Em vez de carregar todas as imagens da página de uma só vez, o navegador só carrega as imagens à medida que os visitantes se aproximam delas com o scroll. Em páginas com muitas imagens, isto reduz de forma significativa o peso inicial da página e melhora o Time to Interactive do conteúdo visível sem scroll.
- O lazy loading é suportado nativamente em todos os principais navegadores com o atributo
loading="lazy"nas etiquetas de imagem - Não apliques lazy loading a imagens acima da dobra. A imagem principal e qualquer conteúdo visível sem scroll devem carregar de imediato
- Aplica lazy loading a todas as imagens abaixo da dobra, incluindo galerias de produtos, miniaturas de blogue e secções com muitas imagens mais abaixo na página
Para uma explicação completa de como funciona o lazy loading e quando o usar, vê o artigo sobre o que é o lazy loading e como funciona.
O que são imagens responsivas e porque importam?
Uma imagem responsiva é uma que serve um tamanho de ficheiro diferente consoante o tamanho do ecrã do visitante. Em vez de enviar uma imagem de 1.920 píxeis a todos os dispositivos, incluindo um visitante num ecrã de telemóvel com 375 píxeis de largura, as imagens responsivas deixam o navegador pedir apenas o que precisa.
Como reduzem as imagens responsivas o tempo de carregamento no telemóvel
- Um visitante no telemóvel recebe uma versão da imagem com 400 píxeis em vez do ficheiro completo para computador, reduzindo drasticamente o tamanho do descarregamento
- As imagens responsivas usam o atributo
srcsetpara definir vários ficheiros de origem com larguras diferentes, para que o navegador possa escolher o adequado - Os criadores de websites que tratam disto automaticamente poupam-te a geração manual de vários tamanhos de imagem
- As imagens responsivas melhoram diretamente as Core Web Vitals no telemóvel, onde a otimização de imagens tem o maior impacto no LCP
Para uma explicação das Core Web Vitals e de como o LCP é pontuado, vê o artigo sobre o que são as Core Web Vitals.
Como otimizar imagens passo a passo?
Antes de carregar
- Redimensiona a imagem para as dimensões de apresentação corretas
- Escolhe o formato certo: WebP para fotografias e gráficos em geral, PNG apenas quando a transparência for necessária
- Comprime com uma definição de qualidade de 75 a 85 nos formatos com perdas
- Verifica o tamanho do ficheiro. Uma imagem web típica deve ter menos de 200 KB. As imagens principais no computador podem chegar a 400 KB; tudo acima disso merece ser revisto antes de carregar
Depois de carregar
- Acrescenta alt text descritivo a cada imagem. É importante para a acessibilidade e contribui para a visibilidade nas pesquisas. Para um guia completo, vê o artigo sobre como usar imagens no teu website
- Aplica lazy loading a todas as imagens abaixo da dobra
- Faz um teste de velocidade da página depois de acrescentares imagens novas. Uma única imagem não otimizada pode anular todas as outras melhorias de velocidade da página
De forma contínua
- Verifica as imagens novas antes de cada carregamento. As imagens não otimizadas passam facilmente quando se trabalha depressa
- Faz um teste de velocidade depois de publicares qualquer lote significativo de imagens novas
- Revê as imagens mais antigas se o site for anterior às práticas de otimização atuais. As bibliotecas de imagens antigas são uma fonte comum e esquecida de problemas de velocidade
Para um guia sobre como testar o desempenho do teu site inteiro, vê o artigo sobre como testar a velocidade do teu website.
Como o WEMASY trata da otimização de imagens
O criador de websites do WEMASY comprime e converte automaticamente as imagens quando são carregadas. As imagens são servidas em formato WebP quando o navegador o suporta, com formatos alternativos para dispositivos mais antigos. São geradas várias dimensões no carregamento, para que os visitantes no telemóvel recebam ficheiros com o tamanho adequado sem qualquer configuração manual.
O lazy loading é aplicado por predefinição às imagens abaixo da dobra em todas as páginas criadas com o WEMASY. O alt text pode ser acrescentado no editor de imagens da plataforma. As pontuações de velocidade da página, incluindo o LCP, são visíveis no painel de estatísticas do WEMASY, com os problemas relacionados com imagens assinalados por página, juntamente com recomendações concretas.
Vê o que está incluído no criador de websites do WEMASY ou consulta as opções de planos na página de preços.
Perguntas frequentes
O que é a otimização de imagens para a web?
A otimização de imagens para a web é o processo de reduzir o tamanho do ficheiro de uma imagem mantendo uma qualidade visual aceitável para a apresentação no ecrã. Envolve escolher o formato de ficheiro certo, comprimir a imagem para um nível de qualidade adequado, redimensionar para as dimensões reais de apresentação e aplicar técnicas como lazy loading e imagens responsivas, para que os visitantes descarreguem apenas a versão do ficheiro de que o seu dispositivo e ligação precisam. Com o criador de websites do WEMASY, podes configurar isto diretamente no teu website.
Qual é o melhor formato de imagem para um website?
O WebP é o melhor formato para a maioria das imagens web. Oferece uma compressão significativamente melhor do que o JPEG com qualidade visual comparável, suporta transparência como o PNG e é suportado por todos os principais navegadores. Para imagens que exigem fundo transparente e precisão ao píxel, o PNG é a escolha certa. O AVIF oferece uma compressão ainda melhor do que o WebP, mas tem um suporte mais limitado nos navegadores e funciona melhor com um formato alternativo automático.
Quanto pode a compressão de imagens reduzir o tamanho do ficheiro?
A compressão com perdas com uma definição de qualidade de 75 a 85 reduz tipicamente o tamanho de um ficheiro JPEG em 60 a 80 por cento, sem diferença de qualidade visível na maioria das fotografias. Converter de JPEG para WebP com o mesmo nível de qualidade reduz o tamanho do ficheiro em mais 25 a 35 por cento. Uma fotografia que começa com 4 MB pode muitas vezes ser reduzida para menos de 150 KB com uma combinação de redimensionamento correto, conversão de formato e definições de compressão.
A otimização de imagens afeta o SEO?
Sim. As imagens não otimizadas são uma das causas mais comuns de uma má pontuação de Largest Contentful Paint, que é uma Core Web Vital usada como sinal de posicionamento pelos motores de busca. As páginas com imagens grandes e não comprimidas têm muitas vezes uma pontuação fraca de LCP em comparação com páginas que têm o mesmo conteúdo de forma otimizada. Além disso, o alt text descritivo nas imagens contribui para a visibilidade na pesquisa de imagens e para a acessibilidade geral da página.
Deves usar lazy loading em todas as imagens?
Não. O lazy loading deve ser aplicado apenas às imagens que aparecem abaixo da dobra, ou seja, conteúdo não visível quando a página abre pela primeira vez. As imagens acima da dobra, incluindo a imagem principal ou qualquer elemento visual de destaque perto do topo da página, devem carregar de imediato. Aplicar lazy loading a imagens acima da dobra atrasa o LCP, o que piora as pontuações das Core Web Vitals e a experiência dos visitantes.
Que tamanho devem ter as imagens de um website?
Uma imagem web típica deve ter menos de 200 KB. As imagens principais e de largura total no computador podem ir até 400 KB sem impacto significativo no tempo de carregamento, desde que estejam em formato WebP e bem comprimidas. As imagens usadas em cartões, miniaturas e contentores mais pequenos devem ter o tamanho da sua largura de apresentação real. Servir uma imagem de 1.920 píxeis num contentor de 400 píxeis desperdiça largura de banda para todos os visitantes em todos os dispositivos.