Zit jij ook altijd te stoeien om een mooie header te maken voor jouw website? 😅 Blijft hij wazig of krijg je hem maar niet op de goede plek? Bij deze deel ik 5 technische tips voor het instellen van een goede headerfoto.
📷 Kies een goede foto
De header is het allereerste wat een bezoeker ziet als ze op je website of pagina komen, dus natuurlijk kies je een mooie foto die de aandacht trekt. Probeer een foto te kiezen die niet al te druk is.
Wil je ook een tekst op de header plaatsen, kies dan bijvoorbeeld een foto waar het onderwerp aan de linkerkant staat, zodat je rechts de tekst kunt plaatsen. Is de achtergrond te druk waardoor de tekst niet goed leesbaar is? Zet de tekst dan op een gekleurde (eventueel semi-transparante) achtergrond.
📂 Let op het bestandsformaat
Te grote bestanden kunnen je website erg vertragen. Zorg er daarom voor dat je afbeeldingen niet te groot zijn. Ik krijg heel vaak de vraag hoe groot een afbeelding moet zijn in pixels. Ik hou altijd als stelregel aan, dat een paginabrede afbeelding circa 2000 px (1920 is een meer gebruikte waarde) groot moet zijn. Dan is hij op de meeste schermen scherp genoeg.
De hoogte hangt heel erg af van de foto in kwestie of de eventuele tekst of andere content die je in de header zet.
Qua type bestand kan je het beste kiezen voor jpg. Tegenwoordig wordt WebP ook steeds meer gebruikt.
↔️ Positioneer hem goed
Heb je ook vaak last van de situatie zoals in de video hiernaast? Wanneer je een foto als achtergrond voor je header instelt, gebruikt hij niet standaard de hele hoogte van de foto, maar alleen de ruimte die hij nodig heeft (afhankelijk van de rest van de inhoud in de header en marge of padding die je instelt). Hij zal dan standaard de foto centreren.
Dit kan er dan goed uitzien op jouw scherm, maar ga je dan kijken op een ander (groter) scherm, dan zijn de verhoudingen van de header heel anders en wordt er een deel van de foto weggesneden. Zo kunnen personen plots onthoofd worden!
Bij de meeste pagebuilders kan je de achtergrondfoto positioneren, zodat je bijvoorbeeld altijd de bovenkant in beeld houdt als de foto groter schaalt, of vanaf een bepaald percentage van de foto.
🧮 Let op de foto-optimalisatie
Tegenwoordig kan je allerlei tooltjes op je website installeren die ervoor zorgen dat je afbeeldingen gecomprimeerd worden. Dat is erg fijn voor de snelheid van de website en is vaak visueel nauwelijks te zien. Maar een headerfoto, die vaak paginabreed is, kan wel wazig worden als hij teveel wordt geoptimaliseerd. Kijk daarom altijd goed hoe de header eruit ziet en of hij niet erg ‘pixelachtig’ is. Zet anders de optimalisatie van deze specifieke foto wat lager (hoe je dat doet, hangt af van de tool die je gebruikt).
📱 Kies eventueel een andere header voor mobiel
Tegenwoordig is het aandeel mobiele bezoekers ongeveer net zo groot als het aandeel desktop bezoekers. Waarschijnlijk bij de meer jongere generatie zelfs groter. Daarom is het ook belangrijk dat je webpagina’s er goed uit zien op mobiel. Een mobiele telefoon heeft natuurlijk een hele andere verhouding dan een desktop beeldscherm. Het scherm is veel smaller en meer verticaal georiënteerd. Daarom werkt vaak de headerfoto die je voor desktop gekozen hebt niet voor mobiel. Wanneer dat het geval is, kan je dus beter een andere headerfoto (die meer verticaal georiënteerd is) gebruiken voor mobiel. Bij de meeste pagebuilders kan je dit apart instellen.