Uso degli sprite sheet per ridurre le richieste al web server

Una pagina web può richiedere diverse immagini o icone. Per ciascuna di esse è necessaria una specifica richiesta al web server e ciò può rallentare il caricamento della pagina, soprattutto in presenza di una rete non performante.

Una tecnica per ottimizzare il caricamento delle immagini, ma soprattutto delle icone, è quella di impiegare gli sprite sheet.

Uno sprite sheet è costituito da un’unica immagine che contiene più icone o elementi grafici disposti in una griglia o in una sequenza. Invece di richiedere al web server ogni icona, si richiede un solo file (lo sprite sheet) e poi si mostra sulla pagina solo la parte desiderata tramite CSS.

Un ulteriore vantaggio di questa tecnica, oltre alla già citata riduzione di chiamate http al server è anche quello della compatibilità con i browser più vecchi, che non supportano immagini SVG o icon fonts (va altresì detto che l’utilizzo di SVG e icon fonts rappresentano una valida alternativa agli sprite sheet per i browser più moderni).

Utilizzo dello sprite sheet

Per visualizzare una singola icona presente in uno sprite sheet, si crea un elemento <div> grande quanto una singola icona, si inserisce lo sprite sheet come background-image e poi si trasla lo sprite sheet tramite la proprietà backgroud-position:

.icon-home {
  background-image: url('sprite.png');
  background-position: -20px -40px;
  width: 16px;
  height: 16px;
}

Esempio pratico

Ammettiamo di avere a disposizione lo sprite sheet di figura 1, che contiene una griglia di 5×5 icone della dimensione di 60×60 pixel ciascuna (i lati della griglia sono evidenziati a scopo didattico, in un normale sprite sheet non sono necessari) e di voler creare la pagina di auguri di figura 2, che richiede due delle icone presenti nello sprite sheet.

Ciò che si deve fare è rappresentato graficamente in figura 3, ovvero, ogni qualvolta si deve visualizzare una icona, si crea una finestrella nella pagina web tramite un elemento HTML <div> di appropriate dimensioni (60×60 pixel nell’esempio) e poi, facendo riferimento all’angolo superiore sinistro di tale finestrella, si trasla lo sprite sheet sottostante nelle due direzioni X e Y, in modo da far ricadere nella finestrella l’icona desiderata. Nell’esempio, la prima icona è nella prima riga e ultima colonna dello sprite sheet, perciò sarà suffiente farlo traslare verso sinistra dello spazio corrispondente a quattro icone (240 pixel); la seconda icona è invece nella seconda riga, prima colonna dello sprite sheet, perciò si dovrà traslare lo sprite sheet verso l’alto dello spazio corrispondente a 1 icona (60 pixel).

Di seguito il codice HTML e CSS per realizzare la pagina di esempio.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Festa di Capodanno</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      background-color: #f7f7f7;
      padding: 40px;
    }

    h1 {
      font-size: 2em;
      margin-bottom: 100px;
    }

    .icon {
      background-image: url('images/new-year-icons.jpg'); /* Usa il nome del tuo file */
      background-repeat: no-repeat;
      width: 60px;
      height: 60px;
      display: inline-block;
      margin: 10px;
    }

    /* Icona 1: bottiglia di champagne (riga 1, colonna 5 dello sprite sheet) */
    .icon-champagne {
      background-position: -240px 0;
    }

    /* Icona 2: calici (riga 2, colonna 1 dello sprite sheet) */
    .icon-glasses {
      background-position: 0 -60px;
    }

  </style>
</head>
<body>
  <h1>Buon Anno 2026!</h1>
  <div class="icon icon-champagne" title="Bottiglia di champagne"></div>
  <div class="icon icon-glasses" title="Calici"></div>
</body>
</html>

Sprite animation

L’animazione sprite è una tecnica 2D che utilizza una sequenza di immagini (frame) per creare l’illusione del movimento. In questo caso il termine “sprite” viene utilizzato per indicare le immagini che compongono l’animazione, come personaggi o oggetti. L’animazione viene realizzata mostrando i frame in rapida successione, un po’ come un fumetto sfogliato velocemente.

Le diverse immagini che formano l’animazione vengono inserite in uno sprite sheet, che viene poi animato tramite appositi programmi.

Risorse online per l’attività di Sprite animation

• Freepik mette disposizione alcuni sprite sheet di animazione;
• Sono disponibili online (ricerca Google: jQuery sprite animation) diversi plugin di JQuery per animare uno sprite sheet.

Risorse online

• Il tool Images to Sprite Sheet Generator permette di generare uno sprite sheet a partire dalle icone/immagini disponibili.
• Il tool CSS Sprite Generator permette di creare il codice CSS per gestire uno sprite sheet disponibile.