Formati immagine per il web: quali usare e quando

Un sito lento è uno dei principali motivi, se non IL principale, per il quale un utente abbandona la navigazione e chiude la finestra del browser.

Nella nostra quotidianità Internet è diventato una costante. Lo usiamo durante il corso di tutta la giornata per i motivi più disparati: lavoro, mail, social, mappa, acquisti e chi più ne ha più ne metta. È uno strumento quasi fondamentale della nostra vita, ora più che mai con l'avvento dell'intelligenza artificiale. Ovviamente, come qualsiasi altro strumento, deve funzionare bene e soddisfare le nostre esigenze nel minor tempo possibile.

Pensiamo a un orologio digitale: deve semplicemente mostrare l'ora, lo deve fare in fretta e in modo chiaro. Per questo lo usiamo (ok, nel 2026 non si usano più ma seguitemi nel ragionamento). Ma se per caso in quello stesso orologio i numeri non appaiono chiari, non si vedono per un qualsivoglia motivo, oppure ho difficoltà a leggere l'ora a causa della scarsa illuminazione, l'oggetto troverà presto posto in una scatola impolverata o addirittura nella spazzatura.

Un sito web funziona esattamente allo stesso modo: il contenuto deve essere interessante, coinvolgere, essere accattivante alla vista e avere una navigazione intuitiva e immediata. Ma l'utente si spazientisce in fretta, non ha tempo da perdere, quindi se il sito è pieno di popup e pubblicità invasive, se il caricamento di quel sito è troppo lungo, oppure ancora le immagini sono molto sfocate tende ad abbandonare la navigazione in quel sito, e cercare nel mare del World Wide Web un altro portale che gli dia le stesse informazioni in modo più rapido e senza fronzoli.

Le basi: la performance

Chi progetta siti web lo sa benissimo: la performance è un fattore fondamentale da tenere conto. Il sito deve caricarsi velocemente e l'utente deve immediatamente fruire del suo contenuto. Questo è un argomento vastissimo da trattare, perché ci sono numerosi elementi che contribuiscono all'ottimizzazione e anche KPI da tenere in considerazione, come ad esempio il TTFB (Time To First Byte) o i Core Web Vitals. Ma rischierei di lanciarmi in discorsi iper tecnici e che interesserebbero solo ai developer che sognano in Javascript.

In questo articolo voglio soffermarmi sulle immagini per il web, un tema spesso sottovalutato, fa parte dell'insieme di fattori che influiscono sulla velocità del sito.
Cercando di semplificare il discorso tutte le pagine web non sono altro che file che il nostro browser scarica, interpreta e ci mostra. Sono file interattivi scritti in codice HTML, CSS e Javascript che contengono grafiche e immagini a corredo. Da questo si può intuire che un sito sarà tanto più veloce quanto più "leggero" in termini di byte da scaricare; ma mentre il codice è molto leggero, nell'ordine di pochissimi KB, le immagini, anche le più piccole, hanno un impatto significativo enorme e possono fare la differenza tra un sito lento e uno veloce.

Questione di millisecondi e di Kilobyte

Ci tengo a precisare che quando si parla di velocità del sito web l'unità di misura di riferimento sono i millisecondi, non i secondi. Una pagina che carica in 5 secondi è molto lenta. La dimensione di riferimento è quella dell'immediatezza, del click istantaneo, soprattutto nel mobile. Esistono vari tool per fare queste misurazioni e procedure complicate per ottimizzarle, considerati tutti i fattori in gioco. L'importante è chiarire che il lasso di tempo accettabile è davvero ristretto e perciò è fondamentale che una parte del lavoro sul sito sia dedicata agli aspetti tecnici e performativi, non solo di usabilità.

Lo stesso discorso vale per la dimensione dei file. Il range ideale sarebbe di poche centinaia di Kilobyte, variabili in base alla quantità di immagini necessarie e alla loro risoluzione a schermo. Questo accorgimento si riflette non solo nella velocità di un sito ma anche nella sua fruibilità: una pagina web leggera può essere caricata in tempi accettabili anche da connessioni lente (pensiamo alle reti mobili in certi luoghi), ingrediente fondamentale nella ricetta di un sito soprattutto se si parla di immagini informative importanti.

Compromesso tra peso e qualità

Le immagine devono essere leggere. Non c'è un numero preciso a cui mirare, perché ovviamente dipende anche dalla grandezza effettiva dell'immagine all'interno del layout della pagina: uno sfondo full hd avrà un peso (e un'incidenza totale) molto superiore rispetto a un'icona o a una piccola thumbnail. Tuttavia l'immagine non deve neanche essere sfocata o sgranata quando è mostrata sullo schermo, quindi nell'ottimizzazione non bisogna esagerare, altrimenti si rischia una risoluzione pessima e la foto piena di fastidiosi pixel. Per trovare il giusto compromesso la cosa più importante è scegliere il giusto formato di immagine: infatti ogni formato è stato studiato e pensato per uno scopo preciso e la dimensione dei file risente se il contenuto non è coerente con il formato.

