Guida ai formati di file immagine

I designer lo sanno bene: un’immagine digitale può avere tantissimi formati, ciascuno con le proprie specifiche caratteristiche.

Un progetto grafico ben impostato da un professionista definisce da subito quali saranno le estensioni da utilizzare in base alle necessità e alla destinazione d’uso. Purtroppo però troppo spesso la superficialità impera, soprattutto online (e purtroppo anche in certe aziende) e per questo il web pullula di errori macroscopici come immagini sgranate, i colori stravolti o file enormi.

Ho pensato di creare questa guida per prendere in esame i formati di file immagine più diffusi e descrivere i pro e i contro, i principali utilizzi e le caratteristiche fondamentali di ciascuno per effettuare una scelta più consapevole nei progetti grafici. Sarà un memorandum per i colleghi designer e un aiuto per i potenziali clienti che vogliono capire la strana lingua dei grafici.

Iniziamo subito.

Prima distinzione: raster e vettoriali

Così come le immagini, anche i file corrispondenti si distinguono in due macro categorie: formati raster e formati vettoriali. Non mi dilungherò sulla differenza tra i due tipi di immagine perché l’ho già approfondita in questo articolo. Semplicemente ora è opportuno sottolineare che a ogni estensione del file corrisponde un tipo di immagine specifico, con una eccezione che vedremo dopo. Per fare un esempio, il JPEG è un formato di file immagine raster e non potrà mai contenere un’immagine vettoriale.

Per i formati vettoriali la situazione è leggermente diversa. Di norma i file dovrebbero contenere un disegno vettoriali, composto da tracciati e riempimenti, da vettori appunto. Tuttavia il cugggino grafico e maldestro potrebbe sfruttare la libertà concessa dai software e creare un mostro temuto e odiato da generazioni di designer professionisti: il file raster dentro un file vettoriale.

L'incubo dell'immagine raster dentro un file vettoriale

In software come Adobe Illustrator è possibile creare un nuovo documento e incollarci dentro un’immagine raster. Questo avviene perché giustamente il software dà la possibilità all’utente di gestire un progetto nel suo complesso qualunque esso sia e perciò prevede la necessità di incollare un’immagine raster per ricalcarla, vettorializzarla, elaborarla o chissà che altro. Attenzione: questo NON rende l’immagine automaticamente vettoriale: rimane un’immagine raster incollata dentro un file vettoriale. È necessaria una ulteriore elaborazione per renderla tale.

Inserire un raster in un file vettoriale e pensare che questo renda l’immagine un vettoriale è un grossissimo errore non solo tecnico ma anche dal punto di vista dell’organizzazione del lavoro: il designer, confidando nell’estensione del file corretta, si troverà tra le mani del materiale inutilizzabile o che comunque necessita di ulteriore lavoro imprevisto, con aumento dei costi e dei tempi di consegna per il cliente.

Seconda distinzione: destinazione d'uso

Possiamo distinguere i formati di file immagine anche seguendo un altro criterio: la loro destinazione d’uso. Infatti ogni formato, a seconda della propria specificità, è adatto per essere utilizzato in un dato progetto. Ciò non toglie significa che ci siano limitazioni tecniche all'uso dei vari file, ma piuttosto alcuni formati sono più corretti per certi scopi.

Facciamo un esempio pratico. Il PNG come vedremo è un formato prettamente digitale, infatti supporta solo il metodo di colore RGB. Questo lo rende completamente inadatto alla stampa.
Oppure prendiamo il formato TIFF. Si tratta di un file lossless, non compresso, che garantisce un’alta qualità dell’immagine ma anche un peso significativo. Questo lo rende decisamente poco adatto all’utilizzo sul web.

Terza distinzione: lossy e lossless

Per non farci mancare niente c’è una ulteriore distinzione dei file immagine, stavolta più tecnica, che riguarda solo le immagini raster. Esistono due tipologie: lossless e lossy.

