HomeZoekmachine-optimalisatie (SEO)Afbeeldingen optimaliseren voor Google (in 58 stappen)

Afbeeldingen optimaliseren voor Google (in 58 stappen)

Afbeeldingen optimaliseren voor Google

Een beeld zégt niet alleen meer dan 1.000 woorden. Een beeld wéégt ook meer dan 1.000 woorden. Onderzoek van Zoompf (2013) toont zelfs dat niet-geoptimaliseerde afbeeldingen de allergrootste oorzaak zijn van trage websites.

Dat gold ook voor royishak.nl. Alle afbeeldingen moesten daarom aan de Sonja Bakker. Het resultaat: super. Dit artikel legt je stapsgewijs uit hoe ik hun bestandsgrootte verkleinde naar < 25KB en mijn laadtijd verbeterde met 37%. Dat niet alleen. Je ontdekt vandaag letterlijk álles wat je moet weten over afbeeldingen optimaliseren voor Google Zoeken en Google Afbeeldingen, zodat je méér bezoekers kunt trekken naar je website. Veel leesplezier!

Inhoud:

  1. Afbeeldingen verkleinen en comprimeren met GIMP
  2. Afbeeldingen extra comprimeren met online tools
  3. Afbeeldingen optimaliseren in WordPress
  4. Afbeeldingen extra comprimeren met Yahoo! Smush.it™
  5. Afbeeldingen laden bij zichtbaarheid met BJ Lazy Load
  6. Aantal afbeeldingen op je webpagina minimaliseren
  7. Linkbuilden voor Google Zoeken en Google Afbeeldingen

1. Afbeeldingen verkleinen en comprimeren met GIMP

  1. Open GIMP.
    Je kunt afbeeldingen verkleinen en comprimeren met Adobe Photoshop en vele andere grafische programma’s. Ik gebruik een gratis alternatief: GIMP.
  2. Klik op Bestand en dan op Openen.
  3. Selecteer de afbeelding die je wilt bewerken en klik op Openen.
  4. Klik op Afbeelding en dan op Afbeelding schalen.
  5. Vul de gewenste breedte en hoogte in en selecteer beeldpunten (px).
    Let op! De afmetingen moeten exact overeenkomen met de afmetingen die je op je webpagina wilt tonen. Je wilt je afbeelding niet schalen met HTML ― dit kost onnodige bandbreedte.
  6. Verander resolutie X en Y allebei in 72 en selecteer beeldpunten/in.
    De standaardresolutie (300 dpi) gebruik je voor print. Dit maakt je bestand zwaarder. Terwijl de kwaliteit van je afbeelding online gelijk blijft.
  7. Selecteer de interpolatie Sinc (Lanczos 3).
    Interpolatie minimaliseert het aantal trapvormige lijnen en het kwaliteitsverlies die ontstaan bij het verkleinen van afbeeldingen. De Sinc (Lanczos 3)-optie zorgt voor de minste blur.
  8. Klik op Schalen.
  9. Klik op Bestand en dan op Exporteren als.
  10. Vul een optimale naam in.
    Je afbeelding is bestemd voor een webpagina die je (hopelijk) optimaliseert voor een zoekwoord. Gebruik dit zoekwoord als bestandsnaam. Visa versa geldt hetzelfde: gebruik een afbeelding die aansluit bij je zoekwoord ― dus bij de inhoud van je webpagina.
  11. Klik op Selecteer bestandstype (volgens extensie).
  12. Selecteer JPEG-afbeelding en klik op Exporteren.
    Doe deze stap alleen bij foto’s. Wil je een icoon, grafisch element of transparante afbeelding exporteren? Ga naar stap 15.
  13. Laat de voorgestelde kwaliteit staan en klik op Exporteren.
  14. Klik op Selecteer bestandstype (volgens extensie).
  15. Selecteer PNG-afbeelding en klik op Exporteren.
  16. Selecteer compressieniveau 9 en klik op Exporteren.
  17. Klik op Bestand en dan op Exporteren als.
  18. Kijk welk bestandstype de kleinste bestandsgrootte heeft (alléén bij foto’s).
    De ene keer wint PNG. De andere keer JPEG. Ik exporteer zelf vaak beide versies van een afbeelding en verwijder vervolgens het zwaarste bestand.

    Wist je trouwens dat één bestandsformaat wint van beide? WebP (ontwikkeld door Google) maakt afbeeldingen 20 tot 40% kleiner dan PNG en JPEG. Zonder kwaliteitsverlies! Helaas ondersteunt nog niet iedere browser en ieder CMS dit formaat.

