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.

15 pensieri su “Migliorare le GIF trasparenti

  1. ho capito
    per elaborare il lutto
    ti sei dato al sistema bipolare, bipartisan, binario
    A&B, A&B, A&B, Attila&Berlusca….
    ;-))
    comunque è tutto chiaro…
    tranne che io non ci capisco niente…:-((
    però facciamo un test:
    il blog dell\’assistente dell\’angelo
    quanto ci metti a caricarlo???
     
    comunque sia, e parte le battute…
    sei il Signore incotrastato degli HTML…
    ;-))

  2. ciao bruno faccio veramente fatica a comprendere quello che tu scrivi la grafica è un lavoro e io ho poco tempo per potermi dedicare alle gif provo qualche volta a disegnare con qualche programma ma sono solo tentativi per colorare il mio blog e fare qualcosa di diverso spero di non disturbarti troppo quando vieni a visitarlo sgridami se è necessario mi servirà per correggermi grazie

  3. dunque dunque dunquecalcolato che impieghi 15 min a commentoconsiderato che 6 ore al giorno te le spari per i commentifanno 24 commenti al giornoevinto che hai 90 amicibè…..ogni 3/4 giorniun commentino me lo potresti pure lasciare;-)) a proposito, ma tu…di che colore sei???

  4. Bruno scusa se ti disturbo con le mie domande ma quando sottoscrivi un intervento russ e scopri poi che lo devi ricorreggere se lo sottoscrivi una seconda volta corretto la sottoscrizione rimane errata come mai? grazie spero di essere stata chiara nella spiegazione del mio problema ciao

  5. Bruno scusa ora ti spiego bene Io vado su il mio spaces e su personalizza clicco su anteprima poi clicco sul segno + dell\’ultimo intervento che io ho fatto e mi appare "Aggiungi al tuo windows spaces e sottoscrivi a RSS.Quando io clicco quest\’ultimo,appare l\’intervento nel feed, se io sbaglio qualcosa sul  mio interveto e lo correggo, nel feed rimarrà l\’errore e non ho possibilità di correggerlo? grazie

  6. Considerato che odio le GIF animate, e che non uso nemmeno quelle normali, visto che mi accontento di poco…
    (beh, insomma, le mie foto sono piuttosto pesanti, più delle gif di sicuro, lo so…)
    …non commetterò certo un errore se nel passare di qui ti augurerò un buon Primo Maggio, anche se con un po\’ di anticipo!!!
    Ciao da Monica

  7. Ciao Bruno!
    Anche a me non piace vedere i blog pieni di cose animate e immagini – troppe – che rallentano sensibilmente la navigazione (e io ho la Adsl, non oso immaginare te che vai ancora a 56kb).
    Devo chiederti una cosa, non riesco a aggiungere e eliminare le categorie, o meglio le elimino, ma poi riappaiono, boh
    Sai come posso fare?
    Ora vado a mangiare, è l\’ora
    Buona giornata, un abbraccioEmilio 😉

  8. ciao Bruno
     
    sto dando la caccia
    ai Serial Blogger
    tu ne conosci qualcuno…
    😉
    passa un buon
    primo maggio

  9. Anche questo è un sano consiglio… io ho tolto i video dal mio spaces…. ti va di farti un giro e dirmi se adesso ti è più visibile?
    Manca ancora qualche immagine hostate direttamente da una mia cartella personale e ho un dubbio…. ma non è che quando spengo il PC scompaiono dallo space?
    Un abbraccio e un\’augurio per una splendida settimana.
     

  10. e proprio quelli dicevo…
    blog fatti in serie e poi abbandonati…
    Uèèè
    a Urbino c\’è il festival dei Blog!!!
    vai e cantagliele
    ;-))
    Sociologia della Rete…sarà un successo!!!
    C\’ho in Toscana
    una cantina sotto terra
    che fa da rifugio
    piena di vino e prosciutti appesi,
    che dici potrebbe andare…
    ;-))

  11. … se penso ai primi interventi del mio blog, così pieni di gif e immagini psichedeliche… mi viene una certa tenerezza! A dire la verità non ho ancora abbandonato del tutto quel filone, ma forse oggi è meno evidente (forse!)
    Un bacio

  12. E\’ proprio l\’opzione-pubblico il punto.
    Non costerebbe due fatiche fare un tipo di selezione anche sui commenti.
    Basterebbe una \’preview\’ dei commenti da consentire la pubblicazione, oppure lasciare la possibilità di commentare gli amici o amici degli amici.
    Altra cosa che potrebbe tornare utile, visto che lo fanno sia i diretti rivali che i partner, è quello di affiancare alle request di amicizia una nota d\’invito.
    Mi piacerebbe sentire le motivazioni di aggiunta e per noi che abbiamo avuto a che fare con parecchia utenza, è difficile distinguere chi è un conoscente o chi cerca solo di farsi pubblicità.Cose fattibilissime eh, che renderebbero vita migliore nella nostra sfera.
     
    Per carità, gli imbecilli ci saranno sempre, ma è sempre meglio prevenire che curare.
     
    Ciao Brunè!
    Mat

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...