De Vijf … punten waar je op moet letten voordat je foto’s invoegt in je website

De Vijf … punten waar je op moet letten voordat je foto’s invoegt in je website

Foto’s zijn een belangrijk onderdeel van je website. Ze voegen emotie toe. Als je er zelf op staat, maken de foto’s je website persoonlijk. Maar ze kunnen ook functioneel zijn door bezoekers in een bepaalde kijkrichting te sturen.

We zien het nog vaak mis gaan bij foto’s. Te groot, te klein, geen toegevoegde waarde, schots en scheef. Daarom hebben we vijf punten voor je op een rijtje gezet waar je al op moet letten voordat je de foto’s invoegt in je pagina of bericht.

1. Uitstraling van de foto

Als je foto’s gaat zoeken voor je website, is het belangrijk om goed op de uitstraling van de foto te letten. De foto moet passen bij jouw website. Dat klinkt misschien heel logisch, maar we zien nog te vaak gebeuren dat er stockfoto’s gekozen worden die totaal niet bij de inhoud van het bedrijf passen. Foto’s moeten de lezer helpen je artikel beter te begrijpen.

Het heeft onze absolute voorkeur om zelf foto’s te (laten) maken, maar we begrijpen heel goed dat dat niet altijd haalbaar is. Als je dan voor stockfoto’s gaat, neem er dan even de tijd voor om die te zoeken en kies niet gelijk de eerste de beste die je tegenkomt. Dikke kans namelijk dat iemand anders die op dezelfde term zocht die ook al gebruikt heeft. Een aantal tips:

  • Kies voor foto’s die relevant zijn voor de tekst voor de foto bij komt te staan. De foto’s moeten de tekst ondersteunen.
  • Als er mensen op de foto staan, let er dan op dat de mensen echt en authentiek overkomen. Zou die persoon op de foto zomaar een vriend of familielid kunnen zijn? Dan zit je goed.
  • Probeer eens verder te kijken dan de cliché foto’s. De zakenmannen die elkaar een hand geven (met brede glimlach en witte tanden), de collega’s in strakke pakken rond de vergadertafel (met brede glimlach en witte tanden), de gelukkige gezinnen die in de natuur wandelen (met brede glimlach en witte tanden); die hebben we wel genoeg gezien. Tenzij je tandarts bent en die witte tanden wilt promoten, is het beter om verder te zoeken naar foto’s die minder cliché zijn.

2. Horizontaal of verticaal?

Als je foto’s gaat zoeken of laat maken, is het fijn om te weten waar deze foto’s komen te staan. Je kunt dan namelijk vooraf bepalen hoeveel horizontale en hoeveel verticale foto’s je nodig hebt.

Als je zelf een blog schrijft en daar foto’s bij zoekt, is dat prima te doen. Maar als je foto’s laat maken of gaat zoeken voordat er begonnen is met het design van de website, is de plek van de foto’s nog niet bepaald. Zorg er dan voor dat je zowel horizontale als verticale foto’s hebt. Geef dit ook door aan je fotograaf als je foto’s laat maken. Ook als je al wel weet waar de foto’s moeten komen, is het aan te raden dit met de fotograaf te bespreken.

Als je een foto wilt gebruiken voor de achtergrond (die over heel de breedte loopt), zorg dan dat:

  • De foto minimaal 2000px breed is.
  • De foto niet te ver ingezoomd is. Als er aan de boven- en onderkant van de foto nog iets wegvalt, is het niet meer duidelijk wat er op de foto staat. Als het een abstracte foto is of als je juist het effect wilt bereiken dat het niet duidelijk is, is het natuurlijk prima, maar als dat niet je bedoeling is, zorg dan dat duidelijk blijft wat er op de foto te zien is.
  • Het een horizontale foto is. Als een verticale foto 2000px breed is, is die foto qua breedte wel groot genoeg, alleen moet je zoveel van de boven- en onderkant weg laten vallen dat er weinig meer van de foto overblijft.

Verticale foto als achtergrond

Stel dat ik bovenstaande foto als achtergrondfoto over heel de breedte zou willen gebruiken, dan zou je alleen het stukje tussen de roze balken maar zien. Althans, dit is ook wel een beetje afhankelijk van de instellingen, maar ervan uitgaande dat je ook nog direct tekst in beeld wilt laten zien onder de foto, is er weinig ruimte om heel veel meer van de foto te laten zien.

3. Formaat van de foto

Het formaat van foto’s is voor veel mensen lastig. De één plaatst foto’s van 5MB, de ander plaatst foto’s die net zo groot als een postzegel zijn. En nee, 5 MB is niet nodig, maar zo klein als een postzegel werkt ook niet.

