Verbeter Je Website SEO: Handleiding voor Afbeeldingsoptimalisatie

Er zijn een aantal regels waar je aan kan houden om ervoor te zorgen dat je nooit te grote afbeeldingen gebruikt.

1. Gebruik nooit een afbeeldingen breder dan 2080px.
   Als je een afbeelding op volledige site breedte wilt weergeven zal deze nooit breder weer gegeven worden dan 2080px. Daarom is het onnodig om de afbeelding breder dan dat in te laden. Leer hier meer over het verkleine van afbeeldingen.
2. Gebruik altijd het bestandstype WebP
   Een WebP is het nieuwe standaard bestandsformaat voor het World Wide Web. Je vind hieronder meer over het WebP bestand.
3. Zorgt dat de afbeelding gecomprimeerd is.
   Afbeeldingscompressie zorgt voor een kleiner bestand en als je dit goed dit verlies je ook geen afbeeldingskwaliteit. Leer meer over afbeeldingcompressie.
4. Voeg altijd een alt tag toe aan de afbeelding
   Leer meer over afbeelding alt tags.

Waarom Afbeeldingsformaten Belangrijk Zijn voor Je Website

Afbeeldingsformaten hebben een grote invloed op de laadtijd van een website. Hoe korter de laadtijd hoe beter dit is voor de ranking in zoekmachines, maar ook voor de aandacht van de gebruiker en gebruiksvriendelijkheid is een korte laadtijd heel belangrijk. Want zeg nou zelf, als je op een website komt die langer duurt dan 5 seconden om te laden blijf je dan wachten of klik je hem weg en ga je naar de volgende?

WebP: Het Beste Formaat voor Snellere Laadtijden

Een WebP bestand is het nieuwe normaal voor afbeelding types op het web en wordt ook aangeraden door Google om te gebruiken. WebP kan de grote van het bestand verkleinen zonder kwaliteitsverlies, wat weer resulteert in snellere laadtijden van de website. Een snellere laadtijd is van belang in de prestatie van de website op het gebied van SEO.

Afbeeldingen Optimaliseren met Squoosh: Een Stapsgewijze Handleiding

Er zijn meerdere tools die je kan gebruiken om afbeeldingen te comprimeren en verkleinen. Wij zelf zijn gebruiken de Squoosh app. Lees ons artikel hier om te leren hoe je jouw afbeelding optimaliseert voor gebruik op jouw website.

Het Belang van Alt Tags voor Afbeeldingen en SEO

Een alt tag van een afbeelding beschrijft wat erop de afbeelding te zien is. Dit is essentieel voor toegankelijkheid en SEO. Alt tags helpen zoekmachines (zoals Google en Bing) beter de context te begrijpen van de afbeelding, waardoor dit bijdraagt aan beter zoekresultaten. Maar ook de bestandsnaam van de afbeelding heeft effect. Beschrijf daarom ook altijd wat de afbeelding is in de bestandsnaam.

Afbeeldingscompressie: Hoe en Waarom

Afbeelding compressie is het kleiner maken van een afbeelding. Het gebruik van een juiste afbeeldingstype WebP zal er al voor zorgen dat de afbeelding gecomprimeerd wordt, maar het is ook mogelijk om de kwaliteit iets omlaag te halen zonder dat dit erg zichtbaar wordt.

Responsive Afbeeldingen: Een Essentiële Gids

Responsive afbeeldingen passen zich automatisch aan op verschillende schermgroottes. Dit zorgt ervoor dat je nooit een te grootte afbeelding inlaad op een kleiner schermen (Mobiel of tablet). Zoals eerder besproken hoeft een afbeelding die site breed wordt weergegeven nooit breeder te zijn dan 2080px, maar op mobiele apparaten geldt een maximale afbeeldingsbreedte van 1080px.

Door de afbeelding responsive te maken wordt in het geval van een site breed afbeelding op telefoon het formaat van 1080px gebruik in plaat van 2080px. Dit scheelt dus ongeveer de helft in afbeeldingsgrootte en ook laad tijd.

Veelgemaakte Fouten bij Afbeeldingsoptimalisatie en Hoe Deze te Vermijden

Wij komen vaak tegen dat website eigenaren een afbeelding uploaden naar de site met het verkeerde bestand type. De rule of thumb was altijd PNG is voor afbeeldingen met transparante achtergrond en JPG is voor afbeeldingen zonder. Als je namelijk een normale afbeelding als PNG opslaat is deze vaak 10x groter dan als je deze in jpg formaat opslaat.

Maar in de laatste jaren is het nieuwe standaard voor afbeeldingen op websites het bestand type WEBP geworden. Een WEBP wordt ondersteund door alle moderne browsers. WEBP ondersteund het gebruik voor transparantie in de afbeelding, maar dit heeft geen effect dat op de grote van afbeeldingen zonder de transparantie in tegen stelling tot de PNG formaat.

Gebruik van Lazy loading en Caching om de afbeelding laadtijden te optimaliseren

Lazy-loading is een techniek van inladen van afbeeldingen. Lazy-loading laad de afbeeldingen in die op het scherm weergegeven worden. Pas als je naar benden scrolt en een nieuwe afbeelding tegen komt wordt deze ingeladen. Dit betekend dat de site niet in een keer alle afbeeldingen op de pagina hoeft te laden wat zal zorgen dat de pagina een stuk sneller laadt.

Caching slaat een lightweight kopie op van de pagina op het apparaat en de server. Wanneer een bezoeker op de site komt hoeft de server niet opnieuw de pagina op te maken en alle afbeeldingen in te laden, maar kan de server deze lightweight kopie inladen. Dit zorgt voor grote verbeteringen in laad tijd, maar er is wel een nadeel. Wanneer je aanpassingen doet aan de website zullen deze niet gelijk naar voren komen, omdat er dus nog een oude kopie klaar staat. De cache zou dan handmatig ververst moeten worden.

Conclusie

Gebruik dus altijd een WEBP bestand als je afbeeldingen op jouw website plaatst en vergeet deze niet te comprimeren voor dat je hem upload. Dit is van belang voor de gebruikers ervaring, omdat de site een stuk sneller laad. Het snelle laden heeft weer een positief effect op de SEO ranking. Om het dan helemaal af te maken geef je jouw afbeelding een beschrijvende naam en meta tag.