Optimaliseer je afbeeldingen voor betere SEO

Optimaliseer je afbeeldingen voor betere SEO

Of je een blog hebt, een webwinkel of een andere website die er geweldig uit moet zien: het is altijd de moeite waard om de tijd te nemen om elke afbeelding die je uploadt te optimaliseren.

Als we het hebben over hoe je afbeeldingen voor het web kunt ‘optimaliseren’, kun je er op deze drie manieren over denken: 1) zorgen dat je foto’s er goed uitzien, 2) zorgen dat ze snel laden en 3) zorgen dat zoekmachines ze gemakkelijk kunnen indexeren.

De meeste blogs bespreken maar een paar aspecten die komen kijken bij het gebruik van afbeeldingen op je website. In deze blogpost bespreek ik ze allemaal, zodat je een goed overzicht hebt. Nog beter is dat je je afbeeldingen kunt optimaliseren met gratis en eenvoudige tools - Photoshop heb je niet nodig. (In deze blogpost laat ik zien hoe het gaat met gratis webversie van Pixlr, dat een fijne tool is voor eenvoudige fotobewerking. Als je meer wilt weten over andere tools, bekijk dan onze post over het bewerken van foto's zonder Photoshop).


1. Begin met goede afbeeldingen

Stockfotografie: Je hoeft geen professionele fotograaf te zijn om gave foto’s op je website te hebben. Er lijken elke dag meer goede sites met stockfoto’s bij te komen waar je gratis foto’s kunt downloaden, ook voor commercieel gebruik. Een paar van onze favorieten:

 

Pixabay

Unsplash

Barn Images

PicJumbo

SplitShire

Little Visuals

Wanneer je een afbeelding van een van deze sites downloadt, is het waarschijnlijk een heel groot JPEG-bestand. Om het te optimaliseren voor je website zul je de grootte moeten aanpassen en een kleinere versie moeten uploaden (daarover lees je verderop meer).  Dat is echter geen probleem. Het is juist handig om met een grote foto te beginnen, want je kunt een grote foto altijd verkleinen. Andersom is dat een stuk moeilijker...

Zelf (betere) foto’s nemen: Je kunt natuurlijk niet overal stockfoto’s voor gebruiken (bijvoorbeeld foto’s van je team of je product). Als je foto’s van je eigen producten nodig hebt, zijn er wat handige trucs om je foto’s goed te verlichten en een professionele look te geven, zelfs zonder dure camera en andere apparatuur.

 

Graphics: Heb je grafische afbeeldingen nodig, dan zijn er vele gratis online tools die je kunt gebruiken om je eigen infographics of of foto’s met tekst erop te maken. Canva en PiktoChart zijn hiervoor geweldige tools. Als je een logo wilt laten maken, raden we je aan eens te kijken bij 99designs of designonclick.

2. Gebruik het juiste bestandsformaat: JPEG of PNG

De twee bestandsformaten die je het vaakst tegenkomt zijn JPEG (of JPG) en PNG. Beide hebben hun voor- en nadelen, maar in de meeste gevallen kun je dit als richtlijn nemen:

 

  • Foto’s moeten worden opgeslagen en geüpload als JPEG’s. Dit bestandstype kan alle kleuren in een foto verpakken in een relatief kleine en efficiënte bestandsgrootte. Als je JPEG’s gebruikt zijn je bestanden minder groot dan wanneer je foto’s opslaat als PNG’s.
  • Graphics, vooral die met grote, platte kleurvlakken, moeten worden opgeslagen als PNG’s. Dit geldt voor de meeste designs, infographics, afbeeldingen met veel tekst en logo’s. De kwaliteit van een PNG is beter dan die van een JPEG, maar het bestand is meestal ook groter. PNG’s zorgen voor mooie heldere lijnen in kleurvlakken en tekst, zodat je zonder kwaliteitsverlies kunt inzoomen. PNG’s ondersteunen ook transparante achtergronden (en dat wil je bijvoorbeeld voor je logo). Als je de keus hebt raden we je aan PNG’s op te slaan als “24 bit” en niet als “8 bit”. Met 24 bit is de kwaliteit beter en worden meer kleuren ondersteund.
Foto's opslaan als JPEG
Foto’s sla je normaal gesproken op als JPEG’s.
Graphics en logo's opslaan als PNG
Graphics en logo’s sla je op als PNG-bestanden.

Wat als je een foto met tekst erin gebruikt? Als de afbeelding hoofdzakelijk een foto is, dan kun je vasthouden aan JPEG.

De meeste fotoprogramma’s geven je de keuze tussen JPEG of PNG: je kunt het bestandsformaat kiezen als je naar “Opslaan als,” “Exporteren,” of “Opslaan voor web” gaat. Er bestaan ook gratis online tools, bijvoorbeeld Zamzar, waarmee je bestanden kunt omzetten naar een ander bestandsformaat.

 

Je kunt een PNG omzetten naar JPEG, maar de kwaliteit van je foto wordt niet beter als je een JPEG omzet naar PNG. Heb je je logo bijvoorbeeld alleen als JPEG, vraag dan de ontwerper van je logo om een PNG-bestand uit het ontwerpprogramma en probeer niet zelf een JPEG om te toveren in een PNG.

3. Pas de grootte van afbeeldingen aan om de snelheid en look van je pagina te optimaliseren

Met afbeeldingen voor het web is het belangrijk dat je een goede balans vindt tussen afmetingen en resolutie. Hoe hoger de resolutie, hoe groter de grootte van het bestand zal zijn. In de drukwereld is het goed als afbeeldingen een zo hoog mogelijke resolutie hebben, omdat dat dat de mooiste gedrukte afbeeldingen oplevert. Maar op het web kunnen enorme afbeeldingen de snelheid van je site enorm vertragen. Dit is vervelend voor de gebruikers van je site en kan uiteindelijk leiden tot een lagere ranking bij zoekmachines. Grote foto’s en langzaam ladende pagina’s zijn bovendien in het bijzonder ergerlijk voor mobiele bezoekers.

 

Er zijn situaties waarin je wél een grote foto wilt gebruiken voor je website, bijvoorbeeld voor je achtergrond of header. Gebruik je hier een afbeelding van slechte kwaliteit en probeer je hem op te blazen tot hij groot genoeg is, dan zal de afbeelding er onscherp uit komen te zien.

 

Dus, hoe vind je die balans tussen grootte en kwaliteit? Om te beginnen is het belangrijk dat “grootte” relatief is als we het over afbeeldingen hebben. Wat je nodig hebt voor drukwerk is doorgaans veel groter dan wat je nodig hebt voor een website. Om alles makkelijker uit elkaar te houden is hier een overzicht van de drie belangrijkste dingen die “grootte” bij een afbeelding bepalen:

 

  • Bestandsgrootte: het aantal bytes die het bestand op je computer in beslag neemt. Dit is de factor die je website langzaam kan maken. Een foto van 15MB (megabyte) is gigantisch. Een foto van 125KB (kilobyte) is aanzienlijk minder groot. Als je bestandsgrootte echt groot is, is het een aanwijzing dat of de afmetingen te groot zijn of de resolutie te hoog is.

  • Afbeeldingsgrootte: de feitelijke afmetingen van je afbeelding, in pixels. Je denkt waarschijnlijk al snel aan de afmetingen van traditionele, gedrukte foto’s zoals 9x13, 11x15 of 20x25 cm. Maar op het web worden hoogte en breedte gemeten in pixels. Een typische afbeelding op een blog of website is bijvoorbeeld 795×300 pixels.

  • Resolutie: resolutie is een term uit de drukwereld. Het is de kwaliteit of dichtheid van een afbeelding, gemeten in ‘dots per inch’ (dpi). Een professionele printer heeft voor het mooiste resultaat meestal afbeeldingen nodig van ten minste 300dpi. Maar de meeste beeldschermen laten 72dpi of 92dpi zien. Een hogere resolutie is dus eigenlijk niet nodig en maakt je afbeelding onnodig groot. Wanneer een ontwerpprogramma de optie “opslaan voor web” heeft, betekent dit dat de afbeelding wordt opgeslagen met een lagere, webvriendelijke resolutie.

Hoe vind je de bestandsgrootte, afbeeldingsgrootte en resolutie van je afbeelding?

De grootte van het bestand en van je afbeelding vind je op je computer. Als je op een PC werkt, vind je deze informatie door met je rechtermuisknop op de afbeelding te klikken, te kiezen voor “Eigenschappen” en dan te kijken op het tabblad “Samenvatting”. Op een Mac klik je met je rechtermuisknop op het bestand en kies je “Info”.

 

Hoeveel dpi een afbeelding heeft kun je niet op alle computers zien. De meeste eenvoudige bewerkingsprogramma’s slaan bestanden echter automatisch op met lagere, webvriendelijke dpi, dus je hebt niet per se Photoshop nodig. De gratis webversie van Pixlr laat je foto's zien op 72dpi, en Canva laat je bestanden opslaan als “voor web”, waarmee je een PNG van 92dpi krijgt.

Spiekbriefje voor bestandsgrootte, afbeeldingsgrootte en resolutie

Nu je weet op welke verschillende manieren je de grootte van een afbeelding kunt vinden, zijn hier een paar handige vuistregels om te onthouden:

 

  • Grote afbeeldingen of achtergrondafbeeldingen over het volledige scherm zouden niet meer dan 1MB mogen zijn.

  • De meeste andere kleine graphics voor het web kunnen 300KB of minder zijn.

  • Als je een achtergrond over het volledige scherm gebruikt, raadt het Support Team van Jimdo aan een afbeelding te uploaden die 2000 pixels breed is.

  • Als je de mogelijkheid hebt, gebruik dan altijd de optie “Opslaan voor web”, zodat je afbeelding een webvriendelijke resolutie krijgt.

  • Je kunt een grote afbeelding verkleinen, maar het is erg moeilijk een kleine afbeelding te vergroten. Het support center van Pixlr legt het zo uit: “Als je een afbeelding van 100×100 pixels hebt en je wilt dat het een adembenemende 2560×1440 banner voor YouTube wordt, dan wordt het eindresultaat een korrelige en onscherpe afbeelding… Vergelijk het met volume: je kunt geen zwembad vullen met één emmer water.”

Wat te doen als je afbeelding te groot voor je website is?

Als je een mooie digitale camera hebt, neem je waarschijnlijk foto’s die meerdere megabytes groot zijn—veel groter dan wat je voor je website nodig hebt. Ook stockfoto’s van goede sites zijn vaak te groot. Als je afbeelding groter dan 1MB is, kun je een aantal dingen doen:

 

  • Pas de grootte van je afbeelding aan. Als je foto 5.000 pixels breed is, kun je hem gemakkelijk verkleinen tot 2.000 pixels breed, 1.200 pixels of zelfs nog kleiner, afhankelijk van hoe je hem wilt gebruiken op je site. Dit zal de bestandsgrootte aanzienlijk verkleinen. Zorg dat je de proporties niet wijzigt als je de afbeelding verkleint, zodat je hem niet vervormt.
  • Verlaag de resolutie. Fotoprogramma’s als Pixlr en Canva zullen de resolutie van je afbeelding automatisch webvriendelijk maken (resp. 72dpi en 92dpi). In Photoshop kun je dit doen door bij het opslaan te kiezen voor de optie “opslaan voor web”. In veel fotoprogramma’s kun je ook “opslaan als” en van daaruit de kwaliteit van de resolutie aanpassen.
  • Gebruik een gratis webtool als TinyPNG of TinyJPG. Beide tools verkleinen de bestandsgrootte aanzienlijk zonder iets te veranderen aan de kwaliteit van de afbeelding.
Grote afbeeldingen verkleinen met Pixlr
Met Pixlr is het heel makkelijk om een afbeelding te verkleinen. De oorspronkelijke stockfoto was hier 6302×4789 pixels en 16.2MB, veel groter dan wat ik nodig heb voor mijn website. Met Pixlr heb ik de afbeelding verkleind tot 1000×760 pixels, waardoor i

4.  Zorg dat afbeeldingen dezelfde grootte en stijl hebben

Afbeeldingen op een website zien er beter uit als de stijl en proporties consistent zijn. Consistentie helpt je ook bij het indelen van de tekst, kolommen en andere info op je pagina. Bekijk om te zien wat ik bedoel de voorbeelden hieronder.

 

In het eerste voorbeeld, van onze verzonnen website “Make-Believe Coffee”, hebben alle foto’s andere afmetingen. De ene staand, andere liggend. Dit maakt de pagina een beetje rommelig.

Foto's die niet bij elkaar passen zorgen voor een rommelig effect
In dit voorbeeld passen de foto’s niet bij elkaar en en hebben ze andere afmetingen, waardoor de pagina er rommelig uitziet.

In het volgende voorbeeld heb ik Pixlr gebruikt om elke foto bij te snijden tot 1000×760 pixels (je kunt ook Jimdo’s eigen ingebouwde Adobe Image Editor gebruiken om foto’s bij te snijden). De bovenste foto met het witte kopje paste niet bij de rest, dus ik heb hem vervangen door een foto waarvan de stijl en kleuren meer lijken op die van de andere foto’s. Ik heb ook een beetje geëxperimenteerd met de effecten van Pixlr en heb een subtiele overlay over elke foto geplaatst (een beetje als een filter bij Instagram) om de foto’s een consistente look te geven. Zodra ze allemaal dezelfde afmetingen en stijl hadden heb ik ze in het element Kolommen naar website geüpload.

Afbeeldingen in dezelfde stijl en grootte zorgen voor rust
In dit voorbeeld heb ik gekozen voor foto’s in dezelfde stijl en heb ik ze bijgesneden zodat ze dezelfde afmetingen hebben. Dit zorgt voor veel meer rust op de pagina.

Omdat de foto’s allemaal dezelfde afmetingen hebben en dezelfde oriëntatie hebben passen ze perfect in één kolom, en past mijn tekst in de kolom ernaast. Geen aanpassingen of giswerk meer nodig!

Foto bijsnijden met Pixlr
Zo snijd je een foto bij met Pixlr zodat hij dezelfde afmetingen heeft als de andere afbeeldingen.

Okee, nu hebben je foto’s de juiste afmetingen en zien ze er geweldig uit. Hoe optimaliseer je ze nu voor zoekmachines?

5. Geef je afbeeldingsbestanden een goede naam voor betere SEO

De meeste mensen denken niet veel na over de namen van hun bestanden. Ze noemen een foto “Foto1.jpg” of “Screen Shot 2017-06-02 om 15.41.15”. Als dat je bekend voorkomt, neem dan even de tijd om je afbeeldingen een andere bestandsnaam te geven voordat je ze uploadt naar je website. Waarom? Omdat het heel goed is voor je SEO.

 

Zie het zo: wanneer Google je website scant, kan het je tekst lezen, maar kan het niet zien wat er op je foto’s staat. Google haalt informatie over de afbeelding uit de bestandsnaam, zodat de afbeelding goed geïndexeerd kan worden. Een bestandsnaam als eiffeltoren.jpg zegt daarom meer dan DSC12345.jpg.

 

De bestandsnaam wordt ook onderdeel van de URL van de afbeelding, dus als je je afbeeldingen een duidelijke Nederlandse naam meegeeft, wordt de navigatie van je URL's eenvoudiger en zijn ze makkelijker te interpreteren. Zodra je een afbeelding naar je website uploadt is de bestandsnaam openbaar. Zorg dus dat je je bestanden geen gȇnante of geheime naam meegeeft. ;)

 

Gebruik voor consistentie kleine letters en de nummers 0-9. Vermijd liever spaties en interpunctie. Het is ook beter een liggend streepje te gebruiken en geen underscore.

 

NB: Op Jimdo-websites krijgen je afbeeldingen automatisch je ‘alternatieve tekst’ (zie verderop), met streepjes in plaats van spaties tussen de woorden. Dit betekent dat je niet alle bestanden op je site een andere naam hoeft te geven: je werkt gewoon de alternatieve tekst bij.

6.  Vul de ondertitels en alternatieve tekst in

Zodra mensen een afbeelding hebben geüpload in een element Foto vergeten ze vaak de extra info in te vullen. Maar net als de bestandsnaam kan ook deze extra info veel voor je SEO doen.

Alternatieve teksten (of alt tags) zijn niet zichtbaar voor de gemiddelde bezoeker, maar geven zoekmachines een idee van waar de afbeelding over gaat. Dus als je een afbeelding hebt toegevoegd, vergeet dan niet het veld alternatieve tekst te vullen met een zinnetje dat aangeeft wat de foto laat zien,  het liefst met een zoekwoord erin. (Alternatieve tekst helpt ook slechtziende bezoekers die met behulp van audiosoftware je website bezoeken, dus het is een goede manier om je website voor iedereen toegankelijker te maken.)) Hier vind je een paar tips voor het schrijven van goede alt tags.

 

