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<\/strong> (voorbeeld zie je hiernaast, het plaatje “Online Marketing volgens JXR SEM” is klikbaar op de verschillende elementen, terwijl het toch slechts \u00e9\u00e9n plaatje is). Makkelijker gezegd; met Sprites plak je verschillende afbeeldingen aan elkaar tot \u00e9\u00e9n groot plaatje.<\/strong> 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. css<\/strong> .sprite._1517745126_jpg {background-position: 0 0; width: 450px; height: 300px;} op pagina<\/strong> 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.<\/strong> 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. 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. css:<\/strong><\/p>\n 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 … Lees verder Sprites – Technische SEO<\/span>
\nSprites zijn een manier om afbeeldingen te vertonen op je website.
\nSprites gebruik je voor de optimalisatie van je plaatjes en dus website.<\/strong>. Het wel of niet gebruiken van sprites is een onderdeel van SEO, maar wel de technische kant ervan.<\/a>
\nIn deze blog laat ik je zien hoe je het aantal requests<\/a> wegens het gebruik van afbeeldingen kunt verminderen.<\/strong> Een manier om dat te doen is door gebruik te maken van Sprites.
\nEen plaatje vertonen met behulp van Sprites is pas echt leuk als je zo’n plaatje slechts gedeeltelijk vertoont en dat behandel ik dus ook.
\nWe pellen Sprites af, opdat alles goed te volgen is.
<\/p>\nHet belang van afbeeldingen op je website<\/h2>\n
\nAfbeeldingen op je website hebben \u00e9\u00e9n of meer functies:<\/strong><\/p>\n\n
Afbeeldingen hebben ook nadelen.<\/h2>\n
\n
\n
\n
<\/p>\nWat zijn Sprites?<\/h2>\n
\nEen Sprite is een term in computergraphics en heeft betrekking op een tweedimensionale afbeelding of animatie die een ge\u00efntegreerd deel uitmaakt van een groter geheel (in dit geval de gehele grafische beeldweergave). (bron: \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t https:\/\/nl.wikipedia.org\/wiki\/Sprite_(computer)<\/a>)
<\/p>\n
\nOf je zo’n Sprite nu beter kunt maken in een tekenprogramma maakt of met een code, hangt af van je site, wensen en vaardigheden.<\/strong> In beide gevallen kun je voordeel van deze blog hebben, dus lees vooral verder.
<\/p>\nWat zijn de voordelen van Sprites?<\/h2>\n
\n\n
\nGemakkelijker 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.<\/li>\n
\nKlinkt bekend? Klopt, dit is eigenlijk een wat achterhaalde reden, want nu kun je dat gemakkelijk regelen via lazy-loading<\/strong>. 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.<\/li>\n
\nWat zijn de nadelen van Sprites?<\/h2>\n
\n\n
\n
\nWelke afbeeldingen gebruik je voor Sprites?<\/h2>\n
\nDat is uiteraard afhankelijk van je doel. Voor deze blog is het doel van Sprites het aantal http-requests te doen afnemen.<\/strong> Als je doel is minder http-requests te doen dan kun je qua afbeeldingen het beste kiezen voor:<\/p>\n\n
\nHoe maak je Sprites?<\/h2>\n
\nZoals we al zagen zijn er twee manieren om sprites te maken:<\/p>\n\n
\n
\nResultaat van de code:<\/p>\n
\n.sprite {display: inline-block; vertical-align: middle;}
\n.sprite {background-image: url(sprites\/2a5b2640aaa507839221555c7716bacc.png); background-position: left center; background-repeat: no-repeat;}<\/span>
<\/p>\n
\n.sprite.shutterstock_451077043_hero1_jpg {background-position: 0 -301px; width: 2800px; height: 1201px;}
\n<\/span>
<\/p>\n
\n<span class=”sprite _1517745126_jpg”><\/span>
\n<span class=”sprite shutterstock_451077043_hero1_jpg”><\/span>
\n<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\nHoe vertoon je een gedeelte van de Sprites- het croppen?<\/h2>\n
\nHoe je dat doet is afhankelijk van je Sprite; gebruik je een Sprite als background-image of als gewone image.<\/strong> In beide gevallen heb je te maken met code op je pagina alsook code in je css-stylesheet (zie verder voor de uitwerking).
<\/p>\n
<\/p>\nSprite croppen als background-image<\/h2>\n
\npagina:<\/strong><\/p>\n\n
\nsrc=”img_trans.gif” width=”1″ height=”1″><\/span><\/li>\n<\/ul>\nNu kunnen we in onze css-stylesheet aangeven wat we hier willen vertonen door de div te defini\u00ebren. We beginnen met de afmeting die we willen gebruiken:
\n# sprite-onderdeel-1 { width: 46px; height: 44px; …<\/span><\/p>\n
\nbackground: url(sprite1.gif) ….<\/span>
\nLet op: ik gebruik hiervoor een url!<\/li>\n
\n# sprite-onderdeel-1 {
\nwidth: 46px;
\nheight: 44px;
\nbackground: url(sprite.gif) 0 0;
\n}<\/span><\/li>\n<\/ul>\n
\nSprite \u201ccroppen\u201d als niet background-image<\/h2>\n
\nDeze methode lijkt sterk op de vorige methode:
\nOp de pagina:<\/strong><\/p>\n\n
\n<div id=”sprite-onderdeel-1 “>
\n<img src=”sprite1.gif”><\/div><\/span><\/li>\n<\/ul>\n
\nIn de css-stylesheet:<\/strong><\/p>\n\n
\n# sprite-onderdeel-1 {
\nwidth:200px;
\nheight:200px;
\n…<\/span><\/li>\n
\noverflow:hidden;
\n…<\/span><\/li>\n
\nposition: relative;
\n}<\/span><\/li>\n
\n#sprite-onderdeel-1 img {
\n…<\/span><\/li>\n
\nposition: absolute;
\n….<\/span><\/li>\n
\n…
\ntop: -50px;
\nleft: 0px;
\n}<\/span><\/li>\n
\n#s sprite-onderdeel-1{
\nwidth:200px;
\nheight:200px;
\noverflow:hidden;
\nposition: relative;
\n}
\n
\n# sprite-onderdeel-1 img {
\nposition: absolute;
\ntop: -100px;
\nleft: -100px;
\n}<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"