Optimizar imagens e usar WebP

As imagens são, muitas vezes, a parte mais pesada de uma página. WebP é um formato de imagem criado pela Google que costuma guardar o mesmo aspecto em menos bytes do que o JPEG ou o PNG, e que os navegadores actuais mostram sem problema. Mas trocar de formato é só um dos três passos. A ordem que dá resultado é: tamanho certo, compressão, formato.

Que formato para quê

Formato Serve para A saber
JPEG Fotografias. Universal. Não tem transparência.
PNG Gráficos com transparência, capturas de ecrã. Sem perdas, por isso é pesado em fotografias.
WebP Fotografias e gráficos, com ou sem transparência. O WordPress aceita-o no envio. Alguns programas de e-mail não o mostram.
SVG Logótipos e ícones. Desenho vectorial: fica nítido em qualquer tamanho e quase não pesa.

O que fazer, por ordem

1 Reduza as dimensões antes de enviar. Uma fotografia de telemóvel tem muito mais pixéis do que qualquer ecrã vai mostrar. Redimensione-a para o maior tamanho a que o site a vai apresentar. Costuma ser a poupança maior e a mais barata.
2 Comprima. Ferramentas no navegador, como o Squoosh (da Google Chrome Labs), deixam ver o resultado antes de descarregar e permitem escolher WebP. Em linha de comandos, num computador seu, existe o cwebp: cwebp foto.jpg -o foto.webp.
3 Converta as que já estão no site. Um plugin de optimização de imagens faz isto em lote. O LiteSpeed Cache tem um separador «Image Optimization», mas funciona através de um serviço externo (QUIC.cloud), com as regras desse serviço. Outros plugins de outros autores fazem o mesmo; leia as condições de qualquer um antes de lhe entregar as imagens.
4 Confirme que o WebP está mesmo a ser servido. No navegador, F12, separador Rede, filtre por «Img», clique numa imagem e veja o tipo de conteúdo: deve dizer image/webp.
5 Mantenha os originais. Guarde as imagens de partida num sítio seu. Se um dia mudar de plugin ou de formato, voltar à origem é melhor do que recomprimir uma imagem já comprimida.
Converter não é o mesmo que servir. Se o tema ou o construtor de páginas escreve o endereço .jpg directamente na página, o ficheiro novo .webp não é usado, a não ser que o plugin reescreva o endereço. Por isso o passo da confirmação não é opcional. E numa mensagem de e-mail marketing, mantenha JPEG ou PNG: nem todos os programas de e-mail mostram WebP.
O envio falha com «HTTP error»? Pode ser uma imagem demasiado grande para a memória do PHP, ou uma biblioteca de imagem em falta. Veja o erro HTTP ao enviar imagens e ligar o Imagick no PHP.
O WordPress já adia as imagens fora do ecrã com o atributo loading="lazy". Mas a imagem grande do topo da página não deve ser adiada: é muitas vezes ela que decide o tempo de carregamento que o visitante sente. Veja as métricas Core Web Vitals em palavras simples. Para lojas, há ainda imagens de produto para uma loja rápida.

Converteu as imagens e o site não melhorou, ou ficou com imagens partidas? Diga-nos a página e vemos o que o servidor entrega.

Abrir um pedido de suporte

VEJA TAMBÉM

Imagens de produto para uma loja rápida

As métricas Core Web Vitals em palavras simples

Medir a velocidade do site

PRODUTO RECOMENDADO

Alojamento de sites com cPanel

Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde R$ 36,30/mês (plano de 3 anos, com cupom)

Ver planos
  • 0 Usuários acharam útil
Esta resposta lhe foi útil?

Artigos Relacionados

Como monitorizar o desempenho do site no cPanel O cPanel guarda registro de tudo o que acontece na sua hospedagem - quem visitou, quanto tráfego consumiu, que erros oco...
O site está lento: o que faz mesmo diferença «O site está lento» quer dizer coisas diferentes conforme quem o diz: a primeira página demora a aparecer, o painel arra...
Cloudflare: quando ajuda, como ligar, e a cache que o engana A Cloudflare fica à frente do seu site: os visitantes chegam primeiro a ela, e ela é que nos vem buscar o que precisa. I...
O site está lento: o que medir antes de mudar de plano «O site está lento, acho que preciso de um plano maior.» É das frases que mais nos chegam, e na maior parte das vezes o...
O que é uma CDN, e quando faz diferença (e quando não faz) Uma CDN (rede de distribuição de conteúdos) é um conjunto de máquinas espalhadas pelo mundo que guardam cópias do seu si...
Core Web Vitals em palavras simples Core Web Vitals são três medições que a Google usa para dizer como uma página se sente a quem a visita: se aparece depre...