Diamo uno sguardo più da vicino a uno strumento così interessante come gli sprite CSS. Molti progettisti di layout e webmaster esperti sono ben consapevoli dei vantaggi di questa semplice tecnica. Il lato positivo dell'utilizzo degli sprite è che il tempo di caricamento della pagina viene notevolmente ridotto riducendo il numero di singole immagini. Negli standard di layout moderni, è consuetudine raggruppare piccole icone e immagini a tema in una speciale raccolta di immagini. In poche parole, uno sprite è un'immagine che include una serie di piccole immagini di un tema.

In questo modo, quando raggruppiamo piccole immagini, riduciamo il numero di richieste al server. La nostra pagina carica solo un'immagine invece di 30 piccole. Ciò offre un aumento significativo della velocità di caricamento.

In poche parole: i CSS Sprites sono uno strumento per combinare più immagini in un unico file da utilizzare su un sito Web per migliorare significativamente le prestazioni. Il concetto di Sprite può sembrare un po' fuorviante considerando che stai creando un'immagine di grandi dimensioni invece di lavorare con immagini piccole.

Riassumendo: il termine "sprites" deriva da una tecnica di computer grafica utilizzata più spesso nei videogiochi. L'idea era di archiviare un'immagine in memoria e quindi visualizzarne solo una parte, il che era più veloce del recupero di nuove immagini.

CSS Sprites è praticamente la teoria esatta: ottieni l'immagine una volta, sposta lo sfondo e ne mostra solo parti. Ciò riduce il sovraccarico durante il recupero di più immagini.

Esistono numerosi servizi su Internet per la creazione di sprite. Devi solo digitare la query appropriata in un motore di ricerca. Se sei troppo pigro per cercare, ecco alcune risorse popolari su questo argomento. generatore di sprite toptal, generatore di sprite inettools. Diciamo che hai tagliato il tuo modello, selezionato tutte le piccole icone, creato uno sprite, qual è il passo successivo?

Come utilizzare le icone di uno sprite

Ora diamo un'occhiata alla procedura per lavorare con uno sprite.

• Creiamo ad esempio una classe generale, chiamiamola .sprite, il cui sfondo è questa immagine, che è stata creata utilizzando il generatore sprite.png. Nella stessa classe imposteremo l'altezza e la larghezza, che saranno l'altezza e la larghezza delle icone degli sprite se hanno la stessa dimensione.
• Per i blocchi in cui è necessario utilizzare questa icona, imposta lo spostamento dello sfondo sulla quantità desiderata utilizzando la proprietà CSS background-position. Ulteriori informazioni sugli sfondi nell'articolo precedente.

Esempio:

 30px ;
 altezza: 30px;
 sfondo: url("/assets/img/sprite.png");{{HTML 85}}
 posizione-sfondo: 0 -80px;
}