Dagli albori del web le immagini appartengono alla serie di componenti essenziali che non potevano assolutamente mancare in un sito web. Non importa che sia una foto o una grafica: gli elementi visivi presenti su un sito attirano inevitabilmente l’attenzione dei visitatori. In molti casi le immagini offrono agli utenti un chiaro plusvalore e mettono il progetto web in buona luce evidenziando il messaggio di un testo rendendo più chiari i contenuti, fornendo informazioni aggiuntive (come fanno ad esempio le infografiche oppure ancora stimolando alla riflessione.
Mentre rispetto al significato degli elementi visivi in sé c’è unità di pensiero, per quanto riguarda invece i corretti formati di immagine da utilizzare da anni regna sovrana la discordia. Una pluralità di opzioni non fa che rendere più ardua la scelta di trovare il formato adatto a una determinata occasione. Inoltre con i dispositivi mobili la questione si fa ancora più delicata. Vediamo dunque insieme quali formati esistono e quale utilizzo dovreste farne.
Esistono innumerevoli formati immagine per grafiche bidimensionali e foto, anche se va detto che l’utilizzo cambia in maniera sostanziale per ciascuno di essi. Intanto va fatta una prima differenziazione tra i formati usati tradizionalmente, ovvero le grafiche pixel o raster, e quelli invece utilizzati più di rado, le grafiche vettoriali. Nei primi l’immagine è composta da una quantità di singoli punti: i pixel. Più sono piccoli questi pixel, più la quantità di essi aumenterà e più elevata sarà la risoluzione, ossia la qualità dell’immagine, e di conseguenza sarà maggiore anche la dimensione del file. Apportando delle modifiche a un simile file si provoca inevitabilmente una perdita di qualità; il che è dovuto al fatto che l’immagine è costituita da piccolissimi quadrati colorati, i quali risultano evidenti ingrandendola.
Questa condizione è la maggiore differenza rispetto alle grafiche vettoriali che possono essere ingrandite o rimpicciolite a piacere senza che ne risenta la qualità del file. Il motivo per cui ciò è possibile è che le immagini vettoriali non sono composte da singoli pixel, bensì le varie forme vengono rappresentate grazie ai vettori. Sottoponendo l’immagine a scalatura, queste forme, che hanno precise indicazioni rispetto alle misure, si adattano automaticamente alle nuove dimensioni. Tuttavia più complessi sono i contenuti, meno adatto sarà il formato vettoriale: una foto può essere riprodotta per mezzo di vettori, ma tutti gli innumerevoli effetti della luce, le sfumature e le ombre sono meglio rappresentate in una grafica pixel. Potete trovare un approfondimento più completo riguardo ai punti in comune e alle differenze dei due tipi di grafica nel nostro articolo comparativo.
Nonostante gli svantaggi in termini di scalatura, le grafiche raster hanno un utilizzo molto più comune rispetto a quelle vettoriali soprattutto perché possono venire eseguite molto più velocemente e sono adatte per quasi tutti i tipi di applicazione. Ecco che si possono salvare elementi grafici del sito web sia in formato pixel sia in formato PNG o JPG proprio come i file più complessi. Tuttavia il punto di forza della rappresentazione grafica in pixel sta proprio nella presentazione di fotografie che nella progettazione web moderna giocano un ruolo molto importante. Di fatto una qualsiasi foto può essere facilmente scannerizzata e digitalizzata come grafica pixel, per poi essere eventualmente elaborata. Oltre ai formati di file grafici già nominati c’è una quantità di fomati liberi o proprietari, che tuttavia fanno fatica a trovare un impiego diffuso.
Il JPG, conosciuto anche come JPEG, è un formato tra i più noti e si tratta in realtà di una norma (ISO/IEC 10918-1) pubblicata nel 1992 che descrive vari procedimenti per la compressione di immagini. Siccome la norma stessa non contiene precisi criteri secondo cui vada salvata l’immagine, a questo scopo è indispensabile un formato aggiuntivo nonostante il formato JPEG File Interchange Format (JFIF) si sia affermato come standard per tutti i browser. Meno utilizzate sono le alternative Still Picture Interchange File Format (SPIFF) e il formato di file grafico JPEG Network Graphics (JNG).
Il formato JPG è comprimibile e modifica la struttura usuale delle grafiche pixel in modo tale che ogni 8 x 8 pixel vengano raggruppati in un blocco e calcolati insieme passo passo. Durante questo processo avvengono ad esempio una conversione cromatica dal modello RGB a quello YCbCr e il cosiddetto filtro passa basso, in cui le alte frequenze vengono bloccate per ridurre la dimensione del file. A seconda del grado di compressione scelto, questo processo è collegato a una certa perdita di dati poiché non tutte le informazioni dell’immagine possono essere mantenute. Secondo le statistiche di W3Techs tre quarti di tutti i siti web utilizzano immagini in formato JPG. Il motivo risiederebbe nella convenienza che ne deriva in termini di dimensioni dei file, questione legata alla compressione.
Utilizzo consigliato: salvataggio e pubblicazione di foto
Ugualmente diffuso in rete è il formato PNG (Portable Network Graphics), un formato di file grafico riconosciuto universalmente dal World Wide Web Consortium (W3C) e apparso per la prima volta nel 1996 sugli schermi dei computer. Come alternativa libera e al contempo anche più moderna alla GIF (Graphic Interchange Format), il PNG è caratterizzato dalla possibilità di essere sottoposto a una compressione dati senza perdita e una profondità di colore massimale fino a 24 bit per pixel (16,7 milioni di colori) che con un canale alfa arriva persino a 32 bit. Al contrario della GIF, con il PNG non è tuttavia possibile creare animazioni.
Grazie a un canale alfa integrato il formato PNG supporta la trasparenza, la semi-trasparenza (che può applicare su qualsiasi tipologia di immagine) e infine anche la scansione interlacciata o l’interlacciamento, che permette una trasmissione più veloce del file immagine durante il processo di caricamento. I meccanismi di correzione di luce e colore garantiscono che le immagini in PNG abbiano un aspetto simile anche se presenti su diversi sistemi. Per comprimere una grafica PNG si possono utilizzare tool come ad esempio pngcrush, tramutato in servizio web.
Anche una volta compresse, le immagini non perdono di qualità e rimangono perciò piuttosto pesanti se paragonate ad altri formati, per questo motivo se ad esempio l’oggetto in questione sono delle fotografie, il formato JPG risulta allora più idoneo. C’è però la possibilità di ridurre il campo cromatico (da 1 fino 32 bit per pixel).
Utilizzo consigliato: salvataggio e pubblicazione di foto e grafiche di dimensioni ridotte (loghi, icone, grafici a barre, e così via), grafiche con trasparenze, foto senza perdita di informazioni
Il portale online CompuServe ha introdotto il Graphics Interchange Format, abbreviato in GIF, nel 1987 come alternativa cromatica al formato in bianco e nero allora in uso, X BitMap (XBM). Al contrario di altre soluzioni contemporanee come PCX o MacPaint, i file GIF necessitano di molto meno spazio grazie all’efficace compressione LZW (compressione di dati con l’algoritmo Lempel Ziv Welch), motivo per cui il formato ha riscosso un grande successo fin dagli inizi del web. Tuttavia come formati per foto e grafiche, il JPG e il PNG sono decisamente più avanzati: dalla versione GIF89a del 1989 il formato può però riunire più immagini in un file e per questo trova ancora oggi un utilizzo per la creazione di brevi animazioni.
Tutte le combinazioni cromatiche in GIF sono presenti all’interno di una tabella, lo spettro cromatico. La tabella contiene fino a 256 colori (8 bit): perciò il formato immagine non è particolarmente adatto alla rappresentazione di fotografie. Le singole informazioni possono essere definite come trasparenti, tuttavia, diversamente dal moderno PNG, non sono supportate le semi-trasparenze per cui un pixel o è visibile oppure no.
Utilizzo consigliato: generazione di animazioni; clip-art o loghi in cui una profondità di colore ristretta non costituisce un ostacolo
Un formato immagine che trova un utilizzo in special modo per la trasmissione di file per la stampa e immagini ad alta risoluzione è il TIFF (Tagged Image File Format). Sviluppato già nel 1986 da Microsoft in cooperazione con Aldus (che oggi appartiene ad Adobe), il TIFF è ottimizzato per l’integrazione della separazione cromatica e dei profili colore (profili ICC) di immagini scannerizzate. Oltre a ciò il TIFF supporta il modello cromatico CMYK e permette una profondità di colore per ogni canale di fino a 16 bit (la profondità di colore totale comporta quindi 48 bit). Infine dal 1992 si può comprimere il formato senza perdita con l’aiuto della compressione LZW, la quale viene applicata anche nel formato GIF.
Per via di queste caratteristiche il TIFF si è imposto quasi a standard per le immagini in cui la qualità dell’immagine gioca un ruolo più importante rispetto alla dimensione del file. Per questo motivo il formato immagine viene utilizzato fra le altre cose da case editoriali e stampa; anche l’archiviazione di grafiche monocromatiche (come ad esempio i disegni tecnici) conta tra i molteplici campi d’applicazione. Per il salvataggio e la presentazione di informazioni geografiche raster (cartine, mappe, riprese aeree, ecc.) si è inoltre affermato il formato GeoTIFF, munito di ulteriori tag.
Utilizzo consigliato: trasmissione di immagini ad alta risoluzione per la stampa
Per il salvataggio di progetti grafici che sono stati creati con il popolare software Photoshop, Adobe offre fra gli altri formati disponibili il proprio formato proprietario PSD (Photoshop Document). Esso si caratterizza perché mantiene tutte le informazioni riguardo a livelli, canali e vettori, rendendo così possibile a posteriori una riapertura e manipolazione del file. Ad esempio si possono quindi aggiungere, duplicare, nascondere, spostare o rimuovere dei livelli e modificare singoli elementi. In un solo file PSD si possono salvare senza perdita i livelli e tutti i singoli dati dell’immagine. Nello specifico questo formato immagine di Adobe si dimostra molto pratico per quanto riguarda le grafiche con un elevato valore di riconoscimento come i loghi, banner e così via, che se necessario devono essere adattati in fretta a diverse piattaforme e dimensioni del display.
Solitamente le immagini in formato PSD si possono aprire solamente con Adobe Photoshop anche se lo scambio tra applicazioni per i diversi sistemi operativi Windows e macOS funziona in maniera ineccepibile. Perciò in un certo senso si può dire che il formato grafico è compatibile con diversi sistemi. Il PSD funge per prima cosa come formato di archiviazione durante il processo di elaborazione. Per l’esportazione sul web il relativo file dovrebbe tuttavia essere convertito in formato PNG o in alternativa in JPG prima di venire caricato sul server, poiché nonostante il salvataggio senza perdita delle informazioni dell’immagine e tutti i livelli in essa contenuti permettano l’efficiente riapertura e modifica successiva del file, ciò comporta anche una ingente quantità di dati. Per convertire una grafica PSD basta ricorrere a un semplice tool disponibile online come Zamzar.
Utilizzo consigliato: salvataggio intermedio e riapertura del file per la modifica successiva di grafiche e template di design utilizzati di frequente
Il formato BMP (Windows Bitmap) è stato sviluppato per i sistemi operativi Microsoft e IBM e pubblicato per la prima volta nel 1990 con Windows 3.0 come formato di salvataggio per grafiche pixel con una profondità di colore di fino a 24 bit per pixel. Il formato immagine non compresso assegna ad ogni pixel un valore cromatico ben preciso, ragion per cui i file BMP di norma sono molto grandi. Per questo motivo il formato non si adatta all’utilizzo sul web.
Utilizzo consigliato: salvataggio di foto e grafiche per l’utilizzo offline
Le grafiche vettoriali si adattano così bene all’utilizzo sul web perché spesso necessitano di molto meno spazio di archiviazione rispetto alle grafiche pixel. I rispettivi formati non descrivono quali parti di colore ha un pixel nella relativa immagine, bensì gli oggetti di cui è composta l’immagine – superfici tonde e angolate, testo, linee dritte e storte e così via – e la sua posizione, la sua misura, i suoi colori e altre caratteristiche.
In combinazione con il già accennato aspetto della scalatura senza perdita, la realizzazione di elementi web responsive e liberi da barriere diventa un gioco da ragazzi. In più è possibile applicare modifiche in ogni momento e con facilità a file in formato vettoriale, anche se il grado di difficoltà aumenta in maniera sproporzionata rispetto alla crescente complessità del file immagine. Un ulteriore vantaggio delle grafiche vettoriali è la possibilità di creare animazioni con JavaScript.
In collaborazione con i produttori di software Aldus e Altsys, nel 1987 Adobe ha sviluppato e pubblicato il formato vettoriale EPS (Encapsulated PostScript). Il nome del formato deriva dal fatto che i relativi file vengono salvati nel linguaggio di descrizione di pagina PostScript, il quale permette l’emissione di pagine complesse per mezzo di stampanti laser e processi CTP e CTF. A questo scopo PostScript descrive gli elementi della pagina stampata come linee, cerchi, immagini, ecc. e dà informazioni riguardo a dove sono posizionati. L’EPS contribuisce a queste informazioni sull’immagine dando indicazioni precise sulla dimensione dell’emissione, la cosiddetta bounding box (scatola di delimitazione).
Eventualmente i file EPS contengono un’immagine di anteprima in bassa risoluzione che può servire come segnaposto. Il formato di immagine di Adobe descrive i singoli oggetti indipendentemente dal dispositivo di emissione che si userà, permettendo così lo scambio tra differenti mezzi.
L’EPS ha trovato un utilizzo soprattutto nell’ambito della stampa, tuttavia anche lì ha ormai passato il testimone al suo noto successore, il formato PDF (Portable Document Format), il quale si adatta anche all’invio di e-mail per via delle sue dimensioni di file decisamente più ridotte. Come formato immagine per progetti web non è adatto né lo storico EPS tantomeno il moderno PDF, che viene utilizzato più per lo scambio o la presentazione di documenti di testo.
Utilizzo consigliato: descrizione di pagine di stampa complesse (formato non più attuale)
Mentre molti altri formati vettoriali come il formato AI (Adobe Illustrator Artwork) risultano ugualmente poco adatti all’utilizzo sul web, il formato SVG (Scalable Vector Graphics), consigliato dal W3C, conferma in maniera convincente i vantaggi dei file vettoriali accennati al principio dell’articolo. Da quando è stata integrata appieno su tutti i browser esistenti dall’HTML5, la specifica per la descrizione di grafiche vettoriali bidimensionali che si basa sul linguaggioXML è un’alternativa da prendere seriamente in considerazione rispetto alle più tradizionali grafiche raster – nello specifico con uno sguardo ai siti web Mobile e responsive. In tutto ciò i file SVG, oltre a una scalabilità senza perdita, offrono spesso anche un volume di dati molto ridotto e altri vantaggi come i seguenti:
Nello specifico per quanto riguarda le grafiche che contengono simboli (com’è ad esempio il caso dei loghi) oppure che devono reagire agli inserimenti dei visitatori di siti web (diagrammi dinamici), il formato SVG rappresenta una scelta eccellente. Inoltre il moderno formato immagine vettoriale sembra essere proprio fatto ad hoc per le grafiche di stampo tecniche. Uno sguardo alla statistica di W3Techs di cui sopra mostra tuttavia che l’SVG in confronto alle grafiche raster non trova ancora utilizzo nella maggior parte dei progetti web. Trovate informazioni complete e guide per l’inserimento del formato nel nostro articolo dedicato all’SVG.
Utilizzo consigliato: grafiche interattive o di stampo tecnico (loghi, pulsanti, icone e altri ancora.)
| JPG | PNG | GIF | SVG | ||
| Modelli di colore | RGB, scale di grigio, CMYK | RGB, scale di grigio, colori indicizzati | Colori indicizzati | RGB, nomi di colore SVG | |
| Quantità di colori | Fino a 16,7 milioni | Più di 16 milioni | Fino a 256 | Fino a 16,7 milioni | |
| Canali cromatici | Tre | Tre (+ un canale alfa) | Uno | Tre (+ un canale alfa) | |
| Profondità dei bit | 8 bit a canale | 1–16 bit a canale | 1–8 Bit | 8 bit a canale | |
| Compressione | Elevata, con perdita | Elevata, senza perdita | Ridotta | Nessuna | |
| Dimensione dei file | Molto piccola | Piccola | Grande | Dipende | |
| Animazioni | No | No | Sì | Sì | |
| Adatto a | Foto | Piccole immagini e grafiche (come loghi), foto senza perdita | Animazioni | Grafiche di ogni tipo (loghi, icone, diagrammi, ecc.) |
Chi vuole costruire un sito web, dovrebbe essere consapevole dello scopo da raggiungere e delle funzioni che la pagina offrirà. Solo così potrete conferire un aspetto unitario alla vostra pagina. Infatti, nel web design si comincia sempre con la progettazione, che è alla base della realizzazione di ogni sito. A cosa bisogna fare attenzione e a cosa bisognerà dare un maggiore valore? Se investite...
Lo spazio di archiviazione aumenta ogni anno sempre di più grazie ai Gigabyte e Terabyte messi a disposizione. Sarebbe pertanto consigliabile ridurre le dimensioni dei dati, soprattutto se gestite una pagina web in autonomia. File compressi significano tempi di caricamento più veloci, utenti più felici e un migliore posizionamento su Google. In modo particolare sarebbe utile comprimere le immagini...
Con i suoi iOS 11 e macOS High Sierra, Apple ha sostituito JPEG come formato standard per le immagini. Il successore HEIF permette agli utenti di archiviare le foto in alta qualità e con un risparmio importante di spazio. Ma poiché altre piattaforme come Windows e Linux non supportano ancora il formato, le possibilità di utilizzo dello standard MPEG sono ancora piuttosto limitate.
Per rendere più vivaci post e messaggi sui social è diventato alquanto popolare ricorrere al formato GIF. Un mondo online senza queste animazioni particolarmente espressive è ormai impensabile. Eppure esiste anche un’alternativa che per certi versi è meglio delle GIF: l’APNG. Ma cosa si nasconde dietro ai PNG animati? E come si crea un’animazione in questo formato?
La maggior parte dei siti web contiene una varietà di foto, grafiche e animazioni, che spesso influiscono negativamente sulle prestazioni della pagina. Vi sono però alcune misure che consentono di arginare il problema, come la compressione dei file di immagine. Con WebP, Google ha sviluppato un formato più leggero in termini di dimensione, anche se finora occupa solo un ruolo secondario nel World...
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Dominio gratis Certificato SSL Wildcard incluso Assistenza Clienti 24/7