I formati lossless, letteralmente “senza perdita”, sono appunto quei file che non prevedono la perdita di alcun dato dell’immagine: nel processo di salvataggio nessuna informazione sarà compressa o eliminata. In questo modo la qualità dell’immagine risulta molto elevata e saranno preservati tutti i dati grafici, cromatici etc. Il rovescio della medaglia consiste nell’elevato peso del singolo file.

I formati lossy, al contrario, comportano una perdita di informazioni al fine di trovare il miglior rapporto qualità/peso dell’immagine, infatti sono i più utilizzati in ambito web, soprattutto alla luce del fatto che un sito o una landing page più veloce e leggero porta con sé numerosi vantaggi.

Formati di file immagine: raster

In uno degli scorsi articoli abbiamo chiarito come funziona un’immagine raster: l’immagine è formata da un reticolo di piccoli pixel di colori diversi che affiancati descrivono la figura. Quanto più è denso il reticolo, tanto maggiore sarà la definizione dell’immagine a parità di grandezza. A differenza dei vettori, un’immagine raster perde qualità se ingrandita.

I formati di file immagine raster più diffusi sono: JPEG o JPG, PNG, GIF, TIFF, PSD, WebP (ci sarebbe anche il PDF ma ne parliamo a fine articolo).

JPG o JPEG

Si tratta di uno dei formati più diffusi e conosciuti. L’acronimo sta per Join Photographic Experts Group, dal nome dell’organizzazione internazionale che ha standardizzato il formato a inizio anni ’90. Il JPG supporta il colore a 24 bit e è un tipo di file lossy: come accennavamo nei paragrafi precedenti utilizza una compressione con perdita di dati per ridurre il peso del file e trovare il giusto rapporto peso/qualità. È inoltre universalmente compatibile con tutti i browser e i sistemi, sia desktop che mobile. Nota a margine: supporta entrambi i metodi di colore.

Gli usi principali sono due:

• sul web, grazie al peso molto leggero e alla conseguente velocità di caricamento fulminea, soprattutto con le connessioni attuali;
• nei portfolio digitali dei fotografi, in quanto permette loro di mostrare il proprio lavoro con una qualità accettabile pur inferiore al file originale.

Sono chiari quindi i vantaggi di un JPG: facilità di condivisione e trasferimento, compatibilità e rapporto peso/qualità. D’altro canto non è un formato consigliato per la stampa, o perlomeno per la stampa di qualità, e bisogna stare attenti a eventuali artefatti o effetti di posterizzazione che possono comparire nell’immagine.

Che differenza c'è tra JPG e JPEG?

Nessuna. Nei vecchi sistemi operativi tutte le estensioni erano di 3 lettere, quindi si utilizzava l’acronimo JPG. Ad oggi non c’è alcuna differenza tra l’uno e l’altro, a meno che non abbiate a che fare con Windows 3.1.

PNG

I file PNG,Portable Network Graphic, sono file lossless (compressi senza perdita di dati) ed è una tipologia prettamente digitale, infatti supporta SOLO il metodo di colore RGB. Una caratteristica che ha aiutato la diffusione del formato è il supporto alla trasparenza: parte dell’immagine può non avere informazioni di colore e può “ritagliare” al netto una figura senza uno sfondo. Come il JPG, la compatibilità con browser e sistemi è massima.

Il PNG è utilizzato per qualsiasi tipo di immagine digitale se si vuole mantenere una elevata qualità dell’immagine e un dettaglio molto alto. Attenzione però al peso: il vantaggio del lossless porta con sé un file pesante a seconda della grandezza dell’immagine. Questo significa che il file, se non ottimizzato, sui siti web potrebbe rallentare il caricamento e peggiorare l’esperienza utente.

Inoltre non è un tipo di file adatto per la stampa, soprattutto dal punto di vista cromatico: supportando solo l’RGB la conversione automatica della stampante potrebbe creare problemi importanti.

GIF

GIF o Graphics Interchange Format, come il PNG, è un formato lossless di file immagine dedicato al digitale che supporta solo il metodo di colore RGB, con una grande differenza: supporta solo 256 colori (8bit per pixel) quindi pur non avendo perdita di dati la qualità dell’immagine risulta molto ridotta. Pur con i suoi limiti, è un formato molto adatto per le immagini semplici grazie alla leggerezza del file.

La caratteristica principale del file GIF è il supporto alle animazioni. Si possono creare brevi animazioni in loop tramite dei fotogrammi in successione incapsulati in un unico file. L’effetto è quello di un mini video con frame molto bassi. Questo compromesso ha permesso ai file GIF di diffondersi sul web e sui social media, in particolare per i meme o per piccole animazioni di loghi o immagini.

TIF o TIFF

Il TIFF, o Tag Image File Format, è il tipo di file lossless più utilizzato per le immagini ad alta risoluzione. Garantiscono una qualità dell’immagine e un livello di dettaglio elevatissimi, così come elevatissimo è il peso del file. Una caratteristica molto utile dei file TIFF è il supporto ai livelli: infatti, aprendoli in un programma di fotoritocco come Photoshop, è possibile mantenere i layer che compongono l’immagine separati, a differenza di JPG e PNG che accettano un solo e unico livello. Il file TIFF ha una elevata compatibilità con tutti i sistemi.

Il TIFF è usato principalmente in ambito fotografico, grazie alla loro capacità di mantenere un dettaglio molto elevato, e nella stampa ad altissima risoluzione (anche se attualmente esistono alternative con un migliore rapporto peso/qualità). Un altro uso, citato in questa pagina del sito di Adobe è quello delle scansioni, in cui effettivamente la digitalizzazione di documenti ad alta risoluzione facilita la loro archiviazione digitale.

Il peso è il più grande problema di questi file: alcuni raggiungono facilmente il GB e per questo sono difficili da condividere, trasferire e archiviare. Ovviamente è escluso l’utilizzo sui siti web per evitare caricamenti infiniti.

PSD

PSD è il formato dei file proprietario e nativo di Photoshop, IL software di fotoritocco della suite Adobe. È un file lossless e come il TIFF conserva la suddivisione in layer e ne condivide la qualità di immagine. Supporta file fino a 2GB di peso e 30.000 pixel di altezza/larghezza. Come tutti i file nativi di un software è il più facile da modificare in quanto riesce a memorizzare tutte le impostazioni assegnate dall’utente in fase di creazione/elaborazione. Essendo un formato proprietario è perfettamente integrato con tutti gli altri software della suite come Illustrator o Premiere Pro.

I difetti sono legati ai pregi: essendo un file proprietario necessita di Photoshop per essere aperto e quindi di un abbonamento Adobe. Inoltre il formato lossless, così come per gli altri formati analoghi, appesantisce molto il file pur conservando i dettagli.

WEBP

WebP è il formato creato da Google con l’esplicito obiettivo di velocizzare i tempi di caricamento sul web. Infatti riesce a ottimizzare una qualsiasi immagine digitale e ridurre il peso del 30% rispetto agli altri formati

Il WebP ha una particolarità: è sia lossless che lossy, ovvero l’utente ha la possibilità di scegliere quali dei due metodi utilizzare per salvare la propria immagine, foto o grafica che sia, e decidere dove far pendere l’ago della bilancia tra peso e qualità.
È un formato estremamente versatile: non solo supporta la trasparenza ma anche piccole animazioni come le GIF. Inoltre, come si può vedere da questa tabella del sito Caniuse è largamente supportato da tutti i browser, solo chi ancora usa il deprecato Internet Explorer avrebbe difficoltà a gestirlo.

I contro dell’uso del WebP derivano dalla sua progettazione:

