Wat zijn CSS-sprites?

CSS-sprites zijn een optimalisatiemethode waarmee meerdere afbeeldingen in één grote afbeelding kunnen worden samengevoegd. In plaats van elke afbeelding afzonderlijk te laden, laadt de browser één groot bestand en gebruikt vervolgens de CSS-eigenschappen background-image, background-position en width/height om het benodigde deel van die afbeelding weer te geven.

Voordelen van het gebruik van CSS-sprites:

• Vermindering van het aantal HTTP-verzoeken: Het laden van één bestand in plaats van veel vermindert de belasting op de server en versnelt de weergavetijd van de pagina.
• Caching: Een groot beeld wordt door de browser gecachet, wat de prestaties bij herhaalde bezoeken verbetert.
• Vermindering van de bestandsgrootte: In sommige gevallen kan het samenvoegen van afbeeldingen leiden tot een lichte vermindering van de totale bestandsgrootte dankzij optimalisatie van compressie.

Voorbeeld van gebruik (HTML):

<div class="icon home"></div>
<div class="icon settings"></div>

Voorbeeld van gebruik (CSS):

.icon {
  width: 32px; /* Breedte van het pictogram */
  height: 32px; /* Hoogte van het pictogram */
  background-image: url('sprites.png'); /* Pad naar het sprite-bestand */
  background-repeat: no-repeat;
}

.icon.home {
  background-position: 0 0; /* Positie van het "home"-pictogram in de sprite */
}

.icon.settings {
  background-position: -32px 0; /* Positie van het "settings"-pictogram in de sprite */
}

In dit voorbeeld is sprites.png het bestand dat de iconen "home" en "settings" bevat. De eigenschap background-position bepaalt de verschuiving om het gewenste pictogram weer te geven.