SEO e realizzazione siti web Udine a misura di PMI

menu x
menu x

CSS Sprite: a cosa servono e come utilizzarli

  • 21 Gennaio 2019
Laura Musig Siti web Udine » Blog SEO » CSS Sprite: a cosa servono e come utilizzarli
Si parla di:
    css-sprite

    Il funzionamento dei css sprite

    Questo post è uno di quegli approfondimenti a metà tra gli articoli che parlano di web design e quelli che parlano di SEO. In altre parole siamo di fronte ad una guida per velocizzare un sito lento a caricare.

    Che cosa sono i css sprite

    Un css sprite è una tecnica di ottimizzazione delle prestazioni di un sito che combina più immagini in una singola immagine chiamata sprite sheet o tile set. Gli sprite riducono la congestione sul server riducendo il numero di richieste (download) necessarie per eseguire rendering di una pagina web.

    In altre parole tutte le immagini vengono compattate in un’unica immagine e quando l’utente tramite il suo browser ne ha richiesta, gli viene restituita la porzione di immagine di cui ha bisogno. Quindi invece di scaricare molte immagini (piccole o grandi) viene scaricata un’unica immagine di grandi dimensioni.

    Gli sprites vengono tipicamente utilizzati per inglobare immagini delle stesse dimensioni (come loghi, bottoni ecc…). Quando un bottone deve essere utilizzato in una pagina web, viene ripescato sullo sprite ed incorniciato sulla pagina nel punto in viene richiesto.

    Questa tecnica oltre a migliorare i tempi di caricamento del sito e quindi la user experience, è apprezzata anche dalle aziende che così evitano a livello di hosting, di vedere utilizzata in maniera inutile parte della loro band width mensile.

    Come creare un Css Sprite

    Le fasi della creazione di un css sprite sono:

    1. Creare un’immagine con una struttura a griglia (il formato PNG potrebbe andare bene)
    2. Posizionarci sopra le immagini da aggregare in un’unica immagine
    3. Creare il css con le classi che definiscono la dimensione di ogni immagine e la sua posizione nell’immagine sprite
    4. Includete nella pagina web un tag img con un’immagine segnaposto che fa riferimento allo sprite CSS tramite ID o classe. Quando la pagina viene caricata, l’immagine segnaposto sarà sostituita dallo sprite.

    Tool per creare un Css Sprite

    La buona notizia è che esistono numerosi siti e tool online per utilizzare le tecniche legate ai css sprite. Cliccate qui per vedere i principali. Esistono anche dei plugin Worpdress che se ne occupano ma le recensioni non promettono nulla di buono!

    Laura Musig SEO UdineLaura Musig

    Web Designer e SEO Freelance a Udine o se preferite web designer SEO. Nel 2001 decisi di sezionare un sito web per vedere cosa c’era dentro, da allora creo e gestisco siti web. Lettrice onnivora, con un fisiologico bisogno di scrivere e di ballare.

    Come diventare SEO:


    Corso SEO

    Ho inoltre raccolto le risorse più utili di questo blog per aiutare chi sta cercando di capire come si diventa SEO Specialist:

    SEOZoom

    Blog SEO e ultime news

    In questa sezione propongo periodicamente approfondimenti a tema SEO e web marketing. Segnalo anche gli ultimi lavori di creazione siti web ad Udine e di posizionamento sui motori di ricerca. 

    Perchè non leggi anche questi post?

    Leggi tutti i post dal mio blog seo