Het ligt er een beetje aan waar je de foto wilt gebruiken hoe groot de foto moet zijn. Hieronder een aantal richtlijnen:

  • Achtergrondfoto volledige breedte: 2000px breed zijn
  • Foto voor in een blog gecentreerd: 800 x 600px
  • Foto voor in een blog links of rechts uitgelijnd met tekst ernaast: 400 x 300px

Te kleine foto

Als je een foto in een blog gebruikt die kleiner is, is dat op zich geen probleem. De foto wordt dan gewoon in ware grootte getoond. Maar als je voor een full width achtergrond een te kleine foto gebruikt, wordt de foto of uitgerekt, waardoor die wazig wordt, of de foto wordt in ware grootte geplaatst waardoor je aan beide kanten lege ruimte overhoudt. Als de foto dus in een specifiek kader geplaatst moet worden, moet de foto minimaal het formaat van het kader hebben.

Veel MB’s

Foto’s van bv. 5 MB hebben meer tijd nodig om geladen te worden. Ben je wel eens op een website geweest waar een foto regel voor regel op het beeld geprint leek te worden? Dat is waarschijnlijk een hele grote foto geweest die moeite had met laden.

Stel dat je een foto van 800 x 600px groot genoeg is voor een mooi beeld. Lastig in te schatten hoe groot zo’n foto is, maar laten we het even op 100kb houden. Als je dan een foto plaatst die exact 800 x 600px is, hoeft er maar 100kb geladen te worden om de foto te tonen. Als je hier echter een foto van 3000px breed gebruikt en die plaatst in het formaat 800 x 600px, moet er 5MB geladen worden. En dat duurt een stuk langer. Door onnodig grote foto’s te gebruiken, maak je je site dus trager (en snelheid is weer belangrijk voor je SEO). En je jaagt mobiele gebruikers op extra datagebruik. En je hostingruimte loopt sneller vol. Genoeg redenen dus om hier serieus mee aan de slag te gaan.

Zorg dus dat je je foto’s altijd verkleint tot het formaat waarop ze ongeveer getoond worden. Iets groter is niet erg, maar niet heel erg veel groter. Dit gaat dus echt om de afmeting. Daarnaast kun je de foto ook nog comprimeren zodat het aantal MBs/KBs minder wordt. Wij comprimeren foto’s eerst online op tinypng.com en hebben vervolgens de plugin Shortpixel (aff.) nog in een website draaien die de foto’s nog verder comprimeert.

4. Titel van de foto

Als je foto’s met je telefoon of camera maakt, krijgen ze vaak een onbeduidende naam als DC_0732. Aan die naam herken jij een foto niet en Google ook niet. Het is slim om je foto’s voordat je ze uploadt eerst een goede naam te geven. En met “goed” bedoel ik een naam die slaat op wat er op de foto te zien is en die aansluit bij de zoekterm van je pagina.

Als er op je foto een tafel te zien is met daarop een bord met een heerlijke vegetarische lasagne (en ja, dat is echt heel lekker!) en je zoekterm “vegetarische maaltijd” is, noem de foto dan vegetarische-maaltijd-lasagne.jpg. Moeilijker dan dat is het niet.

Je kunt de titel ook nog aanpassen nadat de foto geüpload is, alleen wordt het dan niet meer aangepast in de URL van de afbeelding.

5. Alt tekst van de foto

Na het uploaden van de foto, kun je ook de alt tekst van de foto nog invullen. De alt-tekst wordt voor een aantal doeleinden gebruikt:

  • Screenreaders, browsers voor blinden en visueel beperkte mensen, gebruiken de alt-tekst om te vertellen wat er op de foto te zien is.
  • Als een afbeelding om wat voor reden dan ook niet getoond wordt, wordt de alt-tekst getoond.
  • Google hecht waarde aan de alt-tekst en gebruikt deze om te bepalen wat er op de foto te zien is en wat het onderwerp is van de tekst die in de buurt van de foto staat. Zorg in ieder geval dat je per pagina één alt-tekst bij een foto gebruikt met de zoekterm van de pagina erin.

alt tekst invullen bij foto's op je WordPress website

Als je een foto geüpload hebt in de pagina, kun je er op klikken en via het potloodje de instellingen open. Bij de alternatieve tekst kun je vervolgens de alt-tekst invullen. Gebruik geen losse steekwoorden, maar maak er een logische zin van.

We snappen dat het extra tijd kost om bovenstaande punten uit te voeren. Maar ze dragen allemaal bij aan de leesbaarheid, snelheid en vindbaarheid van je website. En daar heb je best iets voor over, toch?

BewarenBewaren

Google-Beoordeling
4.9
Gebaseerd op 28 recensies
js_loader