Per fare un esempio, se utilizzassi un'immagine TIFF, lossless come ricordiamo da questo articolo, pensato per la stampa, avrei una pagina web di alcune decine se non centinaia di MB. Una follia totale. Ci metterebbe un tempo percettivamente infinito a caricare. Ci sono formati che invece pesano 1/1000 e garantiscono comunque un'ottima qualità dell'immagine.

I formati giusti per il web

Andiamo dritti al sodo. I formati giusti per il web sono quelli più leggeri, quindi escludiamo a priori formati come TIFF o BMP. Non cosideriamo neanche estensioni come PSD o AI perché specifiche di determinati software, di conseguenza non utilizzabili come standard. Analizziamo i rimanenti uno per uno, capendo quali sono i punti di forza e debolezza di ciascuno e come utilizzarli al meglio.
Attenzione: focalizzerò la trattazione solo sui tratti necessari legati al tema dell'uso sul web. Per ogni approfondimento più generico sul formato rimando a questo articolo.

JPG o JPEG

La maggior parte delle immagini che trovate online sono JPG. Queto perché è un formato molto leggero, che ottimizza perfettamente la dimensione del file, a scapito ovviamente della qualità. Si tratta di un lossless dopotutto, anche se con Photoshop è possibile decidere quanti dati perdere in fase di salvataggio: maggiore sarà la perdità, minore sarà la nitidezza dell'immagine. Proporzionalmente, la perdita di qualità corrisponde a una diminuzione del peso del file.

Il segreto è bilanciare. Occorre trovare il giusto compromesso tra qualità e peso facendo anche delle prove, utilizzando software dedicati proprio alla compressione o anche l'intelligenza artificiale, con un prompt adeguato. Non esiste una formula magica sempre applicabile perché ogni caso presenta delle caratteristiche peculiari e quindi andrà di volta in volta trovata la soluzione migliore.

Per cosa si utilizza?

Il JPG è ottimo per le foto. Trattandosi di raster il JPG garantisce un ottimo rapporto dimensione/qualità e permette di ottenere una buona resa nel design di una pagina web. Ci sono comunque altre opzioni che faticano ad affermarsi ma attualmente sono ancora più convenienti.

WEBP

A mio modesto parere il WebP è il formato migliore per le immagini sul web, potenzialmente di qualsiasi tipo. Come dicevo nell'articolo citato all'inizio è un formato moderno, ancora poco diffuso nonostante la sua incredibile capacità di compressione. Studiato da Google appositamente per il web, utilizzando questo formato si riesce a mantenere un peso del file davvero contenuto a fronte invece di una perdita di qualità davvero insignificante. Ovviamente va trattato con il dovuto riguardo perché è un formato sia lossy che lossless; in fase di creazione dell'immagine andrà impostato l'ago della bilancia tra i due per cercare una via di mezzo. Oppure far pendere l'ago verso una parte, nel caso si volesse.

Ma non è finita: il WebP supporta la trasparenza. Quando non è necessario possiamo eliminare tutta la parte dell'immagine che non ci interessa (pensiamo ai soggetti che vogliamo ritagliare senza lo sfondo) e grazie alla possibilità di scegliere tra lossy e lossless possiamo anche ottimizzare la dimensione del file in qualsiasi situazione. Il PNG ad esempio non ha questa versatilità perché rimane un lossless, quindi ogni informazione grafica in più aumenta i KB del file.

Per cosa si utilizza?

Il WebP è un formato estremamente versatile e si configura come adatto a essere usato per qualsiasi tipo di contenuto, dalle foto alle illustrazioni ai vettoriali rasterizzati (ricordiamoci che è comunque un formato raster). Se proprio vogliamo mettere i puntini sulle i, per i disegni vettoriali sarebbe meglio optare per altri formati dedicati, che mantendono appunto la vettorialità e la sua intrinseca scalabilità infinita. Anche in questo caso, così come per i JPG e come per altre estensioni, possono essere utilizzati software per la compressione, ma se salvati con le giuste impostazioni già su Photoshop o simili si ottiene già un peso del file più che accettabile.

PNG

Il PNG è un formato molto adatto al web ma attenzione perché è lossless, quindi senza perdita di dati. In altre parole una foto, che di base ha un quantità di informazioni elevata, peserà tantissimo in PNG e, per quanto sia nitida, non sarebbe la scelta migliore in una pagina web. Invece per le illustrazioni, in particolar modo quelle flat o i vettori rasterizzati, è perfetto: la qualità rimane elevatissima ma il peso sarà ridotto, perché la quantità di informazioni sarà minore. Il PNG ha anche una proprietà molto importante, che lo contraddistingue: supporta la trasparenza, a differenza del JPG. Questo significa che si possono ulteriormente eliminare altri dati non necessari. Ma come dicevo nel paragrafo di WebP, il PNG rimane lossless, con tutto ciò che ne consegue. Anche eliminando eventuali sfondi e le informazioni grafiche connesse, il PNG rimane pesantuccio per immagini fotografiche.

Per cosa si utilizza?

Sostanzialmente l'ho già chiarito nel paragrafo precedente. Il miglior utilizzo del PNG riguarda le illustrazioni, le grafiche flat, vettori rasterizzati e qualsiasi immagine con sfondo trasparente. Lo sconsiglio per le foto a risoluzione piena proprio per la pesantezza intrinseca, anche se non escludo la possibilità di salvare qualche soggetto da una fotografia levando il background. Come da buona prassi, un esperto deve sapere analizzare una situazione specifica e fare la scelta più conveniente nel progetto in esame.

AVIF

Il formato AVIF, acronimo di AV1 Image Format, è un file molto moderno, introdotto nel 2019 e che, piano piano, si sta diffondendo sempre di più per via delle sue proprietà particolarmente vantaggiose. Le caratteristiche sono paragonabili al WebP: compressione sia lossy che lossless, supporto della trasparenza, rapporto qualità/dimensione del file eccellente. I test effettuati, che confrontano le immagini AVIF con le concorrenti WebP e Jpg, mostrano come la tecnologia di compressione dell'AVIF sia di un altro livello, arrivando a ottimizzare il peso del file e ridurlo fino al 50%, pur mantenendo una qualità elevatissima.

Pur essendo stato introdotto da pochi anni è compatibile con praticamente tutti i browser, con una percentuale di utilizzo globale del 94% circa, più che sufficiente se non si usa ancora Internet Explorer.

Per cosa si utilizza?

Gli utilizzi sono gli stessi del WebP: potenzialmente può essere usato per qualsiasi contenuto, ma esprime il meglio di sé con le foto. Ovviamente è un formato raster, quindi per le illustrazioni e le grafiche non può reggere il confronto con l'SVG che mantiene la vettorialità. L'AVIF è anche supportato da WordPress, fattore che sta contribuendo alla sua diffusione.

GIF

GIF, acronimo di Graphics Interchange Format, è un tipo di formato dedicato esclusivamente alle animazioni. Attualmente viene usato molto poco nel web perché il livello raggiunto dal CSS, da Javascript e dalle librerie come GSAP è tale da renderlo obsoleto. Non solo per quanto riguarda l'efficienza, la versatilità e la libertà di programmazione senza rimanere vincolati a un file specifico, ma anche per i colori, limitati a 256 nel GIF.

Per cosa si utilizza?

Personalmente ritengo il formato GIF superato. Con Javascript o addirittura avendo un po' di dimestichezza con il CSS (vedi la proprietà animation e derivate su W3Schools) si possono ottenere risultati di gran lunga migliori e più efficienti.

SVG

L'SVG (Scalable Vector Graphic) nel web è il formato di riferimento per i file vettoriali, l'unico leggibile da un browser. Infatti i tracciati che compongono l'immagine del file SVG si traducono in un codice HTML-friendly che può anche essere copiato e incollato direttamente nel codice del sito, senza fare l'upload di alcun file. I vantaggi sono molteplici: innanzitutto l'immagine, essendo formata da tracciati e riempimenti, sono molto più leggeri rispetto a un file raster; inoltre, come si può intuire, trattandosi di un vettoriale è infinitamente scalabile, quindi si risolve ogni problema gestionale del responsive; infine gli elementi di un SVG, avendo una sintassi compatibile con l'HTML, possono essere manipolati con il CSS in ogni loro parte, dal colore, alla dimensione fino ad arrivare alle animazioni.

Per cosa si utilizza?

Si utilizza per qualsiasi illustrazione vettoriale. A parità di immagine l'SVG sarà molto più leggero di un formato raster e, come dicevamo nel paragrafo precedente, è manipolabile con il CSS, evitando di elaborare complicate e pesanti animazioni con software esterni come After Effects. Nei siti web di oggi, ad esmepio, un uso molto comune è dedicato alle icone.

Conclusioni

Ci sarebbe tanto altro da dire sui formati di immagine, sulle loro proprietà, peculiarità e usi. Ma per questo articolo ci fermiamo qua: l'obiettivo era associare i formati di file immagine alla destinazione d'uso più congeniale.

L'invito rimane in ogni caso sempre lo stesso: per non perdere la testa sulle questioni tecniche e creative, rivolgetevi a un professionista designer che saprà risolvere i vostri problemi con celerità, puntualità e competenza. Non solo: siamo anche dei chiacchieroni quando si parla di grafica e web, quindi non vediamo l'ora di annoiarvi con i nostri monologhi sulla qualità della carta o su come impostare il progetto di un sito web. Se avete un progetto grafico o web che volete sviluppare, contattatemi per un caffè e una chiacchierata..

A presto!