Wanneer je een website hebt, hobbymatig of beroepshalve, zet je daar vaak ook afbeeldingen op. Afbeeldingen worden gebruikt voor informatieve pagina’s, blogs, nieuws artikelen en meer. Maar wist je dat een afbeelding ook gepositioneerd wordt in de zoekresultaten van afbeeldingen zoeken? Een afbeelding optimaliseren kan op diverse manieren.

Een geplaatste afbeelding bevat de potentie om extra verkeer naar je website te brengen. Een zoekmachine kan de afbeelding namelijk ‘los van de pagina’ indexeren en een positie geven binnen ‘Google afbeeldingen zoeken’. Als een afbeelding een hoge positie inneemt kan dat weer voor extra verkeer zorgen en dus potentieel meer klanten.

Alleen kunnen de systemen van zoekgiganten natuurijk niet zien wat er op de foto staat. Om foto’s en afbeeldingen beter vindbaar te maken moeten we de zoekmachines hier een handje helpen. En dat kan op verschillende manieren.

Dit artikel geeft je 6x tips voor het optimaliseren van je afbeeldingen.

In dit artikel lees je:

Beschrijving geven met de ALT tag

De ALT tag heb je vast wel eens gezien in je beheersysteem op het moment dat je een afbeelding upload. Voor WordPress gebruikers onder ons (en dat zijn er veel) zie je deze vrijwel direct na het uploaden van een media bestand.

Alternatieve tekst opgeven in WordPress CMS

De ALT tag is een ‘tag’ dat wordt toegevoegd aan de html code van de afbeelding. Hierin kunnen zoektermen worden opgegeven. Zoekmachines lezen ALT tags uit en kunnen de afbeelding op basis hiervan beter ‘begrijpen’ en positioneren.

Stel we hebben een foto van kitesurfers op het IJsselmeer bij de afsluitdijk gemaakt. En we schrijven een artikel op de website met als onderwerp ‘kitesurfen in Friesland’ en gebruiken hierin de gemaakte foto. Dan kun je de ALT tag van de foto voorzien van beschrijvende termen als: Kitesurfers op het IJsselmeer bij de Afsluitdijk.

Kitesurfers op het IJsselmeer bij de Afsluitdijk

Alt tags zul je in principe niet zo snel zien op een website. Het zit in de html code van de pagina, je ziet ze enkel op het moment wanneer je met een muis over de afbeelding gaat en even wacht. Na een seconde wordt weergegeven wat er in de alt tag is opgegeven.

Deze tag is nuttig voor wanneer een afbeelding niet meer aanwezig is. De pagina toont een lege plek van waar de afbeelding zou moeten staan. Aan de alt tag kun je nog aflezen wat er voor afbeelding had moeten staan.

Bestandsgrootte

Als fotograaf werk je vrijwel altijd met hoge resolutie foto’s die fors zijn qua bestandsgrootte. Dat kunnen we voor digitale doeleinden als een website of nieuwsbrief natuurlijk nooit zo plaatsen. Dus moeten we bekijken waar de afbeelding terecht zal komen en wat het formaat ervan mag zijn.

Wanneer we de nodige informatie hebben over het hoe en waar, kunnen we de afbeelding of foto hierop aanpassen en exporteren. Er zijn een legio aan software en tools voor het bewerken en opslaan van afbeeldingen. Bekende zijn Affinity Photo, Photoshop, Gimp. Zelf werk ik al jaar en dag met Photoshop in combinatie met Lightroom.

Stel afbeeldingen in op de maximale pixel verhouding voor je website. De ene website houdt bijvoorbeeld maximaal 1200 pixels breed aan, een ander weer 800 pixels. Het hangt vaak van het ontwerp of thema af hoe breed een afbeelding mag zijn en dat is voor iedere website weer anders. Ik hanteer voor deze website een maximale pixel breedte van 1200 pixels.

Wanneer een afbeelding in de juiste pixel verhouding is gezet zal dat de grootte van het bestand al aanzienlijk reduceren. Dit betekent nog niet dat de bestandsgrootte ook goed is. Deze is meestal nog groot, of in ieder geval te groot voor een internet pagina.

In Photoshop kunnen we het bestand exporteren. Door te kiezen voor ‘Bestand > Exporteren > Exporteren als … ‘ komen we in een scherm met een aantal instellingen die we aan kunnen passen.

Afbeelding exporteren in Photoshop

Is de pixel verhouding nog niet goed gezet? Dat kan ook hier ingesteld worden. Het belangrijkste onderdeel van dit scherm is ‘Bestandsinstellingen’ dat je aan de rechterzijde ziet staan. Standaard staat het formaat op PNG en dat kun je op JPG zetten.

Aan de linkerzijde zie je enkele eigenschappen staan van de afbeelding nadat deze geëxporteerd zou worden. Deze eigenschappen zijn bestandsformaat, pixelgrootte en bestandsgrootte. De bestandsgrootte kun je reguleren door bij bestandsinstellingen de kwaliteit aan te passen met de schuifregelaar. De hoeveelheid hiervan dien je naar eigen inzicht te doen: Ver genoeg om de bestandsgrootte te reduceren, maar niet zover dat de kwaliteit te ver achteruit gaat.

In de afbeeldingen hierboven zie je dat ik een foto gebruik van een kitesurf. De originele opgeslagen foto komt uit Lightroom en is 6000 x 4000 pixels groot met een bestandsgrootte van 5.3 MB. Om deze foto hier als voorbeeld te gebruiken heb ik hetzelfde proces als hierboven toegepast.

Export met Photoshop

Ik heb de foto op 1200 pixels breed gezet en uiteindelijk met 75% kwaliteit opgeslagen. Het resultaat is dat de afbeelding nu nog geen 100kb is geworden, meer dan geschikt om op een internetpagina te plaatsen. Kwaliteitsverlies van de foto is minimaal, bijna niet te zien tenzij we in zouden zoomen.

Met een kleine 100KB is de foto al prima om te publiceren op een internet pagina. Maar toch ga ik kijken of dit nog kleiner kan, zonder kwaliteitsverlies. Het resultaat lees je hieronder.

Comprimeren

Heb je een fotobestand op de juiste manier geëxporteerd? Dan kunnen deze vaak nog verder gecomprimeerd worden. Door ze te comprimeren worden ze nog lichter en zullen dus sneller laden.

Er zijn twee manieren om afbeeldingen te comprimeren. Dat kan door lossy of lossless compressie toe te passen.

Beide methodes verwijderen onnodige meta informatie. Wanneer je dat op de lossy methode doet, kun je deze informatie ook niet meer terughalen. Doe je dat met de lossless manier, dan kan dat weer wel. De lossy methode geeft dan ook een beter resultaat als we het fotobestand zo klein als mogelijk willen hebben.

Als we kijken naar WordPress, dan kan dit afgehandeld worden met plugins. Er zijn diverse plugins welke afbeeldingen kunnen comprimeren. Het is dan wel goed om kritisch te kijken naar de instellingen van een plugin, het is altijd van belang om te weten hoeveel je afbeeldingen op de automatische piloot laat comprimeren.

Heb je geen WordPress, dan zijn er ook diverse websites die dat voor je kunnen doen. Zelf heb ik goede ervaringen met https://compressor.io/.

Als ik mijn eerder gebruikt voorbeeld erbij pak met de kitesurf, dan kan ik deze nog verder verkleinen door de lossy methode toe te passen. Maar liefst ~50kb haalt het nog van de bestandsgrootte af, ik houd dan ook een fotobestand over van 50kb. Dat is een enorm resultaat ten opzichte van mijn eigen export vanuit Photoshop.

Lossy compressie

Ook heb ik de lossness optie geprobeerd maar deze haalde niets meer uit. Dat komt doordat ik bij het exporteren in Photoshop dit reeds had toegepast door bij metagegevens de optie op ‘geen’ te zetten. En dat is uiteindelijk de verkapte ‘lossness’ optie.

ps exporteren metadata

Naamgeving

Naast een ‘alt’ tag die we kunnen voorzien van zoektermen, is er nog een plek waar we op eenvoudige wijze termen kwijt kunnen. Een veel vergeten plek is de bestandsnaam zelf. Als er foto’s worden opgeslagen vanuit apparaten zoals mobiel of camera, krijgen deze bestandsnamen die vaak uit datums of opvolg-nummers bestaan.

Het bestandsnaam als in mijn voorbeeld met de kitesurf is bijvoorbeeld 20200627_DSC6306_Albert_Foekema.jpg.

Behalve mijn naam zullen zoekmachines niets hebben aan deze informatie. Aangezien zoekmachines deze plek gebruiken voor het bepalen van wat er op de foto kan staan, is het handig afbeeldingen een beschrijvende bestandsnaam te geven: kitesurfers op het ijsselmeer.jpg

Sla een foto voor het internet op met een omschrijvende bestandsnaam.

Bestandslocatie

Een andere methode om afbeelding beter vindbaar te maken is door ze ook logisch te ordenen in mappen op servers. Nu geldt dit over het algemeen voor de grotere websites welke vele afbeeldingen gebruiken.

Door afbeeldingen logisch te ordenen in mappen kan een zoekmachine meer structuur vinden en zo sneller begrijpen waar de betreffende afbeeldingen over gaan. Het structureren in mappen is eenvoudig. Upload ze niet allemaal bij elkaar maar maak logische mappen aan en plaats deze hierin.

Stel we hebben een grote webshop met schoenen en willen de productafbeeldingen beter vindbaar maken? We zouden een mappenstructuur aan kunnen maken met iets als volgt:

/media/schoenen/dames/sneakers/$merk/$model
/media/schoenen/kinderen/meisjes/babies/sneakers/$merk/$model
/media/schoenen/kinderen/meisjes/tieners/sneakers/$merk/$model

Sitemap

Op een bepaald moment begint een website in omvang toe te nemen. Er worden vele artikelen geschreven en gepubliceerd. Oftewel, de website begint te groeien. Om zoekmachines op de hoogte te brengen van alle pagina’s op een website wordt vaak een sitemap te gebruiken.

Sitemap

Een sitemap kan op verschillende manieren gemaakt worden. Het bevat alle pagina’s van de website met de link ernaartoe en vaak bevat het nog wat andere gegevens. Sitemaps kunnen opgegeven worden in Google Search Console, een handig en gratis programma van Google. Door een sitemap in te dienen is een zoekmachine altijd op de hoogte van al je pagina’s in de website.

Een sitemap kun je ook aanmaken voor alle afbeeldingen die op een website gebruikt worden. Dit wordt niet altijd gebruikt, maar het is wel een effectieve methode om al je afbeeldingen direct bij Google of andere zoekmachines op te geven.

Bij websites voorzien met CMS zijn er veelal plugins te vinden die sitemaps kunnen genereren. Voor WordPress zijn er bijvoorbeeld uitgebreide SEO plugins waar sitemaps als optie meekomen. Bekende plugins voor WordPress zijn bijvoorbeeld Yoast, RankMath, Google XML sitemaps, All in one SEO pack en meer.

Het magische getal voor acceptabele bestandsgroottes?

Die is er niet. Er zijn geen geschreven regels aan wat je als maximale bestandsgrootte van afbeeldingen op je pagina kunt zetten. Wel zijn er richtlijnen die je jezelf voor kunt houden bij het geschikt maken van een afbeelding voor je webpagina.

Stel je maakt een bericht waar een foto bij komt te staan. De foto is prachtig en je wilt hier niet teveel concessie doen in kwaliteit. Dan zou je bijvoorbeeld een 300kb (0,3MB) aan kunnen houden als maximale bestandsgrootte. Maar dat kan net zo goed 400- of 500kb zijn als jij dat zo wilt. Er is dus geen regel hiervoor.

Heb je een bericht met diverse foto’s, dan kun je het overwegen om dit nog een stapje kleiner te maken, laten we zeggen 150- tot 200kb per foto.

Met drie foto’s in je pagina heb je dus al 3 maal 200kb = 600kb (0,6MB) dat geladen moet worden naar je bezoekers.

Wat wel goed kan helpen om je een richtlijn te geven, is door eens te kijken naar hoe snel je pagina uiteindelijk laad. Je pagina moet namelijk van alles laden naar mobieltjes en desktop systemen om de pagina goed te laten zien. Denk aan scripts, diverse opmaken en afbeeldingen die je thema vormgeven.

Test je paginasnelheid met Pagespeed Insights


Je kunt je pagina laten testen door deze op te geven bij bijvoorbeeld Google Pagespeed. De test crawlt je pagina en komt na een korte tijd terug met resultaten. Deze resultaten zijn vrij gedetailleerd en geven ook tips over de te reduceren afbeeldingen.

(Let op! Niet alle tips uit de test zijn altijd even handig of überhaupt uitvoerbaar.)

Kan ik je helpen?

In dit artikel heb je kunnen lezen hoe je meer verkeer kunt verkrijgen naar je website door het optimaliseren van je afbeeldingen. Wil je meer weten over dit onderwerp of wil je advies over jouw website met betrekking tot optimale vindbaarheid? Neem dan contact met mij op en dan bespreken we de mogelijkheden.

Optimaliseer je afbeeldingen