SEO Afbeeldingen verkleinen en optimaliseren voor websites

Afbeeldingen die rechtstreeks van de fotograaf komen of zijn geschoten met je mobiel uploaden naar je website? Niet handig! Het levert je een trage website op en levert je geen enkel SEO-voordeel op. 

Lees hier de best practices voor het optimaliseren van afbeeldingen. 

Waarop let je bij SEO voor afbeeldingen?

De belangrijkste punten om op te optimaliseren zijn:

  1. de bestandsgrootte
  2. de bestandsnaam
  3. toepassing van alt-teksten
  4. bestandsformaat

Wanneer is een afbeelding te groot?

Een bestand kan als ‘te groot’ worden gezien als deze meer dan 100kb is. Soms is het lastig om én een goede kwaliteit te behouden én binnen die 100kb te blijven. Voor plaatjes die ergens op een pagina staan lukt dat wel als ze niet heel gedetailleerd zijn. Maar bij grote headerafbeeldingen is het nogal lastig. Daarom hou ik als vuistregel aan voor paginavullende afbeeldingen dat deze maximaal 250kb mogen zijn.

Hoe weet je of afbeeldingen te groot zijn?

Heb je een WordPress-website dan kun je het zien bij de details van een afbeelding in de mediabibliotheek. Maar om dit te zien, moet je wel elke afbeelding aanklikken. Zelf gebruik ik de tool ScreamingFrog om de te grote afbeeldingen te vinden. 

Je kunt deze tool downloaden en je website scannen. Onder het tabblad ‘afbeeldingen’ zie je vervolgens een totaaloverzicht van alle afbeeldingen en hoe groot ze zijn. Zo pik je heel snel de afbeeldingen eruit die je beter kunt verkleinen.

Hoe verklein je afbeeldingen?

Er zijn talloze plugins die je afbeelding verkleinen op de website. Sommige plugins bewaren het volledige bestand, waardoor het lijkt alsof de afbeeldingen kleiner zijn, maar in werkelijkheid dit geen verbeterde laadtijd oplevert.

Beter kun je het in één keer goed doen dus en de afbeeldingen verkleinen voordat je upload.

Ik gebruik daarvoor vaak de volgende tooltjes:

Tinyjpg

Via Tinyjpg.com kun je heel makkelijk het bestand uploaden en kun je het gecomprimeerde bestand downloaden. Een geniale gratis tool. De kwaliteit van de afbeelding is perfect en je hoeft niets op je computer te installeren.

Het enige nadeel is dat dit alleen werkt als jouw afbeelding iets te groot is. Dus als je van 140kb onder de 100kb uit wilt komen. Maar is jouw afbeelding veel te groot, dan lukt het niet met de compressie van Tinyjpg.com.

Fotoverkleinen

Don’t judge a book by it’s cover. De website ziet er niet fancy uit, maar deze gratis tool werkt perfect. Je kunt je afbeelding hier uploaden, verkleinen en weer downloaden. Klik je op ‘Bestand’ > ‘Bewaar als’, dan kun je aangeven hoe groot het bestand mag zijn.

seo optimalisatie afbeeldingen foto verkleinen

Photorazor

Heb je heel veel afbeeldingen die je tegelijk wilt verkleinen? Dan is Photorazor een handig tooltje. Nog zo’n gratis tooltje dat eruit ziet alsof het weinig toegevoegde waarde heeft, maar heel nuttig is om te gebruiken. PhotoRazor moet je helaas wel downloaden. Vanuit het programma kies je de map je wilt verkleinen en het tooltje verkleint direct alle afbeeldingen uit de map.

Bestaande afbeeldingen verkleinen

Baal je nu omdat je dit blogbericht veel te laat leest? Heb je al tientallen afbeeldingen op jouw website staan die veel te groot zijn? Gooi ze dan niet zomaar weg uit de fotobibliotheek. Je helpt de hele website er mee om zeep. Want dat ene plaatje die je 2 jaar geleden op de site hebt gezet, wordt misschien wel op 10 plekken gebruikt, zonder dat je het doorhebt. Vervang je het plaatje op 1 plek voor een andere afbeelding met een andere benaming, dan heb je op 9 andere plekken een afbeelding die niet laadt. Gooi dus nooit zomaar te grote afbeeldingen weg, maar vervang ze.

Enable Media Replace

Afbeeldingen die te groot zijn en al op jouw website staan, kun je vervangen met de plugin Enable Media Replace. Gebruik je deze plugin, dan wordt het plaatje op iedere plek op de website vervangen.

Hoe ga je te werk bij het vervangen van de afbeeldingen?

  1. Download het plaatje vanuit de mediabibliotheek
  2. Verklein of comprimeer het plaatje met de eerder genoemde tools
  3. Pas de bestandsbenaming aan (gebruik daarbij het belangrijkste zoekwoord)
  4. Vervang het oude plaatje voor het nieuwe plaatje
  5. Geef een alt-tekst mee

Bestandsnaam aanpassen

Ik gaf het hierboven al even aan. De bestandsnaam is een belangrijke plek om te optimaliseren. Een bestandsnaam als ‘DSC9521’ zegt een zoekmachine natuurlijk niets. Kies dus voor een bestandsnaam die kenmerkend is voor de afbeelding en gebruik daarbij het belangrijkste zoekwoord.

Alt-tekst

De alt-tekst staat voor ‘alternatieve tekst’. Op veel oude websites zie je soms een rood kruis als een afbeelding niet kan worden geladen met een stukje tekst erbij. Dat is de alt-tekst. De alt-tekst is de leidraad voor zoekmachines om in de broncode te kunnen lezen waar het plaatje om gaat, zonder dat het plaatje helemaal geanalyseerd hoeft te worden. Kies je het plaatje vanuit de mediabibliotheek, dan kun je daar gelijk de alt-tekst meegeven.

Bestandsformaat

Bij het uploaden van de afbeelding naar de website kun je letten op het bestandformaat. Afbeeldingen zonder transparante achtergrond, kun je het beste als .jpg opslaan en uploaden. Afbeeldingen die wel een transparante achtergrond hebben, upload je als .png. Sla je de afbeelding op in een ander formaat, dan is de transparantie weg.

Webp

Vanuit WordPress kunnen de plaatjes bij vertoning op de website aangepast worden naar .webp bestanden. Webp bestanden zijn ‘nieuwe’ bestanden die worden gemaakt door het bestaande bestand te comprimeren. Als een website bestanden in .webp vertoond, dan levert dat een verkleining van het bestand op en een betere performance.

Wil je afbeeldingen als .webp tonen op de website, dan kun je daar bijvoorbeeld de WordPress plugin EWWW Image Optimizer voor gebruiken. Maar er zijn ook verschillende optimalisatietools die de mogelijkheid om te kiezen voor het .webp bestandsformaat tussen de functionaliteiten hebben zitten, zoals W3 Total Cache.

 

Kun je wel wat hulp gebruiken bij de optimalisaties?

Neem contact op met Debbie!