Sprites: meer met afbeeldingen, of juist minder. – Technische SEO
Sprites zijn een manier om afbeeldingen te vertonen op je website.
Sprites gebruik je voor de optimalisatie van je plaatjes en dus website.. Het wel of niet gebruiken van sprites is een onderdeel van SEO, maar wel de technische kant ervan.
In deze blog laat ik je zien hoe je het aantal requests wegens het gebruik van afbeeldingen kunt verminderen. Een manier om dat te doen is door gebruik te maken van Sprites.
Een plaatje vertonen met behulp van Sprites is pas echt leuk als je zo’n plaatje slechts gedeeltelijk vertoont en dat behandel ik dus ook.
We pellen Sprites af, opdat alles goed te volgen is.
Het belang van afbeeldingen op je website
Afbeeldingen op je website hebben één of meer functies:
- esthetisch; ze zijn mooi. Bijvoorbeeld de natuurplaatjes die je ziet op pagina’s. Deze plaatjes zijn niet noodzakelijkerwijze van belang voor de pagina
- afbeeldingen laten zien wat je beschrijft, bijvoorbeeld een produktplaatje
- afbeeldingen verduidelijken je verhaal door een versimpelde visuele weergave (infographics bijvoorbeeld de gele borden op het station of een handleiding van een IKEA-kast)
- je kunt gevonden worden op je afbeeldingen (SEO voor image-search)
- herkenbaarheid van je merk (bijv. logo of huisstijl)
- call to action (User Experience): je klant aanzetten tot een actie die jij wilt (bijvoorbeeld een opvallende button met tekst laatste kans).
Afbeeldingen hebben ook nadelen.
- Een plaatje vertraagt het laden van de website. De laadsnelheid van afbeeldingen bestaat uit verschillende onderdelen. De bekendste vertragende factor is natuurlijk de grootte (in Mb’s) van het plaatje.
- Maar ook het aantal afbeeldingen is van belang hierbij. Elk afzonderlijk plaatje levert een uitvraag op van de server van de website-bezoeker aan de server waar je website gehost staat (request).
- Je website-bezoekers komen met verschillende apparaten op je website en dus ook met verschillende afmetingen van schermen. Dat betekent dat de afbeeldingen niet altijd op een scherm passen of dat de site opeens heel vreemd eruit ziet (nadeel). Oplossing: Je moet dus zorgen dat zowel je site als je afbeeldingen mobiel-vriendelijk zijn. Afbeeldingen mobiel-vriendelijk maken kan door:
- afbeeldingen relatief maken: ze te laten vergroten en te verkleinen, afhankelijk van het gebruikte scherm.
- gebruik te maken van een image source set <img srcset> of <picture> of css-optimalisatie van afbeeldingen, waarbij je een ander plaatje vertoont bij een andere schermafmeting.
- Afbeeldingen kunnen ook zorgen voor een overkill, waardoor je afbeeldingen het doel dat je voor ogen hebt met de website tegenwerken (User Experience).
Hoe je je plaatjes vervolgens op je website weergeeft hangt af van je doel met dat specifieke plaatje. Zo heb ik al eens geschreven over een image-map (voorbeeld zie je hiernaast, het plaatje “Online Marketing volgens JXR SEM” is klikbaar op de verschillende elementen, terwijl het toch slechts één plaatje is).
Wat zijn Sprites?
Een Sprite is een term in computergraphics en heeft betrekking op een tweedimensionale afbeelding of animatie die een geïntegreerd deel uitmaakt van een groter geheel (in dit geval de gehele grafische beeldweergave). (bron: https://nl.wikipedia.org/wiki/Sprite_(computer))
Makkelijker gezegd; met Sprites plak je verschillende afbeeldingen aan elkaar tot één groot plaatje. Meestal doe je dat in een tekenprogramma, maar je kunt het dus ook met een code doen. De plaatjes gaan naadloos in elkaar op, zonder dat je als bezoeker ziet dat het geplakt is.
Of je zo’n Sprite nu beter kunt maken in een tekenprogramma maakt of met een code, hangt af van je site, wensen en vaardigheden. In beide gevallen kun je voordeel van deze blog hebben, dus lees vooral verder.
Wat zijn de voordelen van Sprites?
- Door het combineren van plaatjes tot één Sprite (bijvoorbeeld: je combineert zoveel mogelijk afbeeldingen op je website / webshop in de achtergrond tot één Sprite), verlaag je het aantal http-requests waardoor je site sneller is.
Gemakkelijker gezegd: voor elk plaatje op je site moet je pc / tablet / smartphone een verzoek uitsturen dat te downloaden (= http-request). Zo’n verzoek kost tijd voordat die uitgevoerd kan worden. - Je kunt ervoor zorgen dat afbeeldingen niet in zijn geheel hoeven te laden, maar één voor één laden. Hoe? Door grotere plaatjes op te knippen en vervolgens weer aan elkaar te plakken via een sprite.
Klinkt bekend? Klopt, dit is eigenlijk een wat achterhaalde reden, want nu kun je dat gemakkelijk regelen via lazy-loading. Hiervoor zou ik het dus niet toepassen als je ook lazy-loaden kunt toepassen, want dan heb je eerder de lasten dan voordelen van Sprites. - Het is ideaal voor een stappenplan. Telkens als je een extra stap laat zien (bijvoorbeeld: als ik het plaatje hiernaast per onderdeel zou opbouwen tot het gehele plaatje), dan kun je het bestaande plaatje aanvullen met een extra plaatje. In plaats van dat de site een geheel nieuw plaatje moet downloaden, hoef je nu maar een klein gedeelte van de afbeelding extra te downloaden.
- Sprites kunnen heel handig zijn voor een schaalbare site, waarbij je zelf wilt bepalen wat je bezoeker te zien krijgt als het beeld vergroot of verkleind wordt. Het is hiermee een alternatief voor een image-sourceset.
Wat zijn de nadelen van Sprites?
- Voor je SEO lijken Sprites niet altijd lekker te werken. Je moet het dus wel op de juiste momenten toepassen.
- Sprites gemaakt met code. Je maakt wel visueel een nieuw plaatje, maar technisch blijven het verschillende afbeeldingen. Je kunt dus moeilijk tags ophangen aan het nieuwe plaatje. Derhalve moet je kiezen of je bij Sprites een klein gedeelte wilt optimaliseren of dat je geen afbeeldingen waarop je gevonden wilt worden gebruikt in de vorm van Sprites.
- Sprites gemaakt met een tekenprogramma. Hiervoor geldt hetzelfde maar net omgekeerd. Je laat een gedeelte zien van het grotere geheel. Dat gedeelte kun je dus niet goed optimaliseren, want uiteindelijk is het één groot plaatje.
- Het kan best lastig zijn een Sprite goed werkend te krijgen, dus het kost wat werk. De hulp van een generator (zie hieronder) is dan ook aan te raden.
- Als je je plaatje responsive wilt maken dan kom je voor de keuze om hetzij verschillende Sprites te maken voor de verschillende formaten schermen en / of de afzonderlijke plaatjes te schalen. Wil je het gehele plaatje schalen, dan kun je mogelijk gemakkelijker alles via een normaal tekenprogramma aan elkaar plakken.
- Niet alle browsers ondersteunen Sprites. Je hebt het dan wel over het algemeen over behoorlijk oude browsers.
Welke afbeeldingen gebruik je voor Sprites?
Dat is uiteraard afhankelijk van je doel. Voor deze blog is het doel van Sprites het aantal http-requests te doen afnemen. Als je doel is minder http-requests te doen dan kun je qua afbeeldingen het beste kiezen voor:
- afbeeldingen die je gebruikt voor de achtergrond, of afbeeldingen die je makkelijk in de achtergrond kunt plaatsen.
- afbeeldingen die je voor meer pagina’s gebruikt (anders is het veel werk voor minder resultaat).
- stijlelementen lenen zich hier ook goed voor. Helemaal als je bij die stijlelementen ook nog gebruik maakt van hoover, active en inactive.
- plaatjes die geen SEO-optimalisatie behoeven, want zoals geschreven, dat werkt niet goed hierop.
- in plaats van één Sprite kun je natuurlijk ook meer Sprites maken en per pagina of div beslissen welke Sprite je wilt gebruiken (bijv. drie Sprites: pagina, blog, product).
Hoe maak je Sprites?
Zoals we al zagen zijn er twee manieren om sprites te maken:
- In een tekenprogramma plak je de afzonderlijke afbeeldingen aan elkaar en slaat het geheel op als nieuw plaatje. Die upload je.
- Als je een Sprite maakt met code, dan kun je dat het gemakkelijkste doen door gebruik te maken van een Sprite-generator. Een Sprite-generator maakt de code voor een groot deel al goed voor je aan.
- Ga naar: https://www.giftofspeed.com/sprite-generator/
- Upload je images die je wilt gebruiken voor je Sprites
- Kies horizontaal of verticaal verbinden
- Bekijk de code en pas waar nodig aan (let op grootte en positie x-as en y-as)
- Plak de css-code in je css-style sheet en op je pagina
Resultaat van de code:css
.sprite {display: inline-block; vertical-align: middle;}
.sprite {background-image: url(sprites/2a5b2640aaa507839221555c7716bacc.png); background-position: left center; background-repeat: no-repeat;}.sprite._1517745126_jpg {background-position: 0 0; width: 450px; height: 300px;}
.sprite.shutterstock_451077043_hero1_jpg {background-position: 0 -301px; width: 2800px; height: 1201px;}
op pagina
<span class=”sprite _1517745126_jpg”></span>
<span class=”sprite shutterstock_451077043_hero1_jpg”></span>
Hoe vertoon je een gedeelte van de Sprites- het croppen?
Het leukste gedeelte van de Sprites is dat je dus wel eerst een geheel plaatje download (met minder requests), maar vervolgens niet alles laat zien van dat plaatje. Je “cropt” (bijsnijden) het plaatje als het ware, maar dus niet echt; met andere woorden je laat alleen dat gedeelte van het totale plaatje zien dat je wilt laten zien en je snijdt de rest van het plaatje virtueel weg. Dat “wegsnijden” doe je dan met behulp van css.
Hoe je dat doet is afhankelijk van je Sprite; gebruik je een Sprite als background-image of als gewone image. In beide gevallen heb je te maken met code op je pagina alsook code in je css-stylesheet (zie verder voor de uitwerking).
Vervolgens kun je je vertoonde plaatje nog verder uitbreiden met bijvoorbeeld link-areas (zie image-map), of hoover (ander plaatje als je met je muis erop gaat) etc.
Sprite croppen als background-image
pagina:
- Je maakt eigenschappen aan voor het onderdeel van het totale plaatje dat je wilt laten zien (zie verder bij css). Dat doe je in een div (als #id of .class)
- Je roept een plaatje op met de kenmerken van de div. Deze plaats je op je pagina waar je het onderdeel van je Sprite (dus plaatje – img) wilt vertonen: <id=”sprite-onderdeel-1″ …
- Vervolgens moet je natuurlijk een plaatje oproepen. Je kunt echter geen leeg plaatje oproepen, dus we moeten een plaatje hiervoor gebruiken. We gebruiken een piepklein transparant plaatje:…
src=”img_trans.gif” width=”1″ height=”1″>
css:
- Nu kunnen we in onze css-stylesheet aangeven wat we hier willen vertonen door de div te definiëren. We beginnen met de afmeting die we willen gebruiken:
- Vervolgens geven we aan welk plaatje gebruikt moet worden
background: url(sprite1.gif) ….
Let op: ik gebruik hiervoor een url! - Tot slot geven we de positie aan vanaf welk punt je het plaatje wil laten zien (x-as:y-as): … 0 0;}
- In zijn totaliteit:
# sprite-onderdeel-1 {
width: 46px;
height: 44px;
background: url(sprite.gif) 0 0;
}
# sprite-onderdeel-1 { width: 46px; height: 44px; …
Sprite “croppen” als niet background-image
Deze methode lijkt sterk op de vorige methode:
Op de pagina:
- We roepen een div op en plaatsen daarin de Sprite en sluiten de div weer af:
<div id=”sprite-onderdeel-1 “>
<img src=”sprite1.gif”></div>
In de css-stylesheet:
- We maken eerst de div op. Hierbij geven we de gewenste maat van het te tonen plaatje weer
# sprite-onderdeel-1 {
width:200px;
height:200px;
… - Aangezien het plaatje groter is dan de div waar die in moet passen, ontstaan er twee scroll-balkjes. Deze willen we natuurlijk niet hebben en dus verbergen we die op de volgende wijze:
overflow:hidden;
… - Rest ons voor de div nog aan te geven dat deze positie relatief (zeg maar, daar waar je die plaats op de pagina) is, zodat het plaatje zelf absoluut kan zijn binnen de div.
position: relative;
} - De div kun je natuurlijk ook verder nog opmaken zoals je gewend bent (bijv. een border).
- De volgende stap is het opmaken van het gedeelte van de Sprite die je zichtbaar wilt hebben. Hiervoor gebruiken we de div-id die we ook voor de div zelf gebruiken, gecombineerd met het bijbehorende plaatje (img):
#sprite-onderdeel-1 img {
… - Je wilt hier exact kunnen weergeven welk gedeelte van het plaatje getoond wordt. Dus neem je hier absolute waarden op, die altijd gelden.
position: absolute;
…. - Tot slot geef je de coördinaten op van waaruit het plaatje opgebouwd moet worden.
…
top: -50px;
left: 0px;
} - In zijn totaliteit heb je dan qua code:
#s sprite-onderdeel-1{
width:200px;
height:200px;
overflow:hidden;
position: relative;
}
# sprite-onderdeel-1 img {
position: absolute;
top: -100px;
left: -100px;
}