Hoe worden CSS-sprites geïmplementeerd op een pagina…

CSS-sprites zijn een techniek om meerdere afbeeldingen samen te voegen tot één grote afbeelding. Dit wordt gedaan met CSS, waarbij de zichtbaarheid van het benodigde fragment van de grote afbeelding wordt geregeld via de eigenschappen background-image, background-position en background-repeat.

Voordelen:

Vermindering van het aantal HTTP-verzoeken. In plaats van meerdere kleine afbeeldingen te laden, wordt één grote geladen.
Versnelling van het laden van de pagina. Minder verzoeken naar de server, snellere rendering.
Besparing op dataverkeer. De totale bestandsgrootte is vaak kleiner dan de som van de afzonderlijke afbeeldingen.

Implementatie:

Maken van de sprite: Afbeeldingen samenvoegen met grafische editors of speciale online tools/compilers (bijvoorbeeld Webpack met de plugin css-spritesmith-plugin).

CSS: Voor elementen die afbeeldingen uit de sprite gebruiken, worden de volgende stijlen toegepast:

.icon {
  background-image: url('path/to/sprite.png'); /* Pad naar het sprite-bestand */
  background-repeat: no-repeat; /* Afbeelding wordt niet herhaald */
  display: block; /* of inline-block, afhankelijk van het element */
  width: 32px; /* Breedte van het benodigde icoon */
  height: 32px; /* Hoogte van het benodigde icoon */
}

.icon-home {
  background-position: 0 0; /* Positie van het benodigde fragment van het "Home"-icoon */
}

.icon-settings {
  background-position: -32px 0; /* Positie van het benodigde fragment van het "Instellingen"-icoon */
}

In de gegeven CSS-code definieert .icon de algemene eigenschappen voor alle elementen die de sprite gebruiken. Klassen zoals .icon-home en .icon-settings bepalen de specifieke positie van het benodigde beeld binnen de sprite met behulp van background-position.

Hoe worden CSS-sprites geïmplementeerd op een pagina of website?