Waarom wordt een banner of header op mobiel anders uitgesneden?

Zie je op je computer de volledige banner- of headerafbeelding, maar valt op je telefoon een deel van de afbeelding buiten beeld? Dat is meestal normaal.

Een computerscherm is breed, terwijl een telefoonscherm juist smal en hoog is. Om de afbeelding op beide schermen mooi het beschikbare vlak te laten vullen, moet de website de afbeelding soms automatisch uitsnijden.

Hierdoor kan een deel van de afbeelding op mobiel buiten beeld vallen.

Waarom gebeurt dit?

Stel dat je een brede foto gebruikt waarop een persoon helemaal aan de rechterkant staat. Op een computer is daar voldoende ruimte voor.

Op een telefoon is die ruimte er niet. De website moet de brede afbeelding passend maken voor een veel smaller scherm. 

Daardoor kunnen de linker- en rechterkant van de foto gedeeltelijk verdwijnen.

De afbeelding is dus niet kapot of verkeerd geüpload. De beschikbare ruimte is simpelweg anders.

Hier kun je rekening mee houden

Niet iedere afbeelding is even geschikt als banner of header. Met een paar eenvoudige aandachtspunten kun je voorkomen dat belangrijke delen op mobiel verdwijnen.

1. Houd het belangrijkste onderwerp rond het midden

Kies bij voorkeur een foto waarbij het belangrijkste onderwerp niet helemaal aan de zijkant staat.

Een persoon, product of ander belangrijk onderdeel rond het midden van de afbeelding blijft bij verschillende schermformaten meestal beter zichtbaar.

2. Zorg voor voldoende ruimte rondom het onderwerp

Kies een afbeelding met wat extra ruimte rondom personen, producten of andere belangrijke onderdelen.

Staat het onderwerp heel dicht tegen de rand? Dan is de kans groter dat een deel ervan op een kleiner scherm buiten beeld valt.

3. Zet belangrijke tekst liever niet in de afbeelding

Gebruik liever geen afbeelding waarin belangrijke tekst, een telefoonnummer of andere informatie is verwerkt.

Als de afbeelding op mobiel wordt uitgesneden, kan deze tekst gedeeltelijk of helemaal verdwijnen.

Kan de tekst als gewone tekst op de website worden geplaatst? Dan heeft dat meestal de voorkeur. Zo blijft de informatie op verschillende schermformaten goed leesbaar.

Werkt mijn afbeelding niet goed op mobiel?

Soms is een afbeelding technisch helemaal in orde, maar simpelweg minder geschikt als banner.

Wordt bijvoorbeeld een persoon steeds ongelukkig afgesneden of verdwijnt een belangrijk onderdeel van de foto? Ga dan niet zomaar allerlei instellingen van de header aanpassen.

We kunnen kijken of een andere uitsnede beter werkt. In sommige situaties kan ook een aparte afbeelding voor mobiel een betere oplossing zijn.

Goed om te weten

Een banner hoeft op mobiel niet precies hetzelfde te worden weergegeven als op een computer.

Het belangrijkste is dat de afbeelding er op beide schermformaten goed uitziet en dat belangrijke onderdelen zichtbaar blijven.

Anders uitgesneden betekent dus niet automatisch dat er iets mis is.

Kom je er niet uit?

Wordt jouw banner of header op mobiel niet mooi weergegeven? Stuur ons dan:

• de URL van de betreffende pagina;
• de originele afbeelding die je gebruikt;
• een screenshot van de mobiele weergave;
• eventueel welk gedeelte van de afbeelding volgens jou zichtbaar moet blijven.

Wij kijken met je mee en bepalen welke uitsnede het beste werkt. Als het nodig is, kunnen we ook kijken naar een aparte afbeelding voor de mobiele weergave.