Afbeeldingen voor je website; vector- versus pixelafbeeldingen
Wat voor soort website je ook (nodig) hebt, afbeeldingen zijn één van de belangrijkste elementen op je website. Ze dienen ter verrijking, illustratie en kunnen zelfs bijdragen aan jouw vindbaarheid in de zoekmachines (SEO), mits je ze op de juiste manier toepast.
Er zijn twee verschillende soorten afbeeldingen: vector- en pixelafbeeldingen. Vectorafbeeldingen zijn beter geschikt voor bijvoorbeeld logo’s, terwijl pixelafbeeldingen beter tot hun recht komen bij foto’s. In dit artikel leg ik stap voor stap uit wat het verschil is tussen beiden en hoe je ze op de juiste manier integreert op jouw website.
Vectorafbeeldingen: flexibel maar niet zonder risico
Vectorafbeeldingen kun je zien als digitale tekeningen die je maakt met een zogenaamde “pen tool” op een “digitaal canvas”. Elke lijn en vorm is volledig aanpasbaar, zodat je het ontwerp precies kunt vormgeven zoals jij wilt. Ze worden vooral gebruikt voor icoontjes, logo’s en animaties. Vectorafbeeldingen zijn er in verschillende bestandsformaten, zoals SVG (Scalable Vector Graphics), AI (Adobe Illustrator) of PDF (Portable Document Format). Voor gebruik op het web wordt het SVG-formaat veruit het meest gebruikt. Dit formaat wordt breed ondersteund door verschillende webbrowsers en leent zich uitstekend voor schaalbare, lichte en interactieve grafische elementen voor een website.
Het grote voordeel van vectorafbeeldingen is dat ze oneindig kunnen worden vergroot of verkleind zonder kwaliteitsverlies, terwijl het bestand zelf licht blijft. Hierdoor blijven afbeeldingen altijd haarscherp, ongeacht de schermresolutie of zoomfactor. Daardoor dragen ze bij aan betere prestaties van je website, met name op het gebied van laadsnelheid. Meer hierover lees je in mijn artikel over snelheidsoptimalisatie. Ook zijn vectorafbeeldingen perfect voor drukwerk: van kleine relatiegeschenken zoals pennen tot enorme spandoeken blijft je logo in topkwaliteit zichtbaar.
SVG is een tekstgebaseerd bestandsformaat, wat betekent dat het bestaat uit leesbare code. Open je een SVG in een teksteditor, dan zie je geen afbeelding, maar veel regels code. Dat biedt veel flexibiliteit: SVG-bestanden kunnen met behulp van deze tekst relatief eenvoudig worden aangepast of via code, bijvoorbeeld om animaties te maken. Toch heeft dit tekstgebaseerde karakter ook enkele nadelen. Complexe illustraties met veel vormen en lagen kunnen leiden tot relatief grote bestanden, wat de laadtijd van een website negatief kan beïnvloeden. Daarnaast worden niet alle geavanceerde visuele effecten of filters altijd consistent ondersteund en weergegeven door de verschillende browsers.
Hoewel SVG-bestanden veel voordelen bieden, kunnen ze ook veiligheidsrisico’s met zich meebrengen. Omdat SVG’s op code zijn gebaseerd, kunnen kwaadwillenden er schadelijke scripts in verbergen die bij het laden van de afbeelding worden uitgevoerd. Om deze reden beperken veel systemen en e-mailprogramma’s het uploaden of weergeven van SVG-bestanden. Het gebruik van een SVG in een e-mailhandtekening lijkt misschien praktisch: de afbeelding blijft scherp en het bestand is klein. In de praktijk worden SVG’s echter door veel e-mailproviders geblokkeerd vanwege de veiligheidsrisico’s. Het is daarom belangrijk om zorgvuldig om te gaan met SVG-bestanden en bewust te kiezen voor welke specifieke toepassingen je dit bestandsformaat inzet.
Pixelafbeeldingen: goede weergave van kleuren en details
Een pixel- of rasterafbeelding bestaat uit een groot aantal minuscule gekleurde blokjes, de pixels. Het geheel van deze blokjes vormt samen het complete beeld. Hoe meer pixels, hoe hoger de resolutie en hoe scherper de afbeelding. Pixelafbeeldingen zijn vooral geschikt voor foto’s en realistische beelden, omdat ze veel kleurvariatie en nuance kunnen weergeven. Bekende bestandsformaten zijn JPG en PNG. Een nadeel van pixelafbeeldingen is dat ze, in tegenstelling tot vectorafbeeldingen, kwaliteit verliezen bij het vergroten. Wanneer je inzoomt of een afbeelding uitrekt, worden de afzonderlijke pixels zichtbaar. Het beeld lijkt dan blokkerig of “gepixeld”. Dit komt doordat de computer extra ruimte tussen de bestaande pixels zelf moet invullen, waardoor details verloren gaan.
Hoe klein een pixel daadwerkelijk is, vaak niet groter dan een fractie van een millimeter, werd duidelijk onder een breder publiek toen Alex Tew, een Britse student in 2005 de website “The Million Dollar Homepage” oprichtte om zo zijn studiekosten te betalen. Hij verdeelde de pagina van de website in een raster van 1.000.000 pixels, die hij verkocht voor één dollar per pixel. Bedrijven en particulieren konden zo een klein vakje kopen, hun logo of afbeelding uploaden en een link naar hun eigen website toevoegen. De pixels waren binnen enkele maanden al uitverkocht en de actie heeft hem ongeveer één miljoen dollar aan inkomsten opgebracht.
Zoals gezegd zijn er meerdere bruikbare extensies waarin je een pixelafbeelding kunt opslaan. PNG heeft als kernkwaliteit dat het afbeeldingen met een transparante achtergrond kan weergeven, zodat je deze vervolgens op elke achtergrond(kleur) kunt plaatsen. Vroeger was het veel werk om in Photoshop een achtergrond te verwijderen, tegenwoordig kan dit met de juiste programma’s, bijvoorbeeld Canva Pro, al met één muisklik. Wil je een afbeelding opslaan mét de transparante achtergrond, dan kan dat het beste in PGN, Webp of Avif formaat. Sla je het op in JPG formaat, dan komt er automatisch een witte achtergrond bij.
Het comprimeren van pixelafbeeldingen
WebP en AVIF behoren momenteel tot de beste afbeeldingsformaten voor het gebruik van pixelafbeeldingen op websites. Beide formaten kunnen afbeeldingen, zoals traditionele JPG en PNG bestanden, aanzienlijk verkleinen (comprimeren) met minimaal kwaliteitsverlies. Hierdoor blijven je beelden scherp, terwijl de bestandsgrootte drastisch kleiner wordt. Dit heeft voordelen voor je websiteprestaties, zoals (mobiele) laadsnelheid, vindbaarheid in zoekmachines en efficiënter gebruik van hostingruimte. Het AVIF format maakt nóg kleinere en betere bestanden biedt dan WebP, maar laatstgenoemde wordt momenteel beter ondersteund door browsers.
WebP is op dit moment dan ook de beste en meest efficiënte keuze voor gebruik op websites. Om een WebP bestand te krijgen kun je een afbeelding in een fotobewerkingsprogramma zoals Affinity of Photoshop opslaan in dit formaat. Als alternatief kun je een gratis online converter gebruiken, zoals Tiny img.
De beste bestandsformaten voor geoptimaliseerde afbeeldingen op je website
Kort samengevat zijn er twee uitstekende opties om afbeeldingen geoptimaliseerd op je website te plaatsen. Voor vectorafbeeldingen, zoals logo’s, icoontjes en andere digitale illustraties, is SVG de beste keuze. Voor pixelafbeeldingen, zoals foto’s, is WebP momenteel het meest geschikte format dankzij de sterke compressie en goede beeldkwaliteit. Het AVIF-format is een moderne en nog betere optie, maar deze wordt helaas nog niet in elke browser goed weergegeven. Daarom moet je meestal ook een extra afbeelding in bijvoorbeeld WebP toevoegen als reserve. Om je website niet onnodig te vertragen, moet je afbeeldingen zo instellen dat uitsluitend het format wordt geladen dat de browser van de bezoeker daadwerkelijk kan weergeven. Houd er rekening mee dat het uploaden van bestanden, met name SVG, op je website risico’s met zich meebrengt. Let daarom altijd goed op de herkomst van je afbeeldingen en wees voorzichtig met het verlenen van toegang om bestanden te uploaden of te beheren. Zorg daarnaast altijd voor een goede back-up van je website zodat de gevolgen beperkt blijven indien het toch een keer misgaat.
Wil je je liever niet bezighouden met afbeeldingsoptimalisatie? Geen probleem, in al mijn plannen is het optimaliseren van afbeeldingen inbegrepen.