WebP, AVIF, JPG o PNG: quale scegliere
- WebP: la scelta sicura. Pesa dal 25% al 35% in meno di un JPG di qualità simile, supporta la trasparenza e lo aprono tutti i browser attuali.
- AVIF: comprime ancora di più, soprattutto le foto, al prezzo di una codifica più lenta. Tutti i browser moderni lo mostrano, ma non tutti sanno crearlo: se il tuo non può, l’opzione è disattivata.
- JPG: quando serve la massima compatibilità, come nelle email o nei programmi datati. Non ha trasparenza: le zone trasparenti diventano bianche.
- PNG: senza perdita. Usalo per screenshot, loghi o immagini con testo; per le foto pesa troppo.
Che qualità usare
Tra 75 e 85 è il punto ideale per le foto sul web: oltre, il file cresce molto e la differenza si nota appena. Con AVIF puoi scendere di più, fino a 60 o 65, con un risultato simile. Guarda la percentuale di risparmio e confronta le miniature: se un’immagine esce più pesante dell’originale, vuol dire che era già ben compressa.
Ridurre le dimensioni fa risparmiare ancora più della qualità. Una foto da smartphone è larga 4000 pixel; per un sito, 1600 o 2000 di solito bastano. Scrivi la larghezza in «Larghezza massima» e le immagini più grandi vengono ridotte mantenendo le proporzioni.
Senza caricare nulla
La maggior parte dei convertitori online carica le tue immagini sul proprio server. Questo no: la conversione la fa il
tuo browser con l’API canvas, e i file non lasciano il tuo dispositivo. Una volta caricata la pagina,
funziona anche offline. Il rovescio della medaglia è che il risultato dipende dal codificatore del browser, e che si
perdono i metadati EXIF (data, fotocamera, posizione), cosa che su un sito di solito è un vantaggio.
Servire più formati
Per dare AVIF a chi lo supporta e un JPG a tutti gli altri, usa <picture>. Le immagini del
generatore di ximg.es si possono chiedere in uno qualsiasi di questi formati cambiando l’estensione,
utile per provare il markup prima di avere le immagini vere:
<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>