L'evoluzione dei formati immagine
JPEG e PNG hanno dominato il web per decenni, ma sono inefficienti rispetto a codec moderni. WebP (Google, 2010) e AVIF (Alliance for Open Media, 2019) offrono compressione superiore, qualità migliore a parita di byte, supporto trasparenza e animazioni. Ridurre dimensioni immagini e tra gli interventi più impattanti su LCP.
WebP: caratteristiche
Compressione lossy e lossless, alpha channel, animazioni. Tipicamente 25-35% più piccolo di JPEG a parita di qualità. Supporto browser universale (Chrome, Firefox, Safari, Edge da 2020+). Encoder maturi: cwebp, libwebp, supporto nativo in Sharp, ImageMagick, GIMP, Photoshop (plugin).
AVIF: caratteristiche
Basato su codec video AV1. Compressione molto superiore a WebP: 50% più piccolo di JPEG, 20-30% più piccolo di WebP. Supporta HDR, 10/12 bit per canale, film grain synthesis. Supporto browser: Chrome 85+, Firefox 93+, Safari 16.4+. Encoding più lento di WebP (CPU intensive).
Picture element per fallback
picture source srcset="image.avif" type="image/avif" /source srcset="image.webp" type="image/webp" /img src="image.jpg" alt="..." //picture. Il browser sceglie il primo formato supportato. Garantisce compatibilità massima con fallback automatico per browser legacy.
Strumenti di conversione
Sharp (Node.js) per pipeline automatici. Squoosh.app per single image. ImageMagick: magick input.jpg output.avif. cavif CLI: cavif input.png -o output.avif. WordPress: plugin ShortPixel, Imagify, Smush con supporto WebP/AVIF automatico. CDN come Cloudflare Polish convertono on-the-fly.
Quale scegliere
AVIF e oggi il formato migliore per peso/qualità ma encoding lento. WebP e ottimo compromesso: encoding veloce, supporto universale, ottima compressione. Strategia ottimale: serve AVIF con fallback WebP con fallback JPEG/PNG via picture element. Per loghi e icone considera SVG quando possibile.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.