2. Afbeeldingen extra comprimeren met online tools

Wil je een PNG-afbeelding comprimeren?

  1. Ga naar TinyPNG.
  2. Klik op Drop your .png files here.
  3. Selecteer je afbeelding en klik op Openen.
  4. Klik op download.

Wil je een JPEG-afbeelding comprimeren?

  1. Ga naar JPEG Optimizer.
  2. Klik op Bestand kiezen.
  3. Selecteer je afbeelding en klik op Openen.
  4. Selecteer Compression Level 99 en vink Resize Photo uit.
  5. Klik op Optimize Photo.
  6. Klik met je rechtermuis op de afbeelding en dan op Afbeelding opslaan.
  7. Klik op Opslaan.

3. Afbeeldingen optimaliseren in WordPress

  1. Log in op je WordPress-website.
    Ik gebruik momenteel versie 3.9.1 (Nederlands).
  2. Ga naar je bericht of pagina waarin je je afbeelding wilt toevoegen.
  3. Klik op Media toevoegen.
  4. Klik op het tabblad Bestanden uploaden en dan op Bestanden selecteren.
  5. Selecteer je afbeelding en klik op Openen.
  6. Vul een optimale alt-tekst in (maximaal 140 tekens inclusief spaties).
    Wederom: je afbeelding is bestemd voor een webpagina die je (hopelijk) optimaliseert voor een zoekwoord. Verwerk dit zoekwoord ook in de omschrijving van je alternatieve tekst.

    Zo weet Google waar je afbeelding over gaat, aangezien de zoekmachine die nog niet feilloos ‘leest’. Ik verwacht overigens wel dat de waarde van de alt-tekst krimpt in de nabije toekomst naarmate Google’s technologie voor beeldherkenning zich verder ontwikkelt.

  7. Selecteer Link naar: Geen en Afmeting: Volledige grootte.
    Selecteer je Volledige grootte? Dan voegt WordPress de juiste specificaties toe aan je afbeelding: de exacte afmetingen (breedte en hoogte) in pixels (niet in percentages).

    Fout: <img src=”/zoekwoord.png”>
    Fout: <img src=”/zoekwoord.png” width=”50%”>
    Fout: <img src=”/zoekwoord.png” width=”50px”>
    Goed: <img src=”/zoekwoord.png” width=”50px” height=”50px”>

  8. Klik op Invoegen in bericht of Invoegen in pagina.
    WordPress voegt geen titel toe aan je afbeelding, en dit hoef jij ook niet te doen. Dit attribuut heeft géén toegevoegde waarde voor je SEO.
  9. Voeg je zoekwoord toe in omringende tekst.
    Google bepaalt de inhoud van je afbeelding niet alleen middels de alt-tekst. Ook de omringende tekst dient als on-page ranking factor. Voorzie de tekst in het onderschrift (caption) of rondom je afbeelding daarom ook van je zoekwoord.

    Let op! Dit moet geen taak zijn, vind ik. Dit moet een natuurlijk resultaat zijn van goede SEO-copywriting. Je poot je zoekwoord sowieso meerdere malen in een webtekst die je optimaliseert voor zoekmachines ― dus je zoekwoord staat sowieso in de buurt van je afbeelding.

    Wellicht interessant om te weten: uit onderzoek van Drew Eric Whitman (Ca$hvertising) blijkt dat je bezoekers captions tweemaal zo veel lezen als bodyteksten. Een uitgelezen kans voor krachtige micro-copy, dus.

  10. Klik op Bijwerken.
    Heb je je bericht of pagina nog niet gepubliceerd? Klik dan op Opslaan als concept of Publiceren.

