WebP, AVIF, JPG o PNG: quin triar
- WebP: l’opció segura. Pesa entre un 25 % i un 35 % menys que un JPG de qualitat semblant, admet transparència i l’obren tots els navegadors actuals.
- AVIF: comprimeix encara més, sobretot en fotos, a canvi de trigar més a codificar-se. Tots els navegadors moderns el mostren, però no tots el saben crear: si el teu no pot, l’opció apareix desactivada.
- JPG: per quan necessites la màxima compatibilitat, com al correu o en programes antics. No té transparència: les zones transparents surten en blanc.
- PNG: sense pèrdua. Fes-lo servir per a captures de pantalla, logotips o imatges amb text; per a fotos pesa massa.
Quina qualitat posar
Entre 75 i 85 és el punt dolç per a fotos al web: per sobre, el fitxer creix molt i la diferència gairebé no es nota. En AVIF es pot baixar més, fins a 60 o 65, amb un resultat semblant. Fixa’t en el percentatge d’estalvi i compara les miniatures: si una imatge surt més gran que l’original, és que ja estava ben comprimida.
Reduir la mida estalvia encara més que la qualitat. Una foto de mòbil fa 4000 píxels d’amplada; per a un web, 1600 o 2000 solen sobrar. Escriu l’amplada a «Amplada màxima» i les que siguin més grans es redueixen mantenint la proporció.
Sense pujar res
La majoria dels convertidors en línia pugen les teves imatges al seu servidor. Aquest no: la conversió la fa el teu
navegador amb l’API canvas, i els fitxers no surten del teu equip. Un cop carregada la pàgina, funciona
igual sense connexió. La contrapartida és que el resultat depèn del codificador del teu navegador, i que es perden les
metadades EXIF (data, càmera, ubicació), cosa que en un web sol ser un avantatge.
Servir diversos formats
Per donar AVIF a qui l’admeti i un JPG als altres, fes servir <picture>. Les imatges del
generador de ximg.es es poden demanar en qualsevol d’aquests formats canviant l’extensió, útil
per provar el marcatge abans de tenir les imatges reals:
<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>