Bestandsnamen en alt tags zijn vooral erg belangrijk voor de SEO van productpagina's. Als het bij de afbeelding past, vul dan ook een ondertitel in, want mensen zijn geneigd vooral onderstitels te lezen.

Invullen van ondertitels en alternatieve tekst
Vergeet niet het ondertitel en de alternatieve tekst in te vullen!

NB: Goede bestandsnamen, alt tags en onderschriften zijn goed voor je SEO, maar probeer er niet te veel zoekwoorden in te proppen. Je wilt gewoon in duidelijk Nederlands beschrijven wat er op de afbeelding staat. Het toevoegen van irrelevante of steeds herhaalde zoekwoorden kan je uiteindelijk een penalty van zoekmachines opleveren.

7.  Plaats de afbeeldingen naast relevante tekst

Kies afbeeldingen die samenhangen met je tekst in plaats van afbeeldingen die niets met je tekst te maken hebben. Een afbeelding die omgeven wordt door relevante informatie (met gerelateerde zoekwoorden) krijgt een betere ranking.

 

Deze tip helpt je ook stockfotoclichés te vermijden. Als je website over onderwijs gaat, doet een foto van een appel weinig voor je SEO.  Foto’s van leraren, leerlingen en klaslokalen zijn veel interessanter voor je lezers en passen beter bij je onderwerp.

