EH - Esposizione interattiva di xHTML etc.   Indici:   Pagine   Panoramica   Termini   Problemi   Esempi

Grafica per le pagine Web

Generalità      GIF      JPEG      PNG      SVG

Generalità

I browsers possono presentare, sia entro porzioni di pagine xHTML che entro finestre autonome, immagini fornite da diversi supporti digitali: files di diversi formati grafici o inserti riguardanti elementi scritti in un apposito linguaggio grafico ospite.

La scelta della modalita` di presentazione delle immagini puo` costituire un problema delicato. In effetti le apparecchiature per il trattamento digitale delle immagini consentono di perseguire alti livelli qualitativi; le immagini di elevato livello possono pero` richiedere elevate risorse a tutti gli stadi elaborativi, generazione, registrazione, rielaborazione, trasmissione e presentazione (rendering). Inoltre il trattamento di elevate quantita` di immagini, eventualmente in diversi contesti, puo` porre delicati problemi di compatibilita` e di gestione. In particolare oggi sono ancora frequenti le situazioni nelle quali lo scaricamento dalla rete di immagini complesse richiede tempi molto lunghi, tali da scoraggiare la loro presa in visione. Oggi invece la ampia capacita` dei supporti di memoria sta rendendo sempre meno grave il problema della registrazione di grandi files: tutti i PC recenti dispongono di dischi con decine di GB, miliardi di bytes. Anche i dispositivi per la trasmissione dei dati aumentano rapidamente la loro portata: la crescita ancora vistosa del numero degli utenti del Web e delle loro esigenze (alla fine del 2001 sono circa 12 milioni gli italiani che utilizzano Internet e rimangono ampi margini di crescita) e la tendenza a scaricare files di ricca multimedialita` (files musicali e files con animazioni) fanno si` che ancora per 3, 5 anni si continueranno a porre problemi di larghezza di banda.

I disegnatori di pagine Web sono quindi costretti a cercare compromessi fra soluzioni con elevato impatto visivo e documenti con costo di distribuzione ridotto o almeno contenuto. Occorre quindi avere una buona conoscenza delle differenze tra i formati grafici utilizzabili per il Web, per capire come e quando è piu` opportuno usarli.

GIF e JPEG attualmente sono ancora i due formati grafici più adottati, grazie alla crescita di importanza del Web: essi sono letti dalla quasi totalita` dei browsers in uso senza richiedere particolari potenziamenti. Entrambi sono formati del genere bitmap, mappa di bits, cioe` esprimono le immagini facendo riferimento, diretto o indiretto, a matrici di pixels (pixel e` la contrazione di picture elements); per queste implementazioni delle immagini si parla anche di raster images. Le bitmaps rappresentano immagini con dimensioni e risoluzione stabilite; esse possono essere anche manipolate per variare la scala delle rappresentazioni, ma con la quasi certezza di una perdita della loro qualità iniziale. Un altro formato bitmap piu` recente, studiato appositamente per il Web e dotato di vari pregi, ma ancora poco diffuso, e` PNG.

Un genere di procedimento per il trattamento delle immagini Web di adozione più recente è dato dalla grafica vettoriale, tecnica da tempo familiare ai disegnatori che lavorano con la stampa. Diversamente dalle immagini bitmap, i documenti di grafica vettoriale si basano su comandi e modalità di tracciamento che si servono di nozioni matematiche e in particolare geometriche. I grafici vettoriali offrono molti vantaggi per il Web, in particolare per la loro "scalabilità", cioe` per la possibilita` di essere sottoposti a dilatazioni e contrazioni (ed anche a rotazioni) senza perdere in qualita`, e per le loro esigenze di occupazione della memoria, in genere sensibilmente inferiori a quelle dei grafici bitmap.

Negli ultimi anni '90 sono state proposte varie modalità per la grafica vettoriale per il Web e, dopo che un periodo nel quale si sono discussi soprattutto i linguaggi PGML e VML, si sta ormai gradatamente imponendo un linguaggio ed uno standard operativo molto completo ed ambizioso, SVG, Scalable Vector Graphics.

Concretamente, quale sia il miglior formato per le immagini che oggi si vogliono veicolare attraverso il Web va deciso soprattutto sulla base delle caratteristiche cromatiche, tonali e grafiche delle immagini originali, della loro destinazione prevalente e delle prestazioni degli strumenti con i quali verranno gestite e presentate. Passiamo quindi in rassegna le caratteristiche dei vari formati attualmente interessanti.

Formato GIF

GIF, acronimo di Graphics Interchange Format, è un formato di 8-bit, che supporta 256 colori. Questo significa che si serve di matrici di pixels che in ogni punto consentono di esprimere mediante 8 bits un colore scelto in una gamma di 28=256 colori. I files contenenti una immagine GIF hanno per default l'estensione .gif .

Per la gamma di colori disponibili si parla di palette, di tavolozza. Uno dei vantaggi di questo formato, in particolare rispetto a JPEG, è il fatto che le immagini possono servirsi di colori che fanno parte di una tavolozza non determinata dal browser, ma determinata dal documento e quindi che puo` essere scelta con una certa libertà: per questo si parla di indicizzazione dei colori. Questo è importante perchè i disegnatori per il Web possono servirsi dell'indicizzazione per una migliore organizzazione di immagini che fanno riferimento a tavolozze indipendenti dal browser. Disegnare mediante una cosiddetta browser-safe palette garantisce presentazioni non legate al browser ed indipendenti dal dispositivo fisico di visualizzazione.

Le immagini GIF, come quelle della maggior parte dei formati grafici attualmente in uso, vengono registrate dopo essere state compresse e possono essere presentate sullo schermo o su un altro dispositivo di rendering solo dopo essere state decompresse. Con questo modo di fare si ottiene un risparmio per la memoria di registrazione delle immagini ed un risparmio nel tempo di trasmissione. Dato che si possono raggiungere fattori di compressione intorno a 10, questi trattamenti sono molto importanti nell'attuale periodo di perdurante insufficienza della larghezza di banda. Osserviamo che le attuali velocita` e disponibilita` di memoria dei processori rendono ormai trascurabile l'aggravio (overhead) del tempo richiesto dalle operazioni di compressione e decompressione.

Per queste operazioni si adottano schemi che costituiscono una delle maggiori caratteristiche dei formati grafici. Il formato GIF usa uno schema di compressione lossless, schema che evita ogni perdita di informazione: tutti i bits costituenti le bitmaps sono conservati. Questo costituisce un vantaggio, ma non consente di realizzare i maggiori risparmi di memoria di registrazione e di tempi di trasmissione.

Per le prestazioni visive di alto livello, cioe` per la cosiddetta grafica professionale, il numero dei colori supportati da GIF viene considerato esiguo. Questo formato dunque risulta vantaggioso per le immagini che richiedono pochi colori, ed in particolare per quelle in bianco e nero e per quelle con larghe aree di colori monotoni. Per le immagini con molte tonalità di colore conviene usare il formato JPEG.

Un altro vantaggio di GIF è la sua capacità di supportare la trasparenza, cosa che rende piu` efficiente costruire la silhouette di immagini non rettangolari in presenza di configurazioni di sfondo. Questo è importante per trattare in pagine Web bottoni ed icone. JPEG, al contrario, non supporta la trasparenza.

Ricordiamo infine che le immagini GIF vengono spesso utilizzate per inserire nei testi i simboli matematici non presenti nelle fonts in dotazione ai browsers, come ad esempio i segni di sommatoria e di integrale.

Formato JPEG

Il formato JPEG è così denominato perchè è nato dal lavoro della commissione chiamata Joint Photographic Experts Group, tra la fine degli anni '80 e l'inizio degli anni '90. Esso e` diventato uno standard ISO nell'agosto 1990 ed e` stato utilizzato in prodotti commerciali dal 1991; lo standard JPEG base non e` coperto da brevetto, mentre sono brevettati alcuni dei meccanismi opzionali che possono essere utili per esigenze particolari. Questo formato viene continuamente aggiornato e sono prevedibili nuove versioni standard. Il formato JPEG si basa su un algoritmo di compressione lossy, che fornisce immagini compresse con qualche perdita di qualità. Peraltro in gran parte delle situazioni, in termini di qualità, dimensioni, genere della immagine originale e grado di riduzione applicato, la perdita di informazione risulta quasi impercettibile all'occhio umano.

Le immagini JPEG si basano su elementi di 24 bits e consentono una gamma di 16 milioni di colori: si tratta quindi di un formato che ad una immagine associa molte piú informazioni di GIF. È quindi piú opportuno utilizzarlo per immagini con variazioni di tono del colore continue, come nel caso delle fotografie, del risultato della scannerizzazione di opere d'arte e nella presentazione di grafici tridimensionali.

Un altro vantaggio di JPEG rispetto a GIF è dato dalla possibilità di specificare il grado di riduzione da applicare all'immagine, permettendo di trovare un equilibrio tra dimensioni della registrazione e qualità della riproduzione. Il rapporto di compressione dipende dal programma di editing usato per ottenere la rappresentazione JPEG; solitamente si riduce un'immagine da 10 a 1 o da 20 a 1, ma si può raggiungere anche il rapporto di compressione estremo da 100 a 1 (questo pero` con forte rischio di significativa perdita di qualità).

JPEG consente inoltre di risparmiare tempo di scaricamento delle immagini sul terminale dell'utente del Web rendendo disponibile una modalità di visualizzazione progressiva. Infatti si può chiedere che una immagine venga scaricata per successivi passi di definizione, consentendo all'utente di rendersi conto dalla visione delle prime immagini poco definite se la osservazione più precisa lo interessa e merita il tempo di attesa oppure se gli basta accontentarsi della prima idea e passare alla cattura di altre informazioni o ad altre attivita`.

Formati PNG

Si tratta di due formati del genere bitmap che si servono rispettivamente di 8 e 24 bits per ogni pixel e sono chiamati conseguentemente PNG-8 e PNG-24. Questi formati sono stati definiti nell'ambito del Consorzio W3C al fine di rendere disponibile un formato con spiccate caratteristiche di portabilità e di estendibilità e che, libero da vincoli brevettuali, consenta di rimpiazzare GIF superando alcune sue limitazioni e che consenta anche di sostituire in varie applicazioni formati grafici diffusi, anche se non inseribili in pagine Web come TIFF (Tagged Image File Format), PICT, XBM e BMP. I due formati sono diventati ufficiali con la Recommendation PNG Specification pubblicata da W3C il primo ottobre 1996.

PNG prevede una buona compressione lossless, supporta le immagini con colori indicizzati, quelle con scale di grigio e quelle a veri colori; una immagine PNG puo` essere dotata di un cosiddetto canale alfa in grado di stabilire la trasparenza per ogni colore; inoltre un file PNG puo` immagazzinare informazioni gamma e di cromaticità che permettono un adattamento delle gamme di grigi e di colori che compaiono nelle immagini rese sullo schermo alle diverse condizioni di luminosità dell'ambiente, adattamento che imita i processi dell'occhio umano.

Per quanto riguarda la trasmissione i files PNG permettono sia la rilevazione dei comuni errori di trasmissione che i controlli della piena integrita`.

Per quanto riguarda la collocazione su Internet delle immagini PNG, è possibile inserire metadati nei relativi files, in modo che le singole immagini possano essere rintracciate dai motori di ricerca; inoltre esse possono entrare come attachements di messaggi postali che si adeguano alle specificazioni standard MIME, Multipurpose Internet Mail Extensions, riguardanti gli attachements non ASCII. In effetti PNG costituisce l'Internet Media Type caratterizzato dalla scrittura image/png: questa e` una informazione che fa parte di un catalogo ufficiale di caratterizzazioni dei vari media che possono circolare su Internet secondo modalita` standard.

PNG è disponibile con le ultime versioni dei maggiori browsers e può essere trattato con vari strumenti software; esso si è diffuso abbastanza ampiamente, ma nonostante i suoi vantaggi tecnici, lo è meno dei due standards precedenti, consolidati dall'uso.

PNG-8 e` un formato economico che consente di trattare convenientemente immagini contenenti estese aree di colore uniforme, linee e dettagli ben definiti (line art) e logogrammi. La compressione ottenibile con PNG-8 puo` condurre a files piu` compressi del 10 - 30% rispetto a quelli ottenibili con GIF (ma GIF e` migliore per immagini molto semplici).

PNG-24 puo` essere applicato ad immagini che presentano elevata ricchezza cromatica e tonale e si pone come alternativa di JPEG: esso effettua compressioni lossless, non perde informazioni ed in genere fornisce files un po' piu` estesi di JPEG. Mentre PNG-8 supporta la trasparenza rispetto allo sfondo, PNG-24 puo` conservare 256 livelli di trasparenza in modo da riuscire a sfumare con gradualita` una immagine con un qualsiasi sfondo; accade pero` che non tutti i browsers supportano la funzionalita` di multitrasparenza.

Grafica vettoriale e linguaggio SVG

Contrariamente ai formati bitmap come GIF, JPEG e PNG, le immagini vettoriali sono basate su descrizioni delle manovre di tracciamento e presentano, o almeno fanno prevedere, notevoli vantaggi rispetto alle immagini bitmap, specialmente per la gestione delle immagini destinate al Web.

Il primo vantaggio che presentano le immagini vettoriali rispetto alle bitmaps riguarda la memoria richiesta per la registrazione spesso molto inferiore perchè esse non devono descrivere ogni singolo pixel. Conseguentemente le informazioni algoritmiche costituenti i documenti di grafica vettoriale spesso possono essere trasferite molto più velocemente di un usuale complesso di pixels.

Altro vantaggio della grafica vettoriale è la possibilità nel rimpicciolire, ingrandire, ruotare o sottoporre ad altre trasformazioni matematicamente esprimibili le immagini senza perdita di risoluzione e chiarezza. Perciò le immagini vettoriali non richiedono agli autori dei documenti di raggiungere compromessi tra fattori di compressione e qualità della resa visiva ottenibile.

La grafica vettoriale indubbiamente apre grandi prospettive per l'illustrazione scientifica e tecnica. Per contro occorre far presente che immagini come quelle fornite da fotografie professionali, da manufatti artistici scannerizzati o da programmi di illustrazione utilizzati ad alto livello sono rappresentate digitalmente mediante pixels e non possono essere convertite in rappresentazioni vettoriali fedeli.

Per disporre pienamente dei grafici vettoriali nelle pagine Web occorrono browsers in grado di effettuare prestazioni specifiche varie e complesse. Attualmente si possono utilizzare grafici vettoriali per il Web servendosi delle versioni piu` recenti dei browsers di larga diffusione arricchite da procedure apposite sotto forma di plug-ins ed applets. Per giungere alla piena disponibilita` della grafica vettoriale sul Web e` necessario che si impongano degli standards molto articolati. Questi standards dovrebbero essere osservati da tutta la serie di produttori di software e di documenti interessati alla grafica: produttori di browsers, di programmi di illustrazione e di animazione, di sistemi computazionali, di programmi applicativi con risultati grafici, di editori e stampatori, di produttori di apparecchiature per la stampa e per la visualizzazione, ... .

Il dibattito sui linguaggi e le procedure per la grafica vettoriale si e` sviluppato negli ultimi anni '90 in vari organismi per le normative e le standardizzazione ed in particolare nell'ambito del Consorzio W3C. Inizialmente sono stati proposti due linguaggi: PGML (Precision Graphics Markup Language) proposto da Adobe System, IBM, Netscape e Sun Microsystems, e VML (Vector Markup Language), sostenuto da Microsoft, Hewlett-Packard, Autodesk, Macromedia e Visio. Entrambi questi linguaggi sono basati su XML, il metalinguaggio a marcatori proposto come base sintattica per la definizione dei linguaggi per il Web e avrebbero dovuto diventare linguaggi ospite di XHTML.

Dalla convergenza fra le due proposte è stato formato nel 1998 un ampio gruppo di lavoro per la definizione di un ambizioso linguaggio chiamato SVG, Scalable Vector Graphics. Su questa applicazione di XML si basa un progetto che vuole avere ampia portata ed incisività ed al quale stanno dando il loro contributo, oltre alcuni ambienti accademici, le maggiori industrie del settore (Adobe, Autodesk, Corel, HP, IBM, Kodak, Macromedia, Microsoft, Netscape, Quark, Sun, Visio, Xerox). Dopo ben 9 Working Drafts, il 4 settembre 2001 e` stata pubblicata una massiccia Recommendation chiamata SVG 1.0 Specification che dovrebbe portare ad una prossima prima definizione ufficiale del linguaggio. Intanto vengono messi a punto prodotti software che cominciano a rendere possibile la sperimentazione, la produzione e la distribuzione delle immagini in questo linguaggio, che prevedibilmente giochera` un ruolo importante nelle attivita` imperniate sul Web nei prossimi anni. Informazioni su questi sviluppi sono reperibili nella Official W3C overview of SVG.

Il linguaggio SVG si propone di far utilizzare al meglio le prestazioni delle piattaforme hardware e software disponibili, quali esse siano. Esso consente di operare con una tavolozza di 224 = 16777216 colori e quindi di trattare immagini di alta qualità visiva; vuole che le sue immagini possano essere presentate da una grande varietà di dispositivi: esse potranno essere rese visivamente sia sugli schermi delle piccole apparecchiature portatili come i Web phones, sia sugli schermi con le migliori caratteristiche tecniche, sia con apparecchiature di stampa ad alta risoluzione.

Con SVG si possono richiedere facilmente rettangoli, cerchi, ellissi, linee, poligoni e poligonali; figure più complesse si ottengono con un tag <path> che permette di simulare le manovre di una punta scrivente. Nelle immagini si possono inserire testi in fonts arbitrarie collocando le lettere seguendo percorsi qualsiasi (ad es. una spirale o una curva individuata come traiettoria particolare). Le fonti possono essere gestite con il meccanismo chiamato Webfont che facilita la acquisizione dalla Rete di fonts non disponibili sul terminale del cliente.

È prevista anche una certa compatibilità con gli standard GIF e JPEG. In una immagine SVG si possono inserire elementi con immagini GIF e JPEG come in documenti XHTML: questo permette di riutilizzare le tradizionali immagini raster in contesti SVG; inoltre si puo` fare in modo che un browser o un altro viewer che non sia ancora abilitato a servirsi di SVG possa avere presentate immagini del genere bitmap.

Il linguaggio inoltre si adegua ai molti altri standards per il Web definiti nell'ambito di W3C e quindi le immagini SVG potranno essere utilizzate in documenti e sistemi di ampia portata e fruibilità. In particolare le immagini SVG potranno far parte dei links evoluti previsti da XLink ed Xpointer, i relativi tags potranno entrare nei cosiddetti namespaces, si conforma alle CSS di livello 2 per l'indipendenza fra contenuto e presentazione, e si conforma al recente standard SMIL per la sincronizzazione di componenti in evoluzione delle pagine Web (suono, parlato e animazione).

SVG quindi sara` un componente cruciale di applicazioni ad alta versatilità ed adattabilità trasferibili in modo poco impegnativo: in particolare con SVG si cominciano a produrre in modo relativamente agevole mappe cliccabili che consentono servizi interattivi o che potranno supportare attività di commercio elettronico o documenti per l'insegnamento a distanza e l'apprendimento interattivo.

Attualmente vari ambienti universitari e di ricerca e molte aziende high-tech presentano i primi risultati del loro impegno nello sviluppo di strumenti ed iniziative a supporto di SVG. In particolare conviene citare Adobe, industria tra le maggiori nel settore della pubblicazione a stampa che negli anni '80 aveva definito ed implementato PostScript, linguaggio che consente un controllo evoluto delle stampanti che successivamente e` stato ispiratore di tutti i progetti per la grafica vettoriale e dello stesso SVG. Questa azienda si propone di integrare SVG nei suoi strumenti software per l'editing come Acrobat, Illustrator, Photoshop, GoLive e Live Motion: in tal modo sarà possibile produrre grafici per il Web e per la stampa servendosi di strumenti visuali atti a facilitarne la produzione evitando di dover approfondire le complesse caratteristiche del linguaggio. Adobe mette gratuitamente a disposizione un prodotto chiamato Adobe SVG Viewer giunto ad una versione 3 piuttosto completa. Esso puo` essere inserito come plugin nei browsers Netscape Navigator ed Internet Explorer per rendere urtilizzabili in rete immagini SVG. Inoltre Adobe intende rendere disponibili in tempi brevi dei microviewers, microvisualizzatori, che consentiranno di avere immagini vettoriali sulle piccole apparecchiature mobili in grado di collegarsi ad Internet.


Indice pagine - inizio pagina