WebP, AVIF, JPG ou PNG: qual escolher
- WebP: a opção segura. Pesa entre 25 % e 35 % menos do que um JPG de qualidade semelhante, suporta transparência e todos os navegadores atuais o abrem.
- AVIF: comprime ainda mais, sobretudo em fotos, à custa de demorar mais a codificar. Todos os navegadores modernos o mostram, mas nem todos o conseguem criar: se o seu não puder, a opção aparece desativada.
- JPG: para quando precisa da máxima compatibilidade, como no e-mail ou em programas antigos. Não tem transparência: as zonas transparentes ficam a branco.
- PNG: sem perdas. Use-o para capturas de ecrã, logótipos ou imagens com texto; para fotos pesa demasiado.
Que qualidade usar
Entre 75 e 85 é o ponto ideal para fotos na web: acima disso, o ficheiro cresce muito e a diferença mal se nota. Em AVIF pode-se descer mais, até 60 ou 65, com um resultado parecido. Repare na percentagem de poupança e compara as miniaturas: se uma imagem ficar maior do que o original, é porque já estava bem comprimida.
Reduzir o tamanho poupa ainda mais do que a qualidade. Uma foto de telemóvel tem 4000 píxeis de largura; para um site, 1600 ou 2000 costumam chegar. Escreva a largura em «Largura máxima» e as maiores são reduzidas mantendo a proporção.
Sem enviar nada
A maioria dos conversores online envia as suas imagens para o servidor deles. Este não: a conversão é feita pelo seu
navegador com a API canvas, e os ficheiros não saem do seu dispositivo. Depois de a página carregar,
funciona até sem ligação. A contrapartida é que o resultado depende do codificador do seu navegador, e que se perdem os
metadados EXIF (data, câmara, localização), o que num site costuma ser uma vantagem.
Servir vários formatos
Para dar AVIF a quem o suporta e um JPG aos restantes, use <picture>. As imagens do
gerador do ximg.es podem ser pedidas em qualquer desses formatos mudando a extensão, o que dá jeito
para testar o código antes de ter as imagens reais:
<picture>
<source srcset="https://ximg.es/1200x800.avif" type="image/avif">
<source srcset="https://ximg.es/1200x800.webp" type="image/webp">
<img src="https://ximg.es/1200x800.jpg" width="1200" height="800" alt="">
</picture>