La grafica è un elemento fondamentale per qualunque sito web. Un buon
corredo di immagini fotografiche, un logo e pulsanti ben disegnati, elementi accessori azzeccati e in armonia con lo stile del sito, possono influire in maniera decisiva sul suo successo. Un uso poco ponderato degli elementi grafici, però, può rovinare un progetto che ha magari richiesto ore di lavoro.
La prima cosa da ricordare è che le immagini 'pesano'. Non in
chilogrammi, ovviamente, ma in byte. E più sono 'pesanti', più aumentano
i tempi necessari a caricare quella pagina che dobbiamo consultare con urgenza.
Primo consiglio: usare immagini ed elementi grafici solo quando è strettamente necessario, ricordando che devono essere un supporto per l'idea che vuoi comunicare.
Non abusare, perchè significherebbe abusare della pazienza dei visitatori.
Al primo rallentamento, alla prima lunga attesa per caricare una pagina, sono
pronti ad abbandonare il sito.
Le immagini possono ovviamente essere un elemento base del sito. Se mi occupo
della promozione turistica della mia città, non posso fare a meno di mostrare
le splendide foto del centro storico o degli affreschi del duomo. La parola magica, in questo caso, è 'equilibrio'. Secondo consiglio: se devi usare molte immagini, ottimizzale, scegli il formato giusto, raggiungi il giusto equilibrio tra peso e qualità. Il tuo obiettivo deve essere chiaro: fare pagine belle ma che si caricano velocemente.
I browser sono in grado di visualizzare diversi formati grafici, ma sul Web
ne vengono storicamente utilizzati due: GIF e JPEG. Qualunque programma per grafica, anche freeware, è in grado di creare ed esportare immagini in entrambi i formati, e consente, quando necessario, la conversione dall'uno all'altro.
GIF e JPEG non possono essere usati indifferentemente. Ciascuno dei due è adatto per specifici elementi grafici. GIF è la scelta giusta per icone, pulsanti, loghi, decorazioni e per qualunque immagine con prevalenza di tinte piatte o con un numero limitato di colori (fino a 256). JPEG è invece la scelta giusta per immagini fotografiche in cui è necessario mantenere un elevato numero di colori e la resa di sfumature complesse tipiche delle fotografie.
Il corredo di immagini per un sito può essere messo insieme in vari
modi. I numerosi editor grafici in commercio o reperibili gratuitamente in Rete,
consentono la creazione diretta di elementi grafici, ma esistono numerosi siti
che raccolgono da anni risorse di ogni tipo mettendole a disposizione gratuitamente.
Attenzione all'uso di fotografie raccolte su Internet. Molte sono coperte da copyright e il loro uso può perciò essere limitato.
Trovare immagini su Internet per utilizzarle su un sito è apparentemente semplicissimo. Troviamo una foto che ci piace, la salviamo e il gioco è fatto. Nulla di più sbagliato. Quell'immagine potrebbe essere protetta da diritti di copyright e usarla potrebbe pertanto essere vietato. Assicuriamoci sempre, dunque, di leggere le note sul copyright presenti sui siti.
Una via da percorrere è quella dei siti che offrono immagini cosiddette free, ovvero utilizzabili gratuitamente e senza vincoli particolari. Ne esistono decine e in genere si suddividono in quelli che offrono immagini fotografiche e quelli che presentano in catalogo icone, pulsanti, sfondi e altri elementi grafici. Per le fotografie si potrà dare un'occhiata a questi:
http://www.sxc.hu/index.phtml
http://www.freefoto.com
http://www.freeimages.co.uk
http://orangetrash.d2.hu/index2.html
http://www.imageafter.com/index.php
http://www.foto4free.too.it
http://www.xtragroove.com/album
Per icone ed elementi decorativi di ogni sorta:
The Graphic Station
Absolute Web Graphics Archive
ABC Graphics
The Icon Bank
In-Site Graphics
Il formato GIF
GIF ha due caratteristiche fondamentali:
- le immagini salvate in questo formato possono contenere fino a 256 colori;
- è ottimizzato per comprimere le tinte uniformi.
Non si presta, dunque, per fotografie con milioni di colori e ricche di sfumature. Salvare un'immagine fotografica in GIF, significherebbe avere un risultato doppiamente negativo: perdita di dettaglio e 'peso' eccessivo. Tutto il contrario di quello che ci serve sul web!
GIF è allora la scelta giusta per tutti gli elementi grafici con dettagli netti e ben definiti, con prevalenza di tinte piatte, di dimensioni non eccessive: loghi, scritte, illustrazioni e disegni, pulsanti, sfondi, decorazioni non elaborate.
Il formato JPEG
Grazie al fatto di poter supportare milioni di colori, il formato JPEG è ideale per l'inserimento sul web di immagini fotografiche. Poter contare su milioni di colori ci garantisce, infatti, la resa ottimale di sfumature e variazioni di tono.
Il successo di JPEG sul web, è però dovuto ad un altro, fondamentale, fattore. Grazie al suo algoritmo di compressione, questo formato ci consente di avere immagini di buona qualità con un peso relativamente basso. Un po' come MP3 per l'audio. Al momento di salvare un'immagine in JPEG, infatti, abbiamo l'opportunità di scegliere il livello di qualità, misurato su una scala che va da 0% a 100%. In genere si sceglierà il livello che garantisce il miglior bilanciamento. Qui sotto vengono mostrate tre immagini esportate, rispettivamente, al 100%, 60% e 20%:
Dalla prima alla terza immagine c'è un degrado di qualità evidente, ma anche di dimensioni:
- Prima foto: 89kb
- Seconda foto: 19kb
- Terza foto: 7kb
Con la seconda si ha l'equilibrio più accettabile tra i due fattori
peso/qualità.
Creare un'immagine gif con sfondo trasparente
Una caratteristica importante delle immagini GIF è che consentono di
ottenere semplici effetti di trasparenza. Possiamo, cioè, decidere di rendere 'invisibile' un determinato colore in modo tale che l'immagine si adatti perfettamente allo sfondo della pagina. Vediamo un caso pratico. Abbiamo il logo di HTML.it e vogliamo rendere trasparente la parte in giallo:
Quando si esporta un'immagine in GIF da un programma di grafica, si ha la possibilità di scegliere a quali colori applicare la trasparenza. Selezionando, nel nostro caso, il giallo, si ottiene questo risultato:
Come si vede, non è un'operazione che dà sempre risultati perfetti. Il rischio principale è quello dell'effetto 'alone', quando tracce del colore originale rimangono intorno ai bordi della figura in primo pian. In questi casi bisognerà sempre valutare in anteprima il risultato finale e apportare eventualmente ulteriori correzioni.
Strumenti
Per prima cosa sarebbe utile dotarsi di qualcuno dei tanti editor completi.
Si tratta di programmi in grado di svolgere tutte le funzioni richieste nel lavoro del Web Designer, dal disegno al fotoritocco. Per iniziare non c'è bisogno di ricorrere a software professionali e complessi come Adobe Photoshop e Macromedia Fireworks. Un'ottima alternativa, su Windows, è rappresentata da Paint Shop Pro. Un programma senza fronzoli ma completo di tutte le caratteristiche di base. E soprattutto estremamente conveniente nel prezzo.
Gratuito è invece Gimp 2.0. Nato per il mondo Linux, questo software è ora disponibile in versione stabile anche per Windows e Mac OS X.
Accanto ad un editor, il cassetto degli attrezzi potrà essere completato da utility o software dedicati a compiti specifici: disegno di icone, testo 3D, etc.
Un buon punto di inizio per valutare le caratteristiche dei programmi di grafica è la sezione Download di HTMl.it.