Samenvatting: optimaliseer een afbeelding voor betere kwaliteit en SEO

Laten we nu eens naar deze regels kijken aan de hand van een voorbeeld van mijn Make-Believe Coffee website. Ik heb op Unsplash een foto van een kop koffie gevonden. Toen ik het bestand downloadde, heette het “fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg” en was het 2509x1673 pixels. De bestandsgrootte was 586KB. Dat is niet heel erg, maar het was nog steeds veel groter dan ik nodig had voor een kleine foto op mijn website. Dus om deze foto te optimaliseren deed ik het volgende:

 

  • De naam van van de afbeelding veranderen in iets wat ergens op sloeg: make-believe-coffee-cappuccino.jpg
  • Met een tool als Pixlr heb ik de foto bijgesneden en verkleind tot hij de afmetingen had die ik nodig had. Voor dit voorbeeld koos ik voor 1000×760. Als ik een vierkante afbeelding had gewild, had ik ook kunnen kiezen voor 1000×1000.
  • Zorgen dat de bestandsgrootte in orde was. Toen ik de afbeelding gecropt had naar de juiste afmetingen en hem downloadde van Pixlr, was de bestandsgrootte 117KB—perfect!
  • Uploaden naar de website met een element foto, mét alternatieve tekst. Voor de volledigheid heb ik ook een onderschrift toegevoegd.

 

