Para a maioria dos sites, WebP chega e é o mais fácil. O AVIF costuma dar ficheiros ainda mais pequenos nas fotografias, mas demora mais a gerar e nem toda a ferramenta o aceita. A regra prática: use WebP como formato principal; se quer ir mais longe, acrescente AVIF com um plano B para quem não o consegue mostrar.
Os passos para trocar de JPEG para WebP já estão em optimização de imagens e WebP. Aqui fica a comparação e o que fazer quando o AVIF entra na conversa.
Os formatos lado a lado
| Formato |
Bom para |
A ter em conta |
| JPEG |
Fotografias, compatibilidade total. |
Ficheiros maiores. Sem transparência. |
| WebP |
Fotografias e gráficos, com ou sem transparência. |
Mostrado pelos navegadores actuais. Alguns programas de e-mail não o mostram. |
| AVIF |
Fotografias, onde costuma dar o ficheiro mais pequeno. Aceita transparência. |
Demora mais a gerar. Nem todas as ferramentas e todos os programas o abrem. Navegadores muito antigos não o mostram. |
| SVG |
Logótipos e ícones. |
Desenho vectorial: nítido em qualquer tamanho e quase sem peso. |
Dar um plano B ao AVIF
O elemento <picture> deixa o navegador escolher o primeiro formato que sabe mostrar. Se não souber nenhum, cai na imagem normal:
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" width="800" height="600" alt="Descreva a imagem">
</picture>
Os números de largura e altura são só um exemplo. Declare sempre os da imagem, para a página não saltar (veja o CLS). Em WordPress não precisa de escrever isto à mão: um plugin de optimização que converta e sirva as duas versões trata do <picture> ou da troca de endereços por si.
Gerar e confirmar
| 1 |
Converta a partir do original, nunca de uma cópia já comprimida. O Squoosh (no navegador) deixa comparar o resultado antes de descarregar e escolher AVIF ou WebP. Na linha de comandos, num computador seu, existem o cwebp (WebP) e o avifenc (AVIF).
|
|
| 2 |
Envie os dois ficheiros para o site, ou deixe o plugin gerá-los.
|
|
| 3 |
Confirme o que o servidor entrega. No navegador, F12, separador Network, filtro “Img”: o tipo de conteúdo da imagem deve dizer image/avif ou image/webp. Se disser image/jpeg, a página continua a usar o antigo.
|
|
| 4 |
Compare o peso total da página antes e depois. Se não baixou, o formato não era o problema: veja o LCP.
|
|
|
Converter não é o mesmo que servir. Se o tema escreve o endereço do .jpg directamente na página, o novo ficheiro nunca é usado. E o AVIF gerado em massa no mesmo pedido em que se carrega a página pode ocupar bastante processador no servidor: converta uma vez, de antemão.
|
|
Não troque por troca. Antes de pensar em AVIF, veja se as imagens têm o tamanho certo. Uma imagem enorme em AVIF continua a ser enorme. As dimensões primeiro, a compressão depois, o formato por fim.
|
|
Converteu as imagens e a página não ficou mais leve? Envie-nos o endereço e dizemos-lhe o que o servidor está a entregar.
Abrir um pedido de suporte
|
PRODUTO RECOMENDADO Alojamento de sites com cPanel Domínio e SSL incluídos, cópias diárias e o painel que já conhece. desde 5.940,00 Kz/mês (plano de 3 anos, com cupão) Ver planos |
Angola
Brasil
Kenya
Moçambique
Nigeria
Portugal
South Africa
United Kingdom
United States
International
