Formati immagine per il web: JPEG, PNG, WebP, AVIF e SVG a confronto

Differenze, vantaggi e limiti dei principali formati immagine, con una regola pratica per scegliere quello giusto.

Redazione CapirAIPubblicato il 25 ottobre 2026 4 min di lettura

Campionari di colori e strumenti di grafica su una scrivania

Indice dei contenuti

Scegliere il formato giusto per un'immagine sembra un dettaglio, ma incide su qualità visiva, peso delle pagine e velocità del sito. JPEG, PNG, WebP, AVIF e SVG hanno caratteristiche diverse: conoscerle aiuta a usare quello più adatto a ogni situazione.

Due famiglie: raster e vettoriale

Le immagini raster sono composte da pixel: fotografie, screenshot, illustrazioni dipinte. Se le ingrandisci troppo, perdono definizione. JPEG, PNG, WebP e AVIF sono formati raster.
Le immagini vettoriali sono descritte da forme geometriche: si possono ridimensionare senza perdita di qualità. Il formato vettoriale più usato sul web è SVG.

Compressione con e senza perdita

La compressione con perdita (lossy) elimina parte delle informazioni per ridurre il peso del file: è ideale per le fotografie. La compressione senza perdita (lossless) conserva tutti i dati originali: è preferibile per grafiche con testo, linee nette o colori uniformi.

I formati a confronto

Formato	Compressione	Trasparenza	Animazione	Ideale per
JPEG	Con perdita	No	No	Fotografie, quando serve massima compatibilità
PNG	Senza perdita	Sì	No (APNG a parte)	Screenshot, grafiche con testo, immagini con trasparenza
WebP	Con o senza perdita	Sì	Sì	Uso generale sul web, alternativa più leggera a JPEG e PNG
AVIF	Con o senza perdita	Sì	Sì	Fotografie ad alta compressione con buona qualità
SVG	Vettoriale	Sì	Sì (CSS/SMIL)	Loghi, icone, illustrazioni geometriche

JPEG

È il formato più diffuso per le fotografie e funziona praticamente ovunque. Non supporta la trasparenza e, con compressioni elevate, mostra artefatti visibili attorno ai contorni.

PNG

Mantiene ogni pixel intatto e supporta la trasparenza. È ottimo per screenshot e grafiche con testo, ma per le fotografie produce file molto pesanti.

WebP

Sviluppato da Google, offre compressione con e senza perdita, trasparenza e animazione. A parità di qualità percepita genera in genere file più leggeri di JPEG e PNG ed è supportato da tutti i browser moderni.

AVIF

Basato sul codec video AV1, raggiunge spesso compressioni ancora migliori di WebP, soprattutto sulle fotografie. È supportato dai browser principali più recenti; la codifica può però richiedere più tempo e risorse.

SVG

È un formato testuale basato su XML: resta nitido a qualsiasi dimensione e spesso pesa pochissimo. È perfetto per loghi e icone, non per le fotografie. Se accetti file SVG caricati da altri, trattali con cautela, perché possono contenere codice.

Come scegliere: una regola pratica

Logo o icona? Usa SVG.
Fotografia? Usa WebP o AVIF, con JPEG come alternativa di riserva se ti serve compatibilità con software datati.
Screenshot o grafica con testo? Usa PNG oppure WebP senza perdita.
Serve la trasparenza? Usa PNG, WebP, AVIF o SVG, mai JPEG.

Buone pratiche per il web

Ridimensiona prima di pubblicare: un'immagine larga 4000 pixel mostrata in uno spazio di 800 spreca banda.
Offri più dimensioni con l'attributo srcset, così ogni dispositivo scarica la versione adatta.
Usa l'elemento <picture> se vuoi proporre AVIF o WebP con un formato di riserva.
Indica width e height per evitare spostamenti del layout durante il caricamento.
Scrivi un testo alternativo (alt) che descriva l'immagine: è essenziale per l'accessibilità e aiuta i motori di ricerca a capirne il contenuto.

In sintesi

Non esiste un formato migliore in assoluto: SVG per la grafica vettoriale, WebP o AVIF per le fotografie, PNG quando servono precisione e trasparenza. Immagini leggere migliorano anche la velocità percepita del sito, come spieghiamo nella guida ai Core Web Vitals.

Fonti

#Immagini #Grafica #Prestazioni

Continua a leggere