4. Afbeeldingen extra comprimeren met Yahoo! Smush.it

Installeer de WordPress-plugin Yahoo! Smush.it™ om de bestandsgrootte van je afbeeldingen verder te comprimeren en te optimaliseren. Dit is een eenmalige handeling.

  1. Download Smush.it.
  2. Log in op je WordPress-website.
  3. Klik op Plugins en dan op Nieuwe plugin.
  4. Klik op Uploaden en dan op Bestand kiezen.
  5. Selecteer Smush.it en klik op Openen.
  6. Klik op Nu installeren en dan op OK.
  7. Klik op Plugin activeren.
  8. Klik op Media en dan op Bulk Smush.it.
  9. Klik op Run all my images through WP Smush.it right now.

Heb je je afbeeldingen ― vóór het uploaden in WordPress ― optimaal gecomprimeerd? Dan geeft Smush.it aan ‘No savings’. Oftewel, dan heeft de plugin géén toegevoegde waarde en installeer je hem liever niet. Plugins gaan tenslotte ook ten koste van je laadtijd.

5. Afbeeldingen laden bij zichtbaarheid met BJ Lazy Load

Installeer de WordPress-plugin BJ Lazy Load om de afbeeldingen op je webpagina pas te tonen wanneer ze zichtbaar zijn voor bezoekers. Omdat de afbeeldingen ‘onder de vouw’ pas laden wanneer zij naar beneden scrollen, dienen hun browsers minder HTTP-verzoeken in en laadt je webpagina sneller.

Oh, en dat is niet alles. BJ Lazy Load kent twee extra voordelen: de plugin schaalt afbeeldingen automatisch in responsive designs en toont automatisch hiDPI-afbeeldingen op hiDPI-beeldschermen (zoals de Retina-display van iPhones en iPads).

  1. Download BJ Lazy Load.
  2. Log in op je WordPress-website.
  3. Klik op Plugins en dan op Nieuwe plugin.
  4. Klik op Uploaden en dan op Bestand kiezen.
  5. Selecteer BJ Lazy Load en klik op Openen.
  6. Klik op Nu installeren en dan op OK.
  7. Klik op Plugin activeren.

6. Aantal afbeeldingen op je webpagina minimaliseren

Hoe minder afbeeldingen op je webpagina, hoe minder HTTP-verzoeken, hoe sneller je laadtijd. Hoe minimaliseer je het aantal afbeeldingen?

  1. Schrap overbodige afbeeldingen op je webpagina.
  2. Voeg iconen toe als lettertype (font) en niet als afbeelding.
  3. Voeg afbeeldingen samen.
    Je kunt tien klantlogo’s samensmelten tot één logo-overzicht, bijvoorbeeld. Of social media-buttons en iconen bundelen in een CSS Sprite met deze online generator.

7. Linkbuilden voor Google Zoeken en Google Afbeeldingen

Je sprokkelt backlinks voor de URL waarop je afbeelding staat. Niet voor je afbeelding zelf. Echter: ga je linkbuilden voor zo’n geoptimaliseerde webpagina? Dan scoort je webpagina nóg hoger in Google Zoeken en je afbeelding nóg hoger in Google Afbeeldingen ― en trekt je website dus nóg meer bezoekers.

Hoe werkt linkbuilding? Dat leg ik je een andere keer uit. Tijdens een praktische incompany cursus Zoekmachine-optimalisatie (SEO), bijvoorbeeld.

Resultaten

Terugkomend op de aanleiding van deze cosmetische ingrepen: verbeterde mijn laadtijd dankzij deze 58 stappen? Absoluut. Ik heb deze webpagina’s ieder driemaal getest vóór en ná de optimalisatieslag (op hetzelfde tijdstip en IP-adres) met GTmetrix, en hiervan de gemiddelden genomen.

Webpagina: Page load time (voor): Page load time (na): Verbetering:
Cursus Bloggen 1.16s 0.90s -22%
Cursus SEO 2.12s 0.94s -56%
Cursus WordPress 1.10s 0.93s -15%