Website fotografie voorbereiden

Een fotograaf speelt een cruciale rol in de uitstraling en het succes van een website of webshop. Beeldmateriaal bepaalt voor een groot deel de eerste indruk van een bezoeker. Professionele, goed doordachte foto’s maken een website niet alleen aantrekkelijker, maar dragen ook bij aan betere gebruiksvriendelijkheid, hogere conversie en zelf aan de vindbaarheid in Google.

In dit uitgebreide artikel lees je waar je allemaal op moet letten bij het maken en aanleveren van foto’s voor websites of webshops. Dit geldt voor een lokale ondernemer, een groot e-commerceplatform of een persoonlijke blog: deze tips helpen je om het maximale uit je beelden te halen.

Formaat en oriëntatie: horizontaal of verticaal beeld?

Het formaat van je beeld is meer dan alleen een esthetische keuze — het is bepalend voor de manier waarop een foto past binnen een compleet webdesign. Moderne websites met WordPress zijn opgebouwd uit blokken, kolommen en secties. De vorm van je beeld moet dus passen bij de plek waar het terechtkomt.

• Horizontale foto’s (liggend) zijn perfect voor headers, banners, slideshows of achtergrondsecties. Veel gebruikte verhoudingen zijn 16:9 (breedbeeld) of 4:3 (klassiek formaat);
• Verticale foto’s (staand) worden vaak gebruikt voor portretten, teamleden, blogartikelen of in mobile-first designs. Denk aan 2:3 of 3:4 verhoudingen.

Het is slim om vooraf met een webdesign agency en de fotograaf samen af te stemmen welke oriëntatie gewenst is per onderdeel van de site. Bespreek eventueel de formaten op basis van een wireframe of design in Figma, zodat je gericht kunt fotograferen en geen tijd en geld hoeft te verspillen.

Tip voor fotograaf: Maak indien mogelijk foto’s met extra ruimte rondom het onderwerp. Zo geef je de webdesigner flexibiliteit om bij te snijden zonder dat belangrijke details verloren gaan. Houdt er ook rekening mee dat er mogelijk nog tekst over de beelden geplaatst zal worden of een button. Maak daarom beelden waarbij het onderwerp zowel links als rechts of gecentreerd uitgelijnd is.

Resolutie en bestandsgrootte

Bezoekers verwachten natuurlijk haarscherpe foto’s, maar ook een snelle WordPress website. Grote fotobestanden kunnen de laadtijd flink vertragen, zeker op mobiel met een slechte verbinding. De kunst is om foto’s in hoge kwaliteit te leveren, maar wel geoptimaliseerd voor het web.

Wat is resolutie?

Resolutie verwijst naar het aantal pixels (beeldpunten) in een afbeelding. Hoe hoger de resolutie, hoe scherper en gedetailleerder de foto.

• Voor drukwerk wordt vaak 300 DPI (dots per inch) gebruikt;
• Voor webgebruik volstaat meestal 72 DPI, maar het aantal pixels in breedte en hoogte is belangrijker.

Wat is bestandsgrootte?

Bestandsgrootte (in KB of MB) geeft aan hoeveel opslagruimte een foto inneemt. Een te groot bestand kan de laadtijd van de website vertragen.

• Richtlijn: maximaal 300–500 KB per foto voor webgebruik zonder kwaliteitsverlies.
• Voor hero-beelden mag dit iets groter zijn (tot ±1 MB), zolang ze geoptimaliseerd zijn.

Gebruik bij het fotograferen altijd de hoogste kwaliteit (RAW of JPEG op maximale instelling), maar lever bewerkte bestanden aan in geoptimaliseerd formaat:

• Voor grote banners of full-width secties: minimaal 2000 pixels breed;
• Voor portretten of kleinere beelden: minstens 1200 pixels hoog;
• Formaat: JPEG voor foto’s zonder transparantie, PNG voor beelden met transparante achtergrond, WebP of AVIF als moderne, lichte optie;
• Compressie: Gebruik tools zoals TinyPNG, ImageOptim of Shortpixel om bestandsgroottes te verkleinen zonder zichtbaar kwaliteitsverlies.

Hoe controleer je resolutie en bestandsgrootte?

Op Mac

1. Rechtermuisklik op de foto > ‘Toon info’
2. Controleer bij ‘Afmetingen’ (bijv. 1920 x 1080) en ‘Grootte’ (bijv. 450 KB)

Op Windows

1. Rechtermuisklik op het bestand > ‘Eigenschappen’ > tab ‘Details’
2. Controleer ‘Afmetingen’ en ‘Grootte’

Tip voor de fotograaf: Lever nooit foto’s direct uit de camera aan voor gebruik op een website. Deze zijn vaak onnodig groot en niet geoptimaliseerd. Daarbij komt ook dat bijvoorbeeld WordPress niet overweg kan met RAW bestanden. Het beste lever je daarom een foto met een achtergrond aan in het JPG formaat en een foto met een transparante achtergrond als PNG. Beide formaten zullen na het uploaden in de website geconverteerd worden naar het moderne AVIF-bestandsformaat.

Consistente stijl en belichting

Een website met uiteenlopende stijlen en kleuren oogt al snel onprofessioneel. Door consequent dezelfde belichting, stijl en sfeer te hanteren, creëer je een visuele eenheid die vertrouwen uitstraalt. Dit komt uiteindelijk ook de conversie van een website of webshop ten goede. Dus om die reden extra belangrijk om rekening mee te houden.

Denk als fotograaf samen met de webdesigners daarom vooraf goed na over de volgende elementen voor website fotografie

• Lichtbron: Gebruik daglicht of stel een vaste flits-/lampopstelling in met softboxen. Vermijd gemengd licht (bijv. daglicht + TL-licht);
• Kleurtemperatuur: Fotografeer alles met hetzelfde witbalansprofiel. Werk bij voorkeur in sRGB, het standaard kleurprofiel voor internet;
• Nabewerking: Pas kleurcorrectie en contrast toe op basis van een vast preset of kleurprofiel;
• Compositie: Kies vaste camerahoeken voor productfotografie of portretten zodat alle beelden logisch op elkaar aansluiten.

Voorbeeld: Bij een teamfoto-sessie: gebruik steeds dezelfde achtergrondkleur, belichting en uitsnede per medewerker. Zo vormt het teamoverzicht een mooi geheel op de WordPress website. Hetzelfde geldt voor producten. Uiteraard kun je bijvoorbeeld in een sieraden webshop prima variaties met achtergronden en modellen gebruiken. Maar als je tien dezelfde producten fotografeert in een andere kleur, maak dan gebruik van een eenduidige stijl.

Achtergrond en uitsnede

Een storende achtergrond kan je onderwerp volledig overschaduwen. Denk aan slordige muren, felle kleuren of andere afleidingen. Voor professioneel ogende foto’s is de achtergrond net zo belangrijk als het hoofdonderwerp.

Bij productfotografie en zakelijke portretten wordt vaak gekozen voor een neutrale achtergrond, zoals wit, lichtgrijs of een andere effen kleur. Deze keuze zorgt ervoor dat de focus volledig op het onderwerp blijft liggen en draagt bij aan een professionele, tijdloze uitstraling. Neutrale achtergronden zijn bovendien uitermate geschikt voor gebruik in verschillende media en sluiten goed aan bij uiteenlopende huisstijlen, wat de flexibiliteit vergroot.

Voor sfeerbeelden mag er meer ruimte zijn voor variatie. Een achtergrond met textuur, kleur of een setting in een natuurlijke of zakelijke omgeving kan het verhaal achter het product of de persoon kracht bijzetten. Let er hierbij wel op dat de beelden rust uitstralen en visueel in lijn blijven met de rest van het beeldmateriaal. Consistentie in stijl, lichtgebruik en kleurstelling is essentieel om een herkenbare en professionele uitstraling te behouden over alle uitingen heen.

Kies bewust voor eenvoud en consistentie bij functionele beelden en gebruik sfeerbeelden strategisch, zonder af te wijken van de visuele identiteit van je merk. Let daarnaast op uitsnedes:

• Laat voldoende ruimte rondom het onderwerp voor bijsnijden op verschillende schermformaten (responsive design).
• Plaats het onderwerp centraal, tenzij je bewust kiest voor asymmetrische composities.
• Gebruik de regel van derden om natuurlijk ogende beelden te creëren.

Globale test: Open je foto op mobiel, tablet en desktop. Ziet het beeld er op elk formaat nog steeds krachtig en helder uit? Of zijn belangrijke details op mobiel onzichtbaar en verliest de foto daardoor alle kracht?

Bestandsnamen van website foto’s

Bestandsnamen lijken misschien bijzaak, maar ze zijn cruciaal voor zoekmachineoptimalisatie en het beheren van je media in WordPress. Gebruik daarom duidelijke, beschrijvende bestandsnamen en een logische structuur.

Uiteraard is dit niet een taak voor de fotograaf maar voor de webdesigner die de foto’s gaat plaatsen op de website.

• Vermijd spaties en gebruik streepjes (-): houten-bureau-met-laptop.jpg
• Voeg belangrijke zoekwoorden toe in de bestandsnaam (zoals productnaam, kleur of materiaal).
• Gebruik mapstructuren zoals: /media/producten/stoelen/ of /fotos/team/

Extra tip: Gebruik een consistent systeem voor versies, zoals productnaam-vooraanzicht-v1.jpg, zodat herzieningen makkelijk terug te vinden zijn.

Productfotografie webshop

Bij een webshop draait alles om beeld. De bezoeker kan het product niet voelen of passen, dus de foto’s moeten overtuigen. Denk aan detail, realisme en consistentie.

Goede productfoto’s zijn essentieel voor het verhogen van conversies in een webshop. Zorg voor een neutrale, egale achtergrond (bij voorkeur wit of lichtgrijs) zodat het product centraal staat en niets afleidt. Gebruik natuurlijk daglicht of zachte, diffuse verlichting om schaduwen te minimaliseren en de kleuren realistisch weer te geven. Fotografeer het product vanuit meerdere hoeken en voeg eventueel detailshots toe van belangrijke kenmerken of textuur.

Voor elk product zijn in ieder geval ongeveer deze beelden aan te raden:

• Vooraanzicht
• Zijaanzicht
• Achteraanzicht
• Detailopname (zoals materiaal, sluiting, stiksel)

Consistency is key: gebruik hetzelfde standpunt, licht en achtergrond voor alle producten binnen een categorie. Dit zorgt voor een professionele en overzichtelijke uitstraling op de webshop. Denk ook aan schaal — laat het product in verhouding zien, bijvoorbeeld in een hand of naast een bekend object, zodat klanten beter kunnen inschatten hoe groot het is.

Tip: Voeg een object of hand toe om de schaal van het product te verduidelijken (bijvoorbeeld een muntje naast een sieraad).

Website fotografie voorbereiden

Een goede voorbereiding voorkomt frustratie en bespaart kostbare tijd tijdens én na de fotoshoot. Stem daarom altijd vooraf af met de opdrachtgever of webdesigner. Vraag wat het doel van de foto’s is: worden ze gebruikt als sfeerbeelden, productfoto’s, portretten of banners? Hoe en waar worden de foto’s toegepast — op een webshop, in sliders, op social media of in een nieuwsbrief? Dit bepaalt immers het gewenste beeldformaat, de compositie en de uitsnijding.

Informeer ook of er specifieke richtlijnen zijn qua stijl, kleurgebruik, uitsnede of positionering. Denk aan het gebruik van negatieve ruimte voor tekst, het vermijden van drukke achtergronden of het aanhouden van een bepaalde beeldtaal die past binnen de branding. Vraag indien mogelijk om voorbeelden van bestaande beelden of een visuele moodboard. Hoe beter je inzicht hebt in de context en het doel, hoe gerichter je kunt fotograferen — en hoe groter de kans dat de beelden direct bruikbaar zijn zonder extra nabewerking.

Tip: Lever een previewset op lage resolutie ter goedkeuring voordat je definitieve beelden oplevert. Dit is snel na de shoot te realiseren en voorkomt een lange doorlooptijd.

Wil je je verdiepen in hoe je afbeeldingen écht goed optimaliseert voor website snelheid, SEO en gebruikerservaring?

Lees dan ons aanvullende artikel: Afbeeldingen optimaliseren voor WordPress.