di

Css Image Sprites cosa sono? perché e come usarli? Quando e per chi usare i Css Image Sprites? Questi i quesiti principali a cui il post Docnrolla vuole rispondere.

Vi è mai capitato di collegarvi ad un sito, specificatamente ad una pagina Web ed aspettare un’eternità per vedere caricate, ad esempio, le icone?

Sicuramente è successo. Nella stragrande maggioranza dei casi è perché il browser sta caricando un’immagine alla volta. Un’icona alla volta. Il che comporta tempo. Se poi queste immagini sono anche non ottimizzate o sono in un formato “strano”. Allora i tempi si allungano rasentando quelli biblici.

La panacea di tutti questi mali sono i CSS Image Sprite. Una tecnica dei Cascading Style Sheets (fogli di stile a cascata) non proprio recente, ma che continua, comunque, a soddisfare le esigenze di tutti. Utenti e di motori di ricerca come Google, insieme.

Infatti proprio il Colosso di Mountain View suggerisce l’utilizzo dei Css Image Sprites per migliorare il rendimento relativo di pagina, misurati attraverso lo strumento di PageSpeed Insights.

Inoltre come succede per i contenuti above the fold, ultimamente si parla molto dei Css Image Sprites.

Immagine principale del post Docnrolla Css Image Sprites

Css Image Sprites: Cosa sono?

Un’Image Sprite è un’insieme di immagini poste all’interno di un’unica immagine. Come ci ricorda la definizione dei Css Image Sprites fornita da W3 Schools

Con un esempio chiariamo il concetto.

Consideriamo una pagina. All’interno di questa delle icone per i link ai social network. Diciamo che il blog in questione sia molto attivo ed abbia collegamenti a sei account social media. Di conseguenza sei icone da caricare per il browser.

L’image Sprite prende tutte le icone e le mette in un’unica immagine. Un’icona affianco ad un’altra.

La logica sta nel fatto che ora il browser deve caricare una singola immagine invece di sei icone singole. Insomma un vero risparmio di tempo, ma anche e soprattutto di risorse del sito (server, banda, etc). Successivamente grazie ai Css (Background-Position), il browser riceve le giuste informazioni per visualizzare le giuste immagini nel posto giusto.

Come e perché usare i Css Image Sprites

Usare quindi i Css Image Sprites vuol dire quindi, in primis costruire un’Image Sprite completa delle immagini che ci occorrono. Successivamente dobbiamo scrivere poche righe di codice Html (markup) e, soprattutto, di Css. Ma se da un lato il codice html è semplice, diverso discorso si deve fare per il Css. In effetti i Css Image Sprites non sono difficili. Ciò che per alcuni risulta complicato è la logica che sta dietro.

Per analizzare la logica dei Css Image Sprites affidiamoci al solito esempio delle icone. Per questioni di praticità consideriamo di avere solo quattro icone. Anche se quanto viene detto qui vale per un qualsiasi numero. Ora capiamo perché.

Come prima cosa prepariamoci il campo, prepariamo l’Image Sprites.

Css Image Sprites: l’immagine

Se stiamo considerando quattro icone. Immaginiamo che siano quelle tipiche da link social media in alto a destra dello schermo. Quindi possiamo pensare ad ognuna come un quadrato di lato 24px (larghezza=altezza=24px). Ogni quadrato ha come sfondo un’icona diversa. Perciò ogni icona deve essere 24 x 24px. Quindi la nostra immagine per i Css Image Sprites è ad esempio di larghezza 96px e di altezza 24px. Poiché abbiamo voluto raggruppare tutte e tre le icone nella stessa immagine (Image Sprites) una affianco all’altra. Come se le icone fossero mattoncini. Primo Facebook, secondo Twitter, terzo Instagram, etc. Allo stesso modo avremmo potuto creare un’Image Sprite più alta che larga.

Da notare che nell’Image Sprite ci devono essere tutte le icone ma anche gli effetti che noi vogliamo applicare. Cioè se ad esempio vogliamo avere un effetto di rollover sulle icone (effetto ottenuto al passaggio del mouse) allora è necessario inserire le relative immagini nella Image Sprite. Facendo gestire anche il rollover dai Css Image Sprites. In questo caso l’Image Sprite ha nuove dimensioni. La larghezza rimane uguale (96px), mentre l’altezza varia diventando di 48px.

Disposizione icone all'interno della Image Sprite dei Css Image Sprites

Css Image Sprites: Html

Come dicevamo la parte Html dei Css Image Sprites è molto semplice. Oltre ad un contenitore individuato dall’ID icone. C’è un elenco non ordinato ul di classe “boxsocialicon”. Delle voci di elenco li di classe Facebook, Twitter, Instagram e Carrello.

