Migliorare le GIF trasparenti

Nel visitare i vari blog ci sono alcune cose che mi disturbano in maniera decisa.
Alcune sono di carattere prettamente tecnico, nel senso che, potendo navigare solo con un modesto modem, sono io tecnologicamente impedito ad apprezzarle. In questo ambito si collocano i vari player multimediali, ormai una gara a chi ne inserisce di più, per la soddisfazione generalmente del solo proprietario del blog (i visitatori difficilmente li guardano/ascoltano tutti; molti come me si limitano ad ignorarli).

Anche le diffusissime gif animate sono un vero e proprio incubo per navigatori modem-dipendenti; a fronte di un peso mastodontico, con tempi geologici di caricamento, si hanno in genere risultati piuttosto modesti da un punto di vista artistico.

Altre cose mi disturbano per la loro approssimazione. Non solo di contenuti ma anche di scelte grafiche.
Tra le scelte grafiche a cui si presta poco attenzione ci sono le gif. Ed è di queste che voglio parlare.

Le GIF sono immagini codificate in un formato detto appunto gif che hanno la caratteristica di supportare la trasparenza (al contrario del più diffuso formato jpg) assieme ad altre caratteristiche che però qui non ci interessano. Questo vuol dire che certe aree di una immagine gif possono lasciar vedere ciò che c’è dietro, sia esso uno sfondo colorato o un’altra immagine.
Spesso quindi vengono usate per mostrare testi o figure come fluttuanti sullo sfondo del blog (o di un sito).

Il problema nasce dal fatto che queste immagini mostrano un buon risultato solo su un determinato sfondo; quando la stessa immagine viene utilizzata su uno sfondo diverso, il testo (o la figura) appare circondato da un bordo sfrangiato generalmente bianco, maggiormente intollerabile quando abbiamo anche un’ombra sfumata.

come appare come dovrebbe apparire

Questo è dovuto al fatto che la trasparenza del formato gif è di tipo binario, vale a dire che o c’è o non c’è. Un’area di una immagine gif può essere solo o completamente trasparente o completamente opaca. Non esiste una trasparenza parziale o progressiva, quindi ci sarà un bordo netto tra la parte opaca e quella trasparente.

Se il colore dello sfondo fosse stato bianco avremmo avuto un risultato ottimo.

Se non vogliamo adattare lo sfondo alla immagine (cosa comunque problematica quando le immagini sullo stesso sfondo sono più di una) dovremo capire come funziona il meccanismo di trasparenza del gif per cercare poi di correggere i problemi col nostro programma di grafica.

Intanto cerchiamo di spiegare il perché del bordo bianco, e lo faremo riferendoci al più diffuso programma di grafica che è Photoshop.

Quando una immagine viene salvata in modalità trasparente, Photoshop cerca di smussare il passaggio tra la parte opaca  e quella trasparente con una sfumatura di colore tra il bordo dell’immagine e lo sfondo. Se non facesse questo il risultato sarebbe un bordo troppo netto e poco piacevole,

se non addirittura disastroso, come nel caso di ombre sfumate (l’ombra scompare addirittura su uno sfondo nero):

Per default Photoshop effettua quindi una sfumatura del bordo verso il bianco, partendo dal presupposto che il bianco sia lo sfondo più diffuso. Questo comporta che il risultato sia tollerabile anche con sfondi molto chiari, ma intollerabile per sfondi scuri o neri.

Naturalmente è possibile scegliere verso quale colore vogliamo che sfumi la nostra gif, non solo il bianco.
Il risultato seguente mostra come apparirebbe una scelta di sfumatura verso il nero.

Possiamo anche scegliere di sfumare verso il colore dello sfondo (per esempio una tonalità di verde):

oppure scegliere un valore di grigio che, per la sua neutralità, minimizza comunque ogni problema anche se in realtà non ne risolve nessuno (a meno di uno sfondo grigio).

Chiarito, spero, questo aspetto, sta a noi decidere quale soluzione adottare.

Se l’immagine la stiamo elaborando con Photoshop è sufficiente scegliere il colore di sfumatura nella voce Alone->Altri… quando salviamo la nostra immagine per il Web (File->Salva per Web…) e dopo aver scelto il formato GIF, naturalmente .

Se prevediamo di utilizzare la stessa immagine su sfondi diversi è opportuno salvarla in diverse versioni, ognuna per il suo sfondo, oppure scegliere il grigio (codice #666666 o inferiore).
Se lo sfondo è costituito a sua volta da un’immagine dovremo scegliere un colore di sfumatura che si sposi con il colore medio dell’immagine di sfondo.

Se invece l’immagine GIF che utilizziamo l’abbiamo scaricata da internet sarà allora giocoforza adeguare il nostro sfondo al colore della sfumatura già presente, visto che non è possibile la correzione .

Chi non possiede Photoshop dovrà adattare questi suggerimenti al proprio programma di elaborazione grafica.

Nota a margine: il GIF è un vecchio formato grafico, anche piuttosto versatile, ma con molte limitazioni. Oggi è superato, almeno per quanto riguarda le trasparenze, dal formato PNG-24 che non soffre di queste problematiche perché supporta le semi trasparenze.