• essendo pensato per il web, non è adatto per la stampa;
• i vantaggi che offre sono utili online. Offline c’è poca differenza con gli altri formati.

Formati di file immagine vettoriali

Riprendendo sempre uno dei precedenti articoli che ho pubblicato l’immagine vettoriale differisce da quella raster perché è composta da tracciati e da riempimenti, da vettori appunto. Questo rende l’immagine infinitamente scalabile e senza una risoluzione ma solo una dimensione del documento. I file immagine vettoriali possono avere sia il metodo di colore RGB che CMYK.

I principali formati sono AI, SVG, EPS (anche in questo caso ci sarebbe il PDF, ma lo approfondiremo a fine articolo)

AI

AI è il formato nativo e proprietario di Illustrator, il software di grafica vettoriale della suite di Adobe. È un formato utilizzato da chiunque voglia eseguire un lavoro di grafica vettoriale, dal designer professionista all’illustratore. Illustrator è il software migliore sul mercato ed è il riferimento per eseguire lavori di un certo livello; questo significa che in ambito tecnico è largamente diffuso e per questo facilmente condivisibile tra professionisti, anche perché è ovviamente il formato che meglio conserva tutte le impostazioni del progetto.
Come dicevo in uno dei paragrafi precedenti, un file AI può contenere del materiale raster ma ciò non significa che quel materiale diventa automaticamente vettoriale.

SVG

SVG o Scalable Vector Graphics è un tipo di file vettoriale molto diffuso sul web per la visualizzazione di un qualsiasi elaborato grafico. Rispetto agli altri formati raster utilizzati online, porta con sé tutti i vantaggi della grafica vettoriale: scalabilità, definizione sempre perfetta, precisione a prescindere dallo zoom e leggerezza estrema. Queste caratteristiche lo rendono ideale soprattutto per loghi o tabelle.

L’SVG è un file scritto in codice XML: in altre parole le informazioni sono memorizzate come caratteri alfabetici, in codice, perciò modificabili anche tramite un semplice editor di testo. Ma non è tutto: i motori di ricerca come Google possono “leggere” questi file per parole chiave, migliorando il posizionamento del sito web su cui sono caricati.

Ci sono però alcuni svantaggi nell’utilizzare file formato SVG. Per esempio non sono adatti a contenere fotografie. Secondariamente, entrando in gioco il codice, piattaforme come WordPress non digeriscono i file di questo formato perché potrebbero contenere codice malevolo o creare problemi di sicurezza informatica.

EPS

Il file di formato EPS, o Encapsulated PostScript, ha caratteristiche comuni ai file precedentemente descritti: contiene grafica vettoriale, con tutti i vantaggi che ne conseguono, ma ha la caratteristica di essere compatibile con la maggior parte dei software di grafica vettoriale (AI è apribile solo con Illustrator) e soprattutto con gran parte delle stampanti anche un po’ datate. Spesso infatti si usa come output finale per elaborati di grandi dimensioni come cartelloni pubblicitari, locandine o altro. Attualmente subisce la spietata concorrenza del PDF, ma può ancora dire la sua.

Altri formati

Ho voluto intenzionalmente fare un elenco solamente dei formati più diffusi e utilizzati ma ce ne sarebbero molti altri da descrivere e approfondire.

Per la grafica raster possiamo citare il formato RAW, ovvero i file che produce una fotocamera e che conservano tutti i dati generati dallo strumento; oppure ancora il Bitmap, inventato da Microsoft, un formato lossless ormai utilizzato molto raramente. Il nome fa riferimento alla metodologia di rappresentazione grafica delle immagini raster che tecnicamente sono delle “mappe di bit”.

Per la grafica vettoriale invece abbiamo il CDR, formato proprietario del software Corel Draw dedicato alla grafica vettoriale nella suite Corel, concorrente di Adobe, e .afdesign, di Affinity Designer. O ancora il DWG, che pur essendo potenzialmente un file vettoriale, è dedicato esclusivamente al disegno tecnico.

