Welk formaat moet een headerfoto voor mijn website hebben?

Wil je een nieuwe foto gebruiken in de header van je website? Dan is er helaas niet één formaat dat voor iedere website perfect werkt.

De juiste afmetingen en verhouding hangen af van het ontwerp van jouw website. Een brede banner vraagt bijvoorbeeld om een andere afbeelding dan een hoge header.

Belangrijk is vooral dat de afbeelding scherp genoeg is én voldoende ruimte rondom het belangrijkste onderwerp heeft.

Waar kun je zelf op letten?

Voor een grote header op een computer kun je meestal het beste beginnen met een brede afbeelding van goede kwaliteit.

1. Kies een afbeelding van goede kwaliteit

Gebruik bij voorkeur een scherpe JPEG- of WebP-afbeelding.

Voor een grote header op desktop adviseren we meestal een bronafbeelding van minimaal ongeveer 1920 pixels breed.

Dit is een richtlijn en geen vaste regel. Voor jouw website kan een ander formaat of een andere verhouding beter werken.

2. Kies bij voorkeur een brede afbeelding

Een header neemt op een computer vaak een groot deel van de breedte van het scherm in.

Een brede foto is daarom meestal geschikter dan een hoge of vierkante afbeelding.

3. Houd het belangrijkste onderwerp uit de randen

Staat er een persoon, product of ander belangrijk onderwerp op de foto? Zorg dan dat dit niet te dicht tegen de rand staat.

Op kleinere schermen wordt een headerafbeelding namelijk vaak automatisch uitgesneden. Een gedeelte van de linker- en rechterkant kan daardoor op een telefoon buiten beeld vallen.

Een afbeelding met voldoende vrije ruimte rondom het belangrijkste onderwerp werkt meestal het beste.

4. Gebruik liever geen belangrijke tekst in de foto

Staat er tekst in de afbeelding zelf? Dan bestaat de kans dat deze op een kleiner scherm wordt afgesneden of slecht leesbaar wordt.

Belangrijke teksten, zoals een slogan, telefoonnummer of knoptekst, plaatsen we daarom liever als gewone tekst op de website.

Zo blijft de informatie op verschillende schermformaten goed leesbaar.

Waarom ziet dezelfde headerfoto er op mobiel anders uit?

Een computerscherm is breed. Een telefoonscherm is juist smal en hoog.

Om dezelfde afbeelding op beide schermen mooi het beschikbare vlak te laten vullen, moet de website de foto soms uitsnijden.

Het is daarom normaal dat je op mobiel een ander gedeelte van de afbeelding ziet dan op een computer.

Goed om te weten

1920 pixels breed is een handige richtlijn, geen verplicht formaat.

De beste afmetingen hangen af van de plek waar de afbeelding wordt gebruikt en van het ontwerp van jouw website.

Twijfel je over een afbeelding? Maak deze dan niet zelf steeds groter, kleiner of in verschillende formaten. Stuur de originele foto naar ons. Wij kunnen aangeven welke verhouding en uitsnede het beste werkt.

Kom je er niet uit?

Geen probleem. Stuur ons:

• de originele afbeelding die je wilt gebruiken;
• de URL van de pagina waarop de header moet komen;
• eventueel welk gedeelte van de afbeelding zeker zichtbaar moet blijven.

Wij kijken met je mee en geven aan welk formaat en welke uitsnede het beste bij jouw website passen.