Insomma nulla di difficile o complicato. Un semplice elenco e delle voci. Il tutto racchiuso in un generico contenitore.

Markup Html dei Css Image Sprites

Css Image Sprites: Css

Di contro le indicazioni dei Css possono risultare un po’ più fastidiose. Sia il div contenitore che l’elenco non ordinato non nascondono nessun trabocchetto. Come anche gli stessi li che oltre ad essere di larghezza (width) e altezza (heght) pari 24px. Si dispongono affiancati su un’unica riga grazie alla proprietà display: inline-block. Così la vera difficoltà sta nella gestione dello sfondo di ogni li. Lavoro egregiamente compiuto dalla proprietà background, quando richiama la url dell’Image Sprite. E da quella background-position che invece aiuta a scegliere l’icona giusta per ogni li. Entrambe proprietà che definiscono da sole le 4 classi: Facebook, Twitter, Instagram e Carrello. Vediamo come.

L’Image Sprite non è altro che una tabella (matrice) 4 x 2. 4 colonne e 2 righe. Ogni riquadro all’interno della tabella è di 24px x 24px. Quindi in tutto la nostra Image Sprite è di width 96px e height 48px. Di conseguenza scorrendo su ogni riga ogni 24px cambia un’icona. Stesso discorso avviene se si scorre lungo le 4 colonne.

Perciò a seguito di questo ragionamento e guardando la nostra Image Sprite abbiamo le icone nelle seguenti posizioni:

  • Facebook (posizione 0 0);
  • Twitter (background-position: -24px 0 );
  • Instagram (background-position: -48px 0 );
  • Carrello (background-position: -72px 0 );

dove la posizione e data da due valori. Il primo per l’asse delle x e il secondo per l’asse y. Perciò la prima icona si trova esattamente nel punto “0 0” dell’Image Sprite e occupa uno spazio di 24 x 24px. Per avere l’immagine dell’icona successiva è necessario spostarsi a destra all’interno dell’Image Sprite. Perciò la posizione diviene negativa.

Per definire il backgroud-position del rollover basta far variare allo stesso modo anche il valore y:

  • Facebook:hover (background-position: 0 -24px);
  • Twitter (background-position: -24px -24px );
  • Instagram (background-position: -48px -24px );
  • Carrello (background-position: -72px -24px );

Ed il gioco è fatto. Come mostra l’immagine qui sotto relativa ai Css Image Sprites.

Foglio di stile dei Css Image Sprites

Proprietà Background Position dei Css Image Sprites

Css Image Sprites: Quando e per chi usarli?

I Css Image Sprites dovrebbero essere utilizzati ogni qualvolta abbiamo un’immagine che fa parte integrante o marginale del layout della pagina Web. Al fine di rendere la vita più facile ai browser. Inoltre i Css Image Sprites sono una tecnica abbondantemente consolidata nel tempo. Pertanto risulta essere compatibile con la stragrande maggioranza dei vecchi browser. Quindi si usano i Css Image Sprites per icone, sfondi, ribbon (se ancora qualcuno li usa). Come dicevamo, un po’ per tutte le parti grafiche di una pagina web. Per tutte le immagini .png

Di contro non si usano i Css Image Sprites per quelle immagini che vogliamo indicizzare o meglio ancora per quelle immagini che vogliamo che siano di evidenza per post, condivisioni sui social media, etc. Cioè tutte le immagini .jpg

I Css Image Sprites vengono utilizzati per facilitare il lavoro dei browser. Quindi apparentemente appartengono a quelle best practice tipiche da motori di ricerca come Google. Ma in effetti questo è parzialmente vero. Infatti se da un lato è esatto sostenere che Google, ad esempio, preferisca i Css Image Sprites. Poiché migliorano il rendimento relativo di una pagina Web. Misurato con Google PageSpeed Insights. Dall’altro lato è anche vero che usare i Css Image Sprites è utile anche per gli stessi utenti. I quali vedono i tempi di caricamento del layout di pagina ridotti sensibilmente. Fatto questo che sicuramente migliora la navigabilità e l’esperienza stessa del visitatore. Esperienza che viene esaltata ulteriormente se si accosta alla tecnica dei Css Image Sprites quella della giusta logica di caricamento dei contenuti della pagina. Allora si inizia a rendere veramente felici sia Google che anche i visitatori più esigenti e pignoli.

Categoria:
Argomenti del post:

CssHtmlTips & Tricks

Ricerca altri contenuti
Lascia un commento:

Powered by Google+ Comments

Privacy & Cookies Policy

Questo sito raccoglie dati statistici anonimi sulla navigazione, mediante cookie, nel rispetto della tua privacy e dei tuoi dati

Accetta

Privacy Policy