Deze checklist lijkt misschien lang, vooral als je veel afbeeldingen moet uploaden, maar je went eraan en dan zal het ook vanzelf sneller gaan (en misschien vind je het handig om deze post op te slaan in je favorieten als geheugensteuntje).

 

Bovendien zorgen deze stappen ervoor dat je afbeeldingen er beter uitzien, je website sneller laadt en geven uiteindelijk je SEO een boost. Als je er een gewoonte van maakt om je afbeeldingen te optimaliseren heb je daar over je hele website plezier van.

Bekijk voor meer designtips de basisprincipes van webdesign.

Tara van Jimdo

MAGGIE BIROSCAK

Schrijfster en redactrice bij Jimdo

 

Recente artikelen

De nieuwe Dolphin SEO-functie doet het zware werk voor je
>> meer lezen

AVG: wat je moet weten en wat Jimdo doet
>> meer lezen

Facebook Ads: boost je social media traffic met de tips van onze expert
>> meer lezen

Foto’s bewerken zonder Photoshop
>> meer lezen

4 tips voor het schrijven van een betere call to action
>> meer lezen


Reactie schrijven

Commentaren: 12
  • #1

    Christian (zondag, 28 januari 2018 10:57)

    Waarom zet Jimdo geen optie in het foto bewerkings deel om de foto's kleiner te kunnen maken???

  • #2

    Jimdo Nederland (maandag, 29 januari 2018 09:22)

    Goedemorgen Christian, bedankt voor je feedback!

  • #3

    Imannuelle (maandag, 29 januari 2018 11:13)

    waarom kun je dingen van de standaard websites die je perongeluk hebt verwijderd terugzetten bij jimdo free is dat sowieso niet en dat wil ik graag ALVAST BEDANKT



    Imannuelle

  • #4

    Jimdo Nederland (dinsdag, 30 januari 2018 09:11)

    Hallo Immanuelle, jij ook bedankt voor je feedback!

  • #5

    Gonda (dinsdag, 06 februari 2018 21:14)

    Kan ik bij Jimdo free ook mijn afbeeldingen optimaliseren voor seo?
    Ik vind bovengenoemde foto bewerkings functies niet terug.

  • #6

    Jimdo Nederland (woensdag, 07 februari 2018 08:31)

    Goedemorgen Gonda, jazeker, alle bovengenoemde tips zijn ook toe te passen binnen JimdoFree!

  • #7

    gonda (woensdag, 07 februari 2018 18:25)

    heb me vergist, ik heb de website met Dolphin gemaakt. Daar kan het niet?

  • #8

    Jimdo Nederland (donderdag, 08 februari 2018 08:52)

    Goedemorgen Gonda, ook bij Dolphin zijn alle bewerkingsopties beschikbaar! Mocht je er niet uitkomen kun je altijd contact opnemen met het support team via "Vragen" in je dashboard.

  • #9

    Veulenopfok-vandenBoogaard (maandag, 26 februari 2018 07:16)

    LS,

    Ik wil uw voorstellen uitvoeren, maar kan niet meer op mijn website:
    stalvandenboogaard.jimdo.com

    koosvandenboogaard@hotmail.com


  • #10

    Danny Bettingers (maandag, 26 februari 2018 17:02)

    Zeer interessant artikel, ik heb alvast weer een aantal zaken bijgeleerd. Bedankt Maggie.

  • #11

    Jimdo Nederland (donderdag, 08 maart 2018 14:35)

    @Veulenopfok-vandenBoogaard kan het zijn dat je nog inlogde met je e-mailadres in plaats van met een gebruikersaccount? We hebben de gebruikersaccounts in de zomer geintroduceerd en zetten het oude systeem nu helemaal stop. Dat betekent dat je een account moet aanmaken om je website te bereiken (dat kan via deze link: https://dashboard.e.jimdo.com). Zodra je een account hebt aangemaakt is je site meteen weer beschikbaar!

  • #12

    Jimdo Nederland (donderdag, 08 maart 2018 14:36)

    @Danny, fijn om te horen! :)