In tutto questo sto escludendo i formati di file 3D, che magari vedremo in modo più approfondito in futuro.

Il formato di riferimento

Non abbiamo ancora finito. Manca ancora un formato, forse il più importante, il più versatile e il più usato: PDF, il formato più utilizzato dalle aziende di tutto il mondo.

PDF

Il PDF, o Portable Document Format, è un formato inventato da Adobe nel 1992 e nato dalle ceneri del “The Camelot Project”, una innovativa idea che voleva rivoluzionare il digitale permettendo agli utenti di acquisire documenti da qualsiasi applicazione, inviare versioni elettroniche dei documenti ovunque e stamparli da qualsiasi computer. In altre parole l’obiettivo era poter scambiare documenti mantenendoli invariati nella loro forma (font, immagini e layout) indipendentemente dall’hardware o dal software. Il concetto chiave era la versatilità, caratteristica poi ereditata dai PDF.

In sintesi il PDF è un documento che può assumere numerose forme. Può essere un’immagine vettoriale, una immagine raster, un documento con moduli da completare o con video e audio, elementi interattivi, un documento firmato elettronicamente con l’app dedicata.

Tutti i PDF sono conformi alle norme ISO (International Standard Organization) 32000 per lo scambio di documenti elettronici e può essere salvato con uno dei tanti standard messi a disposizione da Adobe: PDF/A per l’archiviazione, PDF/E per la progettazione, PDF/X per la stampa e altri.

Non solo: è un formato sia lossless che lossy, a seconda delle impostazioni di salvataggio. Può dunque contenere una immagine ad altissima qualità o rielaborare il documento diminuendo drasticamente il peso del file.

Se proprio dobbiamo trovare un difetto su Windows è apribile solo con il software Adobe Reader, mentre macOS ha una funzionalità integrata nel sistema operativo.

Immagini in PDF

Limitandoci a parlare di immagini, abbiamo detto che il PDF può contenere sia raster che vettoriali.

Sul raster in realtà non c’è molto da dire. Le caratteristiche si potrebbero sintetizzare con: il meglio di tutti gli altri formati. Infatti è possibile salvare in PDF un’immagine ad alta risoluzione con livello di dettaglio altissimo, pur mantenendo un peso accettabile; supporta sia la trasparenza che i livelli, per poter modificare il progetto su software come Photoshop anche dopo il salvataggio; può essere crittografato e standardizzato ISO per la stampa; è riconosciuto da praticamente tutte le stampanti e riduce al minimo i problemi di compatibilità; permette di controllare i metodi di colore e i profili.
Potrei continuare, ma penso questo elenco sia sufficiente per spiegare i vantaggi che si hanno nell’usare il PDF.

Per il vettoriale si aggiunge anche un’altra fondamentale caratteristica: il PDF si integra perfettamente con Illustrator. Questo significa che, se si mantiene la funzione di modifica, il PDF ha tutte le caratteristiche di un file AI: mantiene inalterate le impostazioni comprese informazioni sul colore, sui layer, sui tracciati etc. Rispetto al file AI il PDF ha anche un altro vantaggio: può essere aperto e consultabile con Adobe Reader, software molto più leggero e soprattutto free rispetto a Illustrator. In questo modo lo scambio del file tra computer diversi può avvenire anche senza la suite Adobe necessariamente installata su entrambi i terminali.

Conclusioni

Spero che questa guida sui formati di immagine più usati sia stata utile sia per i colleghi come piccolo promemoria e veloce rassegna delle caratteristiche principali delle varie estensioni, sia ai potenziali clienti, per capire cosa vi sta consegnando o mostrando il vostro grafico di riferimento. Se non ne avete uno, contattatemi e sarò lieto di aiutarvi a risolvere qualsiasi problema di design abbiate.

Alla prossima!