Met alleen foto’s ben je er niet…

Say what?! Als fotograaf zeg je dat toch niet? Nou, deze fotograaf wel. Ik ben altijd op zoek naar het grotere plaatje (pun intended), en zo ook met mijn fotografie.



Want je wilt iets bereiken met je foto’s. Meer klanten binnenhalen, of klanten bereiken die beter bij je passen. De foto’s die je gebruikt om dit doel te bereiken, maken altijd onderdeel uit van een groter geheel. Bijvoorbeeld:

  • Een website die jouw klant helemaal opwarmt voor jouw aanbod
  • Een post op Instagram om jouw sfeer op je volgers over te brengen
  • Een brochure of e-book waardoor je leads binnenstromen

Dit keer wil ik specifiek in gaan op het optimaliseren van de foto’s voor je website. Want je hebt een hoop geld of tijd geïnvesteerd in het bouwen van de website, het schrijven van teksten, en het laten maken van professionele foto’s. Het zou zonde zijn als je website piepend tot stilstand zou komen na het uploaden van je mooie foto’s, right?

Foto’s optimaliseren stap 1: Juiste resolutie kiezen

Allereerst is het goed om te kijken naar de resolutie van de foto’s. De resolutie zegt iets over het kwaliteitsniveau van een foto. Een foto bestaat uit een heleboel puntjes, ook wel pixels genoemd. Hoe meer pixels er per cm (of per inch) in een foto zitten, hoe hoger het detailniveau en de kwaliteit van de foto. De afkorting hiervoor is ppi (pixels per inch). Je zou dus denken; hoe meer hoe beter, toch? Toch is dat niet helemaal waar. Al die extra pixels zorgen er ook voor dat de bestandsgrootte van de foto omhoog gaat. Dat is prima als je een foto wilt afdrukken, maar een website wordt er onnodig langzaam van.

Na een fotoshoot lever ik altijd twee versies van een foto bij je aan. Eentje met een hoge resolutie (300 ppi) en eentje met een webresolutie (70 ppi). De versie met de hoge resolutie is te gebruiken voor drukwerk. Vaak is dit bestand zo’n 6 tot 10 MB groot. Veel te groot voor je website, maar wel noodzakelijk om scherpe en gedetailleerde afdrukken te krijgen. De foto met de lagere resolutie is zo’n 300 tot 600 kB en is beter bruikbaar op je website of social media, zonder dat je zichtbaar kwaliteitsverlies hebt.

Stap 2: Juiste formaat kiezen

Naast de resolutie, moet je ook goed kijken naar de afmetingen van de foto’s. De afmetingen worden weer in pixels aangeduid, breedte x hoogte. Zo is een liggende foto bijvoorbeeld 1012 x 675 pixels, een staande foto 675 x 1012 pixels.

Je wilt dat de foto’s op je website scherp zijn, maar niet onnodig groot. Het is gangbaar om foto’s die de volledige breedte van het scherm opvullen tussen de 2000 en 2500 pixels groot te maken. Dit is dus een goede afmeting voor headers of achtergronden die beeldvullend zijn. Kleinere foto’s kunnen af met een breedte van maximaal 1200 pixels.

Voordat we een shoot in gaan, bespreek ik met je waar je de foto’s voor wilt gebruiken. Als je veel headers te vullen hebt, maken we bijvoorbeeld extra liggende foto’s. Wil je de foto’s ergens anders voor gebruiken en aanpassen qua formaat? Adobe heeft een handige online tool, waar je je foto’s kunt uploaden en het formaat makkelijk kunt aanpassen. Mocht je een WordPress website hebben, dan kun je de afmetingen van je afbeeldingen ook nog bewerken nadat je ze geüpload hebt. Let er wel op dat je het formaat van foto’s altijd kunt verkleinen, maar niet kunt vergroten. Dat gaat ten koste van de kwaliteit.

Stap 3: Foto’s optimaliseren door te comprimeren

Na het uploaden naar je (WordPress-)website zijn er diverse plugins die je foto’s nog verder optimaliseren door te comprimeren. Dit betekent dat de bestandsgrootte nog iets verder wordt verkleind, maar ook dat de kwaliteit van de foto’s iets achteruit gaat. Meestal kun je hiermee spelen en een voorbeeld zien van wat het met de foto doet. Ik kies meestal voor een lage compressie, zodat er geen zichtbaar kwaliteitsverlies is, maar de bestandsgrootte toch nog wat compacter is. Alles om Google blij te maken 😉

Stap 4: Webp in plaats van JPG

Normaal gesproken krijg je foto’s aangeleverd in het JPG formaat. Er zijn inmiddels nieuwere bestandstypes ontwikkeld, die nog beter geschikt zijn voor het web. Een voorbeeld van zo’n bestandstype is het Webp formaat, ontwikkeld door Google. Met dit bestandstype worden afbeeldingen nog kleiner, tot wel 30%, zonder kwaliteit te verliezen. Je kunt je voorstellen dat dit nog fijner is voor de laadsnelheid van je website. Bijna alle browsers ondersteunen het Webp bestandstype.

Als je een WordPress website hebt, bestaan er diverse gratis en betaalde plugins die JPG bestanden kunnen omzetten in Webp bestanden. Vind je dit te veel gedoe, dan kan ik de Webp bestanden ook direct bij je aanleveren, zodat je ze zo kunt uploaden. Houd er dan wel rekening mee dat oudere browsers niet met dit bestandsformaat kunnen omgaan. Die 3% van de bevolking die nog met Internet Explorer werkt krijgt dan dus een foutmelding te zien (maar je kunt je ook afvragen of dat je doelgroep moet zijn ;)).

Daarnaast wordt op het moment van schrijven door WordPress bekeken of afbeeldingen standaard kunnen worden omgezet naar Webp. Het plan is dit onder te brengen in versie 6.1 en betekent dat je geen extra plugins meer nodig hebt. WordPress schreef hier zelf een blogpost over, die lees je hier.

Gratis e-book: In 3 stappen professionele foto’s op je website

Vond je dit blogartikel interessant? Dan is mijn e-book vast ook iets voor jou. Download het gratis e-book en…

  • Kom er achter wat je niet moet vergeten tijdens de voorbereiding van een shoot

  • Krijg concrete tips voor betere interieurfotografie, met je camera of telefoon

  • Leer hoe je je prachtige foto’s het beste upload naar je website. In de beste kwaliteit, en zonder verlies van snelheid.

In 3 stappen professionele foto's op je website