Zo optimaliseer je afbeeldingen voor je website

Een afbeelding optimaliseren op je website is belangrijk voor de websitebezoeker en zoekmachines zoals Google. Als je afbeeldingen en foto’s uploadt die onnodig groot zijn, wordt je website hier heel traag van. Binnen 3 seconden moet jouw website getoond worden, anders is de bezoeker weg richting de concurrent. Door foto’s eerst te optimaliseren, zorg je voor een snelle laadtijd van je webpagina’s en website in het geheel.

Je weet nu dat er werk aan de winkel is. Wij nemen jou in 5 stappen mee om alle afbeelding te optimaliseren voor je website. Let op: optimaliseer ook de afbeeldingen vóórdat je deze upload in WordPress.

1. Het formaat bepalen

Als je een foto van een camera of stockfoto uploadt zonder deze bij te snijden, duurt het laden van je website veel langer dan normaal. De vaak duizenden pixels zijn veel te breed. Snijd daarom eerst de foto’s bij voordat je deze upload naar je website. Voor het juiste formaat houd je de volgende richtlijn aan: de breedte en hoogte van een afbeelding mag niet groter zijn dan hoe deze op de website te zien is. 

2. Het juiste bestandstype kiezen

Er bestaan meerdere soorten bestandstypes. Als je niet voor de juiste bestandstype kiest, wordt de afbeelding korrelig en het laden hiervan op je website duurt eeuwen. De websitebezoeker wordt niet blij, net als een geïrriteerde Google. Hieronder lees je de vijf meest voorkomende bestandstypen met ieder zijn eigen voordeel.

JPG, PNG en GIF

Deze soort afbeeldingen vind je het meest op websites terug. De pixels hebben een vaste vorm en hierdoor kan je de afbeeldingen niet makkelijk veranderen van grootte. Een voordeel is dat dit type over het algemeen ondersteund wordt door de meeste besturingssystemen en browsers.

Kies voor JPG als je standaard kleurenfoto’s uploadt of afbeeldingen met veel verschillende kleuren. Ook als de gekozen afbeelding veel lichte en donkere gedeeltes bevat. Heb je te maken met een afbeelding waar transparantie in zit zoals een logo, kies dan voor PNG. GIF is voor de bewegende foto’s en animaties bestemd. 

SVG

Het maakt niet uit hoe groot je een illustratie of logo op je website wil plaatsen, hij blijft scherp dankzij SVG. Wist jij dat SVG het enige is dat je kunt uploaden in WordPress? Gebruik SVG voor logo’s, iconen en illustraties.

3. Een afbeelding bijsnijden voor het uploaden

Afbeeldingen bijsnijden, voor het uploaden naar je website, zorgt ervoor dat de laadtijd van je website optimaal blijft. Ook wordt het websiteverkeer en de SEO verbeterd. Maar wat zijn de afmetingen in Divi voor afbeeldingen in verschillende soorten kolommen? Als je kiest voor één volledig kolom, is het aantal pixels voor de breedte 1080. Kies je voor een kolom dat uit twee gedeelten bestaat, dan is ieder gedeelte 510 pixels breed. Bekijk hier een totaaloverzicht.

De makkelijkste manier om een afbeelding bij te snijden is met Photoshop. Ben je niet in het bezit van een licentie? Download en installeer GIMP voor het offline bijsnijden van afbeeldingen. Er bestaan nog veel meer online en offline programma’s die je gratis kan gebruiken om een afbeelding te optimaliseren voor je website. Denk hierbij aan:

Online programma’s:

• Picresize
• Canva
• Fotoaanpassen.nl

Offline programma’s:

• Paint (voor de Windows-gebruiker)
• Pixlr

4. Afbeelding comprimeren

Je kunt een te grote afbeelding nog kleiner maken door de afbeelding te comprimeren. Let op, je verlaagt hierdoor wel de kwaliteit van de afbeelding. Onzichtbare details worden weggelaten. Het is een ware kunst om de kwaliteit zodanig te verlagen, dat dit niet met het blote oog zichtbaar is. Een afbeelding moet dus niet pixelig of troebel worden.

Bewaar altijd een afbeelding in het originele bestandsformaat voor stel dat je later deze wil gebruik als een ander bestandstype. Maak een kopie van het originele bestand en comprimeer hem daarna pas. Je kunt online afbeeldingen comprimeren, bijvoorbeeld met TinyPNG, of direct in WordPress via een plug-in zoals de Imagify Image Optimizer of Shortpixel.

5. De bestandsnaam optimaliseren

Is de bestandsnaam van je afbeelding IMG_123? Hier scoor je geen punten mee bij zoekmachines. Het is belangrijk om de bestandsnaam te optimaliseren aangezien zoekmachines (robots) geen afbeeldingen kunnen zien. Alleen in de naam van de afbeelding (bijvoorbeeld website.jpg) en in de URL van de afbeelding wordt het bestandstype gelezen.

Zorg ervoor dat de bestandsnaam beschrijft wat er op de afbeelding te zien is. Verwerk hier ook zoekwoorden in voor een optimaal resultaat. Zoekmachines kijken of de afbeelding relevant is aan de zoekterm en snapt waar de afbeelding over gaat. Gebruik geen hoofdletters, spaties en vreemde leestekens in bestandsnamen. Bestaat jouw titel uit meerdere woorden? Maak dan gebruik van streepjes (-) tussen de woorden.

6. Vul een alt-tekst in

De afbeelding is nu klaar om te uploaden op je website. Na het uploaden kun je een alt-tekst invoeren voordat je een afbeelding definitief op je website plaatst. Een alt-tekst betekent een alternatieve tekst en omschrijft wat er op de afbeelding te zien is. Hier houden zoekmachines natuurlijk van. Dit is ook de tekst die bezoekers zien als een afbeelding niet getoond kan worden. Dan ontstaat er een gebroken logo. De omschrijving mag maximaal 143 tekens bevatten. 

Een alt-tekst wordt veel gebruikt door mensen met een visuele beperking, zoals blinden en slechtzienden. De tekst kan worden voorgelezen of is zichtbaar als een afbeelding niet goed laadt. Wil jij een alt-tekst toevoegen aan de afbeelding na het uploaden op je website? Ga naar het menu in het dashboard aan de achterkant van je website. Kies voor media, klik op de afbeelding en vul de alt-tekst in.

Andere interessante blogs

• 9 tips voor pakkende websiteteksten
• Tips voor een goede websitenavigatie
• Een salespagina maken: do’s en don’ts