Is SVG goed voor je laadtijd?
SVG is goed voor je laadtijd omdat de bestanden klein zijn. Een pictogram weegt een paar honderd bytes, waar een png er duizenden nodig heeft.
Voorwaarde is wel dat je het bestand opruimt.
Ontwerpprogramma’s exporteren een berg overbodige informatie.
Wat er in een onopgeruimd bestand staat
Laagnamen, bewerkgegevens, commentaar en instellingen van het programma waarmee het gemaakt is. Soms de helft van het bestand.
Meer daarover lees je bij pagespeed.
Hoe je opruimt
Met een van de gratis opruimhulpmiddelen online, of met een instelling bij het exporteren.
Meer daarover lees je bij favicon.
Het tweede voordeel
Eén bestand voor alle schermdichtheden. Je hoeft geen dubbele of driedubbele varianten mee te sturen.
Meer daarover lees je bij retina.
Mijn vuistregels
- Ruim elk bestand op voor gebruik.
- Bundel pictogrammen in één bestand.
- Plaats kleine pictogrammen direct in je pagina.
- Vergelijk met de png-variant.
Die derde scheelt een netwerkverzoek per pictogram.
Wanneer het juist zwaar wordt
Bij een complexe illustratie met duizenden vormen. Dan kan een SVG groter zijn dan een gecomprimeerde foto.
Meer daarover lees je bij pixel.
Wat je meet
De bestandsgrootte van beide varianten. Dat is de enige vergelijking die telt.
Meer daarover lees je bij wanneer je SVG gebruikt.
Wat ik in de praktijk zie misgaan
Het bestand wordt rechtstreeks uit het tekenprogramma geëxporteerd en zo op de site gezet.
Wat er dan meekomt is verrassend veel: de naam van het programma, laagnamen uit het ontwerp, verborgen elementen die ooit zijn uitgezet en een reeks nauwkeurige komma-getallen die niemand ziet. Ik heb pictogrammen langs zien komen die daardoor zwaarder waren dan de foto ernaast.
Dat is zonde, want opruimen kost een minuut en levert vaak tachtig procent van het gewicht op.
Wat ik verder aanhoud is dat een tekening met honderden losse vormen geen goede kandidaat is. Een gedetailleerde plattegrond of een ingewikkelde illustratie kan zo zwaar worden dat de browser er merkbaar op moet rekenen bij het tekenen van de pagina. Dan is een gewone afbeelding gewoon verstandiger.
De vuistregel die ik hanteer: eenvoudige vormen als tekening, alles met veel details of verlopen als foto.
Meer daarover lees je bij svg.