Il concetto di sprite esiste da un po 'di tempo. È una delle tecniche più comunemente utilizzate nell'industria dei giochi per accelerare il processo di visualizzazione delle animazioni su uno schermo. In questo articolo, vedremo in particolare come questa tecnica può aiutarci a migliorare l'esperienza dell'utente sulle pagine web con l'aiuto di CSS Sprites nel seguente ordine:
- Cos'è uno sprite?
- Cos'è CSS Sprite: una rapida panoramica?
- Esempio di come aiuta nello sviluppo web?
- Vantaggi dell'utilizzo di CSS Sprites
- Cosa deve fare uno sviluppatore quando lavora con CSS Sprites?
- Come creare un foglio CSS Sprite?
- Come lavorare con CSS Sprites?
- Aziende che utilizzano CSS Sprites
Cos'è uno sprite?
Uno sprite è una singola immagine che fa parte di una scena più grande in un gioco. Più sprite vengono quindi combinati in una grande immagine chiamata foglio sprite. Una volta che un foglio sprite viene caricato nella memoria, diversi sprite vengono renderizzati in rapida successione per dare l'illusione dell'animazione. Questo viene fatto simultaneamente da decine a centinaia di sprite diversi per generare una scena nel gioco.
L'idea di base è che è molto più veloce caricare un'immagine e visualizzarne una parte laddove richiesto rispetto al caricamento di più immagini e visualizzarle.
Che cos'è CSS Sprite: una rapida panoramica?
Uno sprite CSS è una tecnica che viene spesso utilizzata dagli sviluppatori web per ottimizzare le prestazioni delle pagine web. In questa tecnica, più immagini più piccole solitamente delle stesse dimensioni vengono combinate in un'unica grande immagine chiamata a foglio sprite o set di piastrelle . Questo foglio sprite viene quindi utilizzato per visualizzare i singoli elementi ovunque ne abbiamo bisogno.
Di solito, elementi come loghi, frecce di navigazione, pulsanti sono inclusi nel foglio sprite poiché hanno quasi le stesse dimensioni e sono usati frequentemente in una pagina web.
Esempio di come aiuta nello sviluppo web?
In genere, durante la progettazione di pagine Web, le immagini vengono archiviate e utilizzate come singoli file. Quindi, quando un utente apre una pagina web, il browser deve effettuare una richiesta HTTP per ciascuno di questi file, scaricarli separatamente e visualizzarli. Ciò porta a tempi di caricamento della pagina più elevati poiché una determinata pagina Web può avere un gran numero di immagini più piccole come pulsanti, icone, loghi.
Gli sprite CSS aiutano gli sviluppatori a combinare queste piccole immagini usate di frequente in un'unica grande immagine. Il browser deve quindi scaricare solo un file che viene poi utilizzatovisualizzare la sezione richiesta sfalsando l'immagine.
Vantaggi dell'utilizzo di CSS Sprites
Ci sono due principali vantaggi nell'usare gli sprite CSS rispetto alle immagini normali:
Caricamento della pagina più veloce: Migliora il tempo di caricamento della pagina poiché le immagini utilizzate nella pagina web vengono visualizzate non appena il foglio viene scaricato.
Maggiore produttività e minore utilizzo delle risorse: Non solo questa tecnica migliora l'esperienza dell'utente finale rendendo più veloce il caricamento della pagina,ma riduce anche la congestione della rete in quanto viene effettuato un numero inferiore di richieste HTTP.
Cosa deve fare uno sviluppatore quando lavora con CSS Sprites?
Quando si lavora con singole immagini, lo sviluppatore può semplicemente lavorare con il tag HTML e lo stile in CSS, se necessario. Ma quando si lavora con CSS Sprites, uno sviluppatore deve fare due cose specifiche:
- Creazione del foglio sprite
Durante lo sviluppo di una pagina web, se lo sviluppatore decide di utilizzare gli sprite CSS, deve prima creare il foglio sprite unendo tutti gli elementi desiderati come pulsanti, loghi, ecc. In uno schema a griglia. Questo può essere fatto utilizzando qualsiasi programma di modifica delle immagini come Photoshop o Gimp. Sono disponibili anche molti strumenti online che ti aiutano a creare il foglio sprite. Questi strumenti vengono discussi più avanti in questo articolo.
- Accedi a un particolare elemento dello sprite usando il Posizione di sfondo CSS proprietà
Una volta che il foglio sprite è pronto, lo sviluppatore deve quindi utilizzare gli attributi CSS per accedere alle diverse parti del foglio.
- larghezza: Larghezza dello sprite
- altezza: Altezza dello sprite
- sfondo: Riferimento al foglio sprite
- Posizione sfondo: Valori di offset (in pixel) per accedere solo alla parte richiesta del foglio sprite
Come creare un foglio CSS Sprite?
È possibile utilizzare qualsiasi software di modifica delle immagini per disporre le immagini più piccole in una griglia, ma di seguito vengono descritti due metodi più semplici:
1. Strumento di creazione di fogli sprite online
LINK: toptal.com/developers/css/sprite-generator/
Questo strumento non solo è gratuito, ma fornisce anche il codice CSS richiesto che può essere utilizzato mentre si fa riferimento al foglio sprite. Inoltre, puoi giocherellare con diverse proprietà come il riempimento tra gli elementi e la modifica del loro allineamento.
2. Generare Sprite Sheet con Sprity
Se stai usando Grunt, Node o Gulp, puoi installare un pacchetto chiamato Sprity che ti aiuterà a creare un foglio sprite in una varietà di formati come PNG, JPG, ecc.
Innanzitutto, dovrai installare Sprity utilizzando:
npm installa sprity -g
Quindi, per generare il foglio sprite, usa il seguente comando:
sprity ./output-directory/ ./input-directory/*.png
Come lavorare con CSS Sprites?
In questo esempio, useremo il seguente foglio sprite:
Come puoi vedere nell'immagine sopra, sei icone (Instagram, Twitter e Facebook) sono state disposte secondo uno schema a griglia. Nella prima riga, abbiamo uno stato normale e nella seconda riga, abbiamo il loro stato al passaggio del mouse (l'immagine che appare una volta che posizioniamo il cursore del mouse su di essi).
Se hai creato il foglio sprite utilizzando gli strumenti di cui abbiamo discusso sopra, allora conosci già gli offset richiesti nel CSS ma se hai usato qualche altro strumento o ti è stato semplicemente dato un foglio sprite, non preoccuparti, discuteremo un metodo che ti aiuterà a ottenere gli offset per l'elemento richiesto.
Vediamo ora un modo molto semplice per ottenere gli offset richiesti per ciascuna delle sei icone utilizzando MS Paint. Potrebbe non essere una soluzione ideale per lavorare con gli sprite, ma poiché ha la funzione che fornisce le coordinate del cursore del mouse, può essere utilizzata per ottenere le coordinate X e Y richieste.
Per prima cosa, apri l'immagine del foglio sprite (la griglia contenente tutte le immagini più piccole) e porta il cursore del mouse nell'angolo in alto a sinistra dello sprite che vuoi catturare.
Una volta che hai le coordinate del punto in alto a sinistra del tuo sprite (immagine Instagram in alto a sinistra), puoi visualizzare questo sprite specifico dove richiesto utilizzando il codice CSS:
background: url ('img_sprites.png')
background-position: 0 0
larghezza: 125 px
altezza: 125 px
Usiamo larghezza e altezza pari a 125 pixel poiché le nostre icone sono di quella dimensione. Per recuperare l'immagine successiva (Twitter) nella stessa riga, utilizziamo il codice seguente:
background: url ('img_sprites.png')
background-position: -128px 0px
larghezza: 125 px
altezza: 125 px
Nota l'attributo background-position nello snippet sopra. (-128px, 0) significa che stiamo spostando il nostro foglio sprite a sinistra di 128 pixel (tenendo conto del riempimento tra gli elementi) e 0 pixel sull'asse Y. Se dovessimo accedere all'icona hover di Twitter, il nostro attributo background-position sarebbe:
background-position: -128px -128px
In questo modo, ora possiamo accedere a ogni componente del nostro foglio sprite usando i CSS. Esaminiamo un codice HTML e CSS completo su come farlo.
Passo 1: Scrittura del codice HTML richiesto
Nel codice seguente, stiamo semplicemente aggiungendo tre collegamenti. Inoltre, collegheremo il nostro codice HTML al foglio di stile (screen.css).
passa per valore e passa per riferimento java
Passo 2: Scrivere il CSS necessario. Per prima cosa, modelleremo la nostra classe di icone condivise. Qui puoi vedere che ci riferiamo al foglio sprite che abbiamo creato.
/ * Icona condivisa Classe * /
span.icon un collegamento,
span.icon a: visitato{
Schermo:bloccare
indentatura del testo:-9999px
immagine di sfondo: url (./ img_sprites.png)
ripetizione in background:nessuna ripetizione
}
Passaggio 3: ottenere le singole icone dal foglio sprite utilizzando gli offset.
/ * Icona Instagram * /
span.instagram un collegamento,
span.instagram a: visitato{
larghezza:125px
altezza:125px
background-position:0 0
}
/ * Icona Twitter * /
span.twitter un collegamento,
span.twitter a: visitato{
larghezza:125px
altezza:125px
background-position:-128px 0
}
/ * Icona Facebook * /
span.facebook un collegamento,
span.facebook a: visitato{
larghezza:125px
altezza:125px
background-position:-257px 0
c ++ unire il codice di ordinamento
}
Passaggio 4: Ottenere le icone al passaggio del mouse dal foglio sprite utilizzando gli offset.
span.instagram a: hover{background-position:0 -128px}
span.twitter a: hover{background-position:-128px -128px}
span.facebook a: hover{background-position:-255px -128px}
Aziende che utilizzano CSS Sprites
Molti grandi nomi del settore utilizzano CSS Sprites per migliorare la reattività dei loro siti web. Aziende come Google, Facebook, Amazon utilizzano ampiamente questo metodo in quanto ciò le aiuta a ridurre il numero di richieste HTTP per sessione per un particolare utente. Questo è un enorme vantaggio se teniamo conto del fatto che queste aziende servono milioni di clienti in un dato momento.
Ora che hai una presa su cosa sono gli sprite CSS e su come lavorarci, sei un passo avanti nel tuo viaggio per imparare i CSS. Concetti come gli sprite sono un punto di svolta nel tempo di oggi poiché è diventato estremamente importante per gli sviluppatori estrarre ogni bit di performance da una pagina web.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore, menzionalo nella sezione commenti del blog 'Immagini HTML' e ti risponderemo.