Image Replacement Multiplo
Lunedì 5 Dicembre 2005 - 13:09
di Alessandro Fulciniti
La scorsa settimana ho presentato su web-graphics un metodo semplice ed efficace per rimpiazzare graficamente più titoli in una pagina con un’immagine
unica: Single Image Multi Replacement. Presento qui l’articolo in italiano.
Più che una tecnica, quella che presento è un possibile approccio di sviluppo, che personalmente trovo sia in grado di snellire molto il processo di image replacement.
Ecco qui l’esempio che ho preparato, in cui i titoli sono rimpiazzati graficamente, ed ecco l’unica immagine utilizzata.
Il risultato è facilmente ottenibile in tre passi.
- preparazione dell’immagine;
- preparazione del markup;
- definizione del CSS.
Quanto al primo punto, nell’esempio l’immagine usata è larga 350 pixel e alta 200, e si compone di cinque titoli ciascuno alto 40 pixel. Una volta preparata l’immagine con il vostro programma di grafica preferito, queste tre misure saranno indispensabili per adattare la tecnica alle vostre esigenze.
Ora veniamo al codice HTML dell’esempio: ciascun titolo
è marcato con un h2, ha un id e prima del testo c’è un elemento
span vuoto:
<div id="contenuto">
<h2 id="azienda"><span></span>L’azienda</h2>
<h2 id="servizi"><span></span>I nostri servizi</h2>
<h2 id="dove"><span></span>Dove siamo</h2>
<h2 id="consegna"><span></span>Metodi di consegna</h2>
</div>
Prima di procedere con il CSS dell’esempio, c’è ancora una cosa da notare: rimpiazzeremo tutti i titoli h2 all’interno del div id="contenuto". L’implementazione del CSS è piuttosto semplice: in sostanza grazie allo span vuoto e ai posizionamenti assoluti siamo in grado di coprire i titoli testuali con la porzione di immagine necessaria. È per questo motivo che ogni titolo ha un id, così che sia possibile individuarlo univocamente. La tecnica usata è la cover-up span, che ha il vantaggio significativo di rimanere accessibile anche ad utenti che navigano con le immagini disabilitate. Per prima cosa la regola sui titoli:
div#contenuto h2{position: relative;width: 350px;height:40px;margin: 2em 0 0;
font: bold small-caps 90% Arial,sans-serif;color: #847FB7}
Vengono definite le dimensioni, i margini e il font con cui si vorrà presentare il titolo nel caso (seppur raro, ma possibile) in cui l’utente abbia le immagini disabilitate. Una cosa importantissima è dichiarare i titoli position: relative, questo è infatti il modo per consentire il posizionamento assoluto al loro interno.
Gli elementi span verranno infatti posizionati assolutamente, avranno la stessa dimensione del titolo che li contiene e avranno tutti come sfondo l’immagine utile per il replacement:
div#contenuto h2 span{position: absolute;
width: 100%;height: 100%;
background-image: url(titoli.jpg)}
Non si sono specificate le coordinate del posizionamento assoluto, che comunque restano implicitamente definite, e sarebbero top:0; left:0;. Gli span quindi ricopriranno per intero i titoli, ora non ci resta che definire per ciascuno la porzione di immagine da utilizzare grazie alla proprietà background-position:
h2#azienda span{background-position: 0 0}
h2#storia span{background-position: 0 -40px}
h2#servizi span{background-position: 0 -80px}
h2#dove span{background-position: 0 -120px}
h2#consegna span{background-position: 0 -160px}
Per ciascuno span individuato dal corrispondente titolo, l’immagine di sfondo viene traslata verso l’alto (per questo l’uso di valori negativi) di un multiplo di 40 pixel.
Il nostro esempio è così ultimato. La compatibilità della tecnica è buona e dovrebbe essere estesa a tutti i browser con un minimo supporto dei CSS: l’esempio è stato testato su IE5, IE5.5, IE6, Opera, Firefox e Safari.
I vantaggi sono diversi: un’immagine singola pesa sicuramente meno di cinque immagini distinte e richiede una sola richiesta http e soprattutto la tecnica resta accessibile con immagini disabilitate. Lo svantaggio più significativo è un basso livello di personalizzazione: è infatti indicata per siti in cui i titoli grafici difficilmente aumenteranno di numero. Inoltrem l’immagine singola richiede un tempo iniziale di caricamento maggiore rispetto alla prima delle cinque immagini separate. Il mio consiglio è di mantenerla leggera: al massimo 20-30Kb di peso.
Infine è possibile considerare diverse strategie di sviluppo: attribuendo un id
al body per esempio abbiamo un ulteriore grado di personalizzazione, e potremo
usare per esempio un’immagine per pagina. Per esempio questo potrebbe essere un’estratto
del CSS se volessimo utilizzare un’immagine per la home page e una per la pagina di portfolio:
div#contenuto h2 span{position: absolute;width: 350px;height: 40px}
body#home div#content h2 span{background: url(home.jpg)}
body#portfolio div#content h2 span{background: url(folio.jpg)}
Le restanti regole saranno simili a quelle dell’ esempio appena visto, e si riferiranno all’immagine corrispondente alla pagina. Alla prossima.
Commenti
1
Beh, si basa sulla stessa tecnica che si usa per i rollover di immagini…
Sinceramente comunque non vedo molta utilità.
Al massimo si risparmia in numero di file, ma il peso rimane uguale!# - postato da Passavo di qui - 05 Dicembre 2005 - 16:38
2
un’immagine singola pesa sicuramente meno di cinque immagini distinte
non ci capisco molto di immagini, ma questo non è vero solo se le 5 immagini hanno gli stessi identici colori ?
e non dipende dal formato utilizzato ?io credevo fosse 5 gif stessi colori = 1 sola grande gif con tutte e cinque le immagini, idem per png a 8 bit … diverso per la JPEG, che mappando “ad aree” potrebbe pesare addirittura di più, o sbaglio ?
… sul serio, non sono un grafico, sto’ chiedendo proprio per saperne di più, grazie per l’eventuale risposta, saluti :-)
# - postato da andr3a - 05 Dicembre 2005 - 16:52
3
Secondo me quello che risparmi nel peso delle immagini lo sprechi come testo nel CSS!
Inoltre è un pò un casino e non ne ne colgo la precisa utilità: insomma, un trucco per far vedere che si è abili, ma niente più!
Senza ostilità, eh :-)
4
più che altro averle separate, per un telefono o un 56Kb, significherebbe almeno vedere qualcosa, man mano che si memorizzano, mentre cosi’ o si ha tutta l’immagine o si ha l’impressione che manchino titoli e grafica.
Ma restano i dubbi sulla questione del peso, è effettivamente vero che una grande immagine fatta da 5 piccole pesa meno di 5 piccole separate a parità di colori e dimensioni verticali ?# - postato da andr3a - 06 Dicembre 2005 - 08:12
5
Sul peso delle immagini si risparmia qualcosa, dato che si ha un solo file si ha una sola tabella dei colori ed una sola intestazione. Anche con la compressione il risultato è migliore perchè si suppone che all’interno dell’immagine ci siano più parti uguali. Comunque sia non credo che l’obbiettivo di ridurre le dimensioni dell’immagine sia lo scopo di questo articolo.
Il vero vantaggio si ha nel fatto che gestendo un solo file sorgente dell’immagine è molto più comodo e veloce fare variazioni di colore o di stile del testo.
6
grazie Mars, i dubbi erano su colori differenti, anche se renderebbero lo stile poco lineare :-)
Comunque effettivamente si fa prima a cambiare il tutto, saluti.
# - postato da andr3a - 06 Dicembre 2005 - 10:59
7
Secondo me è una tecnica che ha senso solo sui rollover, perché consente il preload implicito.
Ha ragione andrea quando dice che l’utente si attende un caricamento progressivo, ed è anche un principio di buona usabilità, dare il prima possibile le informazioni scaricate.
8
un chiarimento: finche’ l’immagine non e’ caricata i titoli mi appaiono formato testo?
# - postato da frappa - 07 Dicembre 2005 - 11:33
9
Frappa: si, i titoli testuali saranno visibili finchè l’ immagine non è stata caricata. La tecnica di image replacement che ho usato infatti copre soltanto il testo, così da garantire l’accessibilità in caso di immagini disabilitate… Si può usare lo stesso approccio di una sola immagine anche con un’altra tecnica di image replacement, molte le trovi nell’articolo che ho linkato.
# - postato da Alessandro Fulciniti - 08 Dicembre 2005 - 00:04