Come creare immagini trasparenti con Giftrans.

Una delle caratteristiche offerte dal formato GIF, è quella di poter creare delle immagini con UN SOLO colore trasparente, ovvero che non copre ciò che sta al di sotto. Cerchiamo di capirci meglio con degli esempi.
Prendete un foglio rettangolare completamente bianco e disegnateci sopra un omino. Sovrapponetelo ad una fotografia più grande. Cosa vedete?
Uno splendido omino che deturpa la foto originale!
Prendete ora un foglio trasparente delle stesse dimensioni di quello precedente e disegnateci sopra un altro omino. Sovrapponetelo alla fotografia di prima. Cosa vedete adesso?
Uno splendido omino perfettamente integrato con la fotografia originale!
Questo piccolo esempio vi dovrebbe far capire la differenza fra un GIF normale ed un GIF trasparente.
Una delle caratteristiche del formato GIF è che ogni immagine occupa sempre una certa superficie rettangolare misurabile in pixel, ovvero in punti dello schermo. Un'immagine 100x150pixel
occupera' dunque una porzione di schermo rettangolare, lunga 100 punti e alta 150 punti, per un totale di 100x150=15,000 punti.
Se per un qualsiasi motivo la vostra immagine ha dei contorni non rettangolari, essa dovrà essere inserita all'interno di un'immagine comunque rettangolare, con evidenti spazi vuoti. Fintanto che tali spazi vuoti hanno lo stesso colore dello sfondo, il problema non si pone, in quanto si confonderà con esso, ma oggi che la maggior parte delle pagine ha uno sfondo più o meno variopinto questa soluzione non è più adottabile. Se però assegnamo agli spazi vuoti della nostra immagine rettangolare un colore che definiremo trasparente, ecco che essa si potrà integrare perfettamente con il contenuto dello sfondo sottostante.
Un'altra possibilità di utilizzo dei GIF trasparenti è quella di separatori d'immagini o testi. Immaginate di avere due immagini e di doverle separare di 20 pixel.
E' sufficiente creare un'immagine 20x2pixel con una palette di 2 colori e riempirne tutto lo spazio a disposizione con uno dei due colori.
Assegnate a tale colore l'attributo "trasparente" e memorizzatelo come GIF 89a. A questo punto potete inserire nel vostro documento HTML delle istruzioni simili a queste:
<IMG SRC="img1.gif"><IMG SRC="vuoto20.gif"><IMG SRC="img2.gif">

Ottenendo il seguente risultato: