Klein is niet altijd fijn het recht van de kleinste
Je kent het wel. Je krijgt een enorm bestand (laten we zeggen 4 gigabyte) op een USB stick of CD/DVD. Effe kopieren naar je computer. Zo dat gaat best wel snel denk je nog. Vervolgens krijg je iets aangeleverd met honderden of duizenden bestandjes aangeleverd (maar veel minder giga- of megabytes), dat kopiëren duurt vervolgens een uur! Hoe kan iets dat kleiner is aan data langer duren om te kopiëren!
Eenvoudig, een groot bestand verplaatsen is minder werk, dan heel veel bestandjes oppakken en neerzetten. Daar ben je langer mee bezig. Een kartonnen doos is sneller dichtgemaakt dan 100 enveloppen.
Dit principe werkt ook zo voor internet sites. Hoe meer losse iconen, buttons, plaatjes en andere grafische elementjes er aangeroepen worden, hoe trager je pagina wordt. Al deze verzoekjes aan je webserver en het weer neerzetten op jouw computer kosten veel tijd. Als web ontwikkelaar doe je er dus verstandig aan om dat tot een minimum te beperken, zeker omdat veel sites tegenwoordig ook mobiel bezocht worden.
Maar gelukkig zijn daar zijn natuurlijk een paar hele slimme truuks voor.
Een sprite is één bestand waar we het liefst alle kleine images, logos, pijltjes en andere grafische elementen in zetten. Deze image laden we in en met HTML en CSS kunnen gedeeltes binnen deze image isoleren en inladen op de juiste plekken. Dat betekent dus 1 aanroep (ok, twee als je de CSS file meerekent) voor al je kleine images.
De Base64 code
Nu kun je ook kleine images omzetten naar een stuk code. Deze image bijvoorbeeld krijg je als je de volgende code in je HTML zet. Er zijn online converters beschikbaar om je plaatjes om te zetten naar code. Let wel op hoe groter of kleurrijker je plaatje hoe groter de code. Dus probeer je image in je grafische pakket eerst zo klein mogelijk te krijgen. Daar kun je ook qua base64 code al een hoop mee winnen.
<img src="data:image/gif;base64,R0lGODlhMgAyAKIAAG5ubgAAAKOjo////0BAQMbGxubm5hgYGCH5BAAAAAAALAAAAAAyADIAAAP/OLrc/jDKSau9OGtmii/GJioFQBxBmh6EEI6VQKh0fQAv/Bhz7dcCnUPwK9YAwgXxRwA4TSgfIbmk3XIMmVRn8CEngqjqK+qpghWDOFUQVVPoy/ogWpM5pjin1s686Q9ifQ0ANFMZhWcPBTR3DGtYFWsQXWMQiXAYjCqHHAObKTiLjRhvdzwBayupepUpnTE0emZGAYMDYrAUb3q1so+cpb8LmLVYuZqkDCYEtCxNt64BuhPS1ArSjkrKcjSRJNwNtLcVxdoD2Ts1GqAp3wOY77TXFPMQAqJDNe8U0gHnEdpNEyHwn4U37jYUXEGugYFimTQglOKCQ4kfACcsLPKMUtaRDRN9+dJzYWMoVbUINKxgMkCQhyhrqHRTi2SJEwdyNqlIsGaSXT5/SmhJUmgDokYleByWFEJMl02V/igaNYsPqlWXMc0aUABPrmDDih0rIQEAOw=="/>
SVG (Liefst in combinatie met een sprite)
Een svg is een vector gebaseerd bestand. Dat betekent dat de het plaatje niet uit pixels bestaat, maar uit paden. Het onthouden van de ankerpunten en curves van zo'n pad is een stuk minder data dan al die pixels. Dat levert al met al een aardige tijdwinst op met laden.
Daarbij worden tegenwoordig svg bestanden steeds meer gebruikt omdat deze een aantal grote voordelen bevat
Met inzoomen op mobiele apparaten blijft de afbeelding scherp
Controle over de elementen binnen de SVG met CSS, bijvoorbeeld de kleur aanpassen binnen de SVG
Kortom, ook hier geld weer. Bezint eer ge begint. Een goede en doordachte aanpak voordat we beginnen met bouwen kan uiteindelijk aardig wat laadtijd schelen en dus een snelle site op alle apparaten opleveren.