Minder requests maken

Dit is een techniek die vroeger veel werd gebruikt. Vandaag is deze iets minder populair.

Stel dat je een pagina hebt waar je afbeeldingen van verschillende emoji's wil tonen.

Dan zo je dat op deze manieren kunnen doen:

Standaard manier (Niet geoptimaliseerd)

<div style="background: url('afbeelding_1.png')"></div>
<div style="background: url('afbeelding_2.png')"></div>
<div style="background: url('afbeelding_3.png')"></div>
...

Geoptimaliseerde manier

Met de bovenstaande manier zouden er 3 afbeeldingen apart moeten worden ingeladen. Stel dat je deze 3 afbeeldingen combineert in één afbeelding:

<div style="background: url('gecombineerde_afbeelding.png') 10px 10px"></div>
<div style="background: url('afbeelding_2.png') 20px 20px"></div>
<div style="background: url('afbeelding_3.png') 40px 60px"></div>
...

Door handig gebruik te maken van de offset bij de background property kunnen we het gedeelde dat getoond wordt van de gecombineerde afbeelding manipuleren.

Meer info over de background position vind je hier

Dit wordt niet gebruikt voor échte afbeeldingen op je website maar wel voor bvb: icons.