Tecniche di base di Web Develop : Tagliamo le immagini a fette con Photoshop e visualizziamole con i CSS

Vanno di moda i siti con le intestazioni grandi (e non solo), fatte con immagini attraenti, si trovano così intestazioni anche con larghezze superiori a 900px, ma mettere un’immagine così grande,  può creare fastidiosi problemi di lentezza nel caricamento e comunque non è buona pratica inserire immagini grandi senza prima fare delle ottimizzazioni che ne consentano il caricamento veloce e senza intoppi; teniamo conto che oggi i siti non vengono visualizzati soltanto su pc potenti e con connessioni veloci, abbiamo un largo numero di utilizzatori che navigano utilizzando dispositivi relativamente poco potenti come pc palmari, cellulari e ancora una buona fetta di persone che non dispone di collegamenti adsl/fibra. E’ inoltre assolutamente inutile e controproducente caricare i server con immagini enormi (in termini di byte occupati), dal momento che quando due o più utenti richiedono dal browser la stessa pagina, sovraccarichiamo il server che deve esaudire due o più richieste contemporaneamente, il problema è ancora più sentito su siti con numerosa utenza. Adobe Photoshop ci mette a disposizione strumenti molto utili e di semplicissimo utilizzo. Vediamo come ottimizzare ad esempio, un’immagine che vogliamo utilizzare come intestazione (header). In questo esempio viene utilizzato Photoshop CS2 ma il principio è lo stesso anche per le versioni successive.

Apriamo in photoshop l’immagine che ci interessa (avente dimensioni maggiori o uguali alla dimensione che abbiamo deciso di dare al nostro header),  se lo riteniamo opportuno possiamo ridimensionarla per adattarne la larghezza a quella che abbiamo deciso, altrimenti procediamo direttamente con lo strumento taglierina per ritagliarci la parte di immagine che vogliamo utilizzare. Per usare la taglierina clicchiamo in un angolo e trasciniamo la selezione, eventualmente regoliamo la sezione con le apposite maniglie (ovvero i quadratini che appaiono ai bordi per il ridimensionamento)

quando abbiamo raggiunto le dimensioni desiderate e visualizzabili nel pannello info:

facciamo doppio click sulla selezione e otteniamo nell’area di lavoro soltanto l’immagine che ci interessa, delle dimensioni volute (nel caso preso ad esempio sto creando un’intestazione con le dimensioni 960×280). Adesso dobbiamo procedere con il taglio in sezioni dell’immagine e quindi con la successiva ottimizzazione per il web. A questo punto scegliamo lo “strumento sezione“

Andiamo con tale strumento sull’immagine e, cliccando con il tasto destro, selezioniamo “Dividi sezione“. Appare una finestra dalla quale possiamo scegliere se dividere l’immagine in sezioni verticali o orizzontali, essendo questa presa ad esempio un’immagine che si sviluppa in orizzontale, selezioniamo l’opzione “dividi verticalmente in”, per semplicità seleziono quindi l’opzione “… sezioni in orizzontale, a spaziatura uguale“, immettendo 8 come valore.  Otterremo l’immagine “affettata” in 8 parti a spaziatura uguale (potete scegliere voi quante, l’importante è che non siano ne troppo piccole, nè troppo grandi)

Diamo l’Ok, vedete che l’immagine si presenta suddivisa in 8 sottosezioni. A questo punto passiamo al salvataggio. Dal menù File selezioniamo “Salva per Web“, appare la finestra che ci permette di fare le ottimizzazioni, generalmente le opzioni presentate di default vanno più che bene, se vogliamo qualità più alte, scegliamo eventualmente un formato jpg, ma ripeto: si ottengono file più grandi inutilmente e le differenze tra una scelta e l’altra possono essere impercettibili a livello visibile ma percettibili a livello di spazio occupat sull’hard disk. Clicchiamo quindi su “Salva” in questa finestra, come vedete sotto al nome da dare al file possiamo selezionare se salvare come “solo immagini”, se come “html e immagini” o se “solo html”, scegliamo in questo esempio “html e immagini”, e andiamo a vedere il risultato ottenuto. Vediamo che abbiamo un file html e una cartella immagini contenente le 8 sezioni che abbiamo creato. Il risultato così è già ottenuto, ma la pagina html creata da photoshop, personalmente a me non piace perchè non segue gli standard xhtml verso i quali tutti dovrebbero evolversi per avere maggior compatibilità con tutti i dispositivi.

Passiamo quindi a crearci noi una pagina di esempio che contenga l’immagine completa, conforme agli standard xhtml e con tanto di piccolo foglio di stile.

Creiamo dapprima il foglio di stile:

html {width:100%; height:100%;}
body {text-align:center; padding:0px; width:100%; height:100%; background-color:#FFFFFF;}
 
.header_container {width:960px; height:280px; border:1px #000000 solid; padding:0px; margin:0px auto;}
.header_slice {width:120px; height:280px; border:0px; padding:0px; margin:0px; float:left;}

Analizziamone il contenuto: abbiamo dato 100% altezza e larghezza sia al documento html che al body, questo ci può servire per creare in futuro riquadri che prendano tutta l’altezza della pagina anche se il contenuto non lo consente, in particolare abbiamo messo un text-align:center nel body per centrare tutto il contenuto della pagina (questo solo per i browser che seguono gli standard a singhiozzo, come Internet Explorer), successivamente abbiamo creato due classi, una che verrà utilizzata dal div che conterrà tutta la serie di immagini e una che verrà utilizzata dalle singole “fette” che compongono tutta l’immagine.

Come vedete, la classe header_container, ha larghezza e altezza dell’immagine totale, abbiamo inoltre messo un bordino nero continuo dello spessore di 1px, abbiamo impostato il padding di tutte e 4 i lati a zero (il padding è lo spazio tra il bordo esterno di un contenitore e il suo contenuto) e i margini superiori ed inferiori a zero e i margini destro e sinistro su “auto” (questo per centrare il div nei browser che fanno uso di sintassi standard, come Firefox. Ricordo che la proprietà margin rappresenta -contrariamente al padding- lo spazio tra il bordo esterno di un riquadro e quello che c’è all’esterno)

Abbiamo quindi la classe header_slice, che verrà applicata ai singoli pezzi di immagine, difatti vedete che l’altezza è sempre 280 mentre la larghezza è 120 (960/8), abbiamo tolto bordo, padding e margin, e impostato anche il float sulla sinistra (ovvero ogni immagine si dovrà trovare attaccata verso sinistra di ciò che la precede), questo è stato fatto soltanto per i browser più vecchi che potrebbero mostrare una discontinuità tra un’immagine e l’altra.

Il risultato finale è l’immagine completa, centrata nella pagina, con un bordino nero intorno. In allegato c’è la pagina xhtml completa, che vi può essere utile per spulciare delle informazioni utili nella creazione di una pagina ligia agli standard.

Download: [download#21]