Een image sprite combineert gecombineerde afbeeldingen in een enkel afbeeldingsbestand. Het voordeel van het gebruik van een image sprite is dat er minder HTTP-verzoeken hoeven te worden gedaan, wat de prestaties van een webpagina kan verbeteren.
Als je een image sprite gebruikt, worden de afzonderlijke afbeeldingen gecombineerd tot één bestand en vervolgens met CSS weergegeven op een webpagina. De CSS-code vertelt de browser waar elke afbeelding in het bestand moet worden weergegeven. Image sprites kunnen voor elke afbeelding worden gebruikt, inclusief pictogrammen, knoppen en achtergronden.
Hoe maak je een Image Sprite?
Om een image sprite te maken, heb je twee afbeeldingen nodig die je wilt combineren tot één afbeelding. Je kunt dit doen met fotobewerkingssoftware, maar wij raden Photoshop aan.
Zodra je je twee afbeeldingen hebt, open je ze allebei in Photoshop. Selecteer vervolgens het menu 'Laag' en klik op 'Nieuw'. Dit maakt een nieuwe laag aan die je de naam kunt geven die je wilt. Wij noemen het 'Sprite'.
Sleep nu een van de afbeeldingen op de laag 'Sprite'. Gebruik het verplaatsgereedschap om de afbeelding zo te plaatsen dat deze de andere afbeelding volledig bedekt. Selecteer vervolgens het gereedschap 'Gum' en gum alle uitstekende delen van de eerste afbeelding weg.
Selecteer ten slotte het menu 'Bestand' en klik op 'Opslaan als'. Kies een bestandsnaam en formaat voor je nieuwe spriteafbeelding!
Voordelen van het gebruik van een Image Sprite
Afbeelding sprites zijn een geweldige manier om de prestaties van je website te verbeteren. Ze kunnen helpen het aantal HTTP-verzoeken te verminderen, de grootte van je pagina's te verkleinen en de algehele snelheid van je site te verbeteren.
Afbeelding sprites hebben veel voordelen, maar deze drie zijn enkele van de belangrijkste. Als je de prestaties van je site wilt verbeteren, is het gebruik van sprites een goed begin.
Conclusie
Een image sprite is een verzameling afbeeldingen gecombineerd in een enkel bestand. Ze worden vaak gebruikt in webdesign om de prestaties van pagina's te verbeteren door het aantal HTTP-verzoeken te verminderen dat nodig is om een pagina te laden. Een andere geweldige manier om sprites te gebruiken is om een responsieve lay-out te maken. Dit betekent dat je al je afbeeldingen als één afbeelding maakt en vervolgens de grootte en positie aanpast aan een bepaald apparaat.
