De traditionele header afbeelding is al sinds mensenheugenis, of nou ja sinds het Internet mainstream werd, een staple voor de gemiddelde website.Het is die grote afbeelding bovenaan de pagina, meestal een foto van een persoon of product. Het is een standaard onderdeel geworden van het ontwerp van websites, maar het dient niet altijd een doel – soms is het zelfs niet nodig. Nu de performance van je website ook een belangrijke ranking factor is geworden, wordt het eens tijd om het nut van de vertrouwde header afbeelding onder de loep te nemen.
Esthetiek en ontwerpprincipes
Oke, ik ben uiteraard geen graphic designer. Ik zal dan ook niet pretenderen hier een expert in te zijn. Maar ook gebruiksgemak is inmiddels een ranking factor. Dus ik ga even net doen alsof. Je headerafbeelding kan esthetisch mooi zijn, maar werkt hij echt binnen het totale websiteontwerp? En is hij ook functioneel. Verwijdering ervan kan helpen om evenwicht op je site te creëren. Want je geeft andere elementen een centrale plaats. Je plaatst meer de aandacht op waar het echt om gaat, zoals een call-to-action, contact button of belangrijke productgroep. In plaats van een grote foto die vaak alleen maar afleidt.
Performance en Core Web Vitals
Met de introductie van de Core Web Vitals is laadtijd een belangrijke factor geworden. De Largest contentful paint is één van de core web vitals. In het kort beschrijft deze hoe snel het grootste gedeelte content in de viewport geladen wordt, m.a.w. je headerafbeelding. Afbeeldingen behoren vaak tot de grootste boosdoeners als het gaat om trage laadtijden, omdat ze meer bronnen vereisen dan tekst of code. De score van de LCP zal er aanzienlijk op vooruit gaan als je je header afbeelding gewoon resoluut naar de prullenbak verwijst.
Inhoudelijke benadering
Als mensen een website bezoeken, willen ze snel en gemakkelijk informatie vinden. Nu de smartphone niet meer weg te denken is in onze samenleving is dit belangrijker dan ooit. En daarbij wil je dus niet afgeleid worden door onnodige elementen zoals een te grote headerafbeelding. Een goede manier om voorrang te geven aan inhoud boven beeldmateriaal is de zogenaamde “content-first” benadering. Hierbij ligt de nadruk op leesbaarheid en duidelijkheid boven flitsende afbeeldingen. Dit betekent dat lange stukken tekst worden opgedeeld in kleinere stukken met behulp van koppen en subkoppen, zodat lezers snel door een artikel kunnen scannen zonder te verdwalen in te veel tekst of visuals. En je kunt uiteraard kleinere banners, afbeeldingen en iconen gebruiken om je teksten even te breken.
Visuele rommel leidt tot cognitieve overbelasting
Een headerafbeelding wordt meestal bovenaan de pagina boven alle andere inhoud geplaatst. Maar afhankelijk van hoe groot hij is, kan die ene afbeelding het hele scherm in beslag nemen, waardoor gebruikers moeilijk kunnen vinden wat ze zoeken. Als je bovendien te veel afbeeldingen op je website zet, kunnen bezoekers overweldigd raken door alle visuele prikkels, wat kan leiden tot cognitieve overbelasting. Probeer om dit te voorkomen onnodige visuals te verwijderen, zoals headerafbeeldingen of banners die geen echte waarde toevoegen aan je inhoud.
Al met al kan het verwijderen van de headerafbeelding van je website gewoon gunstig zijn voor zowel bezoekers als zoekmachineoptimalisatie (SEO). Door je webontwerp te stroomlijnen door afleidingen als te grote bannerafbeeldingen of flitsende animaties die geen waarde toevoegen aan je inhoud of merkboodschap te beperken, kun je in één klap een prettige gebruikerservaring creëren en tegelijkertijd de SEO-prestaties verbeteren! Dus als je een eenvoudiger lay-out wilt met een betere bruikbaarheid en betere SEO-rankings na verloop van tijd – dan is het misschien tijd om die headers te dumpen!
