Heroshots og helsides bannere: Beste praksis (2026)

Helsides bildebannere gjør mye for førsteinntrykket i WordPress og på de fleste nettsider, men de kan fort bli en kostbar felle for både Core Web Vitals og AI-synlighet om de ikke er riktig optimalisert.

Her er mine beste råd for heroshots og store bildebannere på nettbutikker, events og bedriftsnettsteder i 2026:

Store bilder trenger ikke bety trege nettsider hvis du bruker moderne filformater og smarte beskjæringer.

Optimal størrelse for desktop: 1920 x 1080 px (16:9-format) fungerer best som standard for fullbredde. For store retina-skjermer kan du eksportere i opptil 2400 x 1350 px, gitt at filformatet er riktig.shopify+1
Mobiltilpasset (Art Direction): Last alltid opp et unikt, vertikalt banner for mobil, for eksempel 800 x 1200 px (2:3-format) eller 780 x 1200 px. Aldri la nettleseren bare «krympe» desktopbildet – da mister du fokuspunktet i motivet.resizepng
Filstørrelse og format: Maks 200 kb for desktop og under 100 kb for mobil. Glem JPEG og PNG (med mindre du trenger flat grafikk med gjennomsiktighet). I 2026 er det WebP eller det enda mer effektive AVIF-formatet som gjelder.shopify+2

For å rangere i Googles AI-oversikter og hos AI-agenter (GEO), må maskiner forstå verdiforslaget ditt umiddelbart.

Ikke brenn tekst inn i bildet: Bruk WordPress-blokker (f.eks. Cover-blokken) til å legge ekte H1-tekst og knapper over bildet .
Layout: Plasser hovedmotivet og tekstfeltet i midten eller litt til venstre. Det sikrer at motivet ikke kuttes på mobil og at CTA-knapper er innenfor tommelens rekkevidde.
Kontrast: Bruk en dempet gradient, et «overlay»-filter (f.eks. 30% svart) eller en «scrim» bak teksten for å sikre universell utforming og perfekt lesbarhet.

Reelle bilder overgår stock-foto: Mennesker (og konverteringsrater) reagerer best på ekte ansatte, ekte produkter og «bak kulissene»-bilder.
Fokus på konvertering: Unngå forstyrrende elementer i bildet som trekker blikket bort fra hovedbudskapet og CTA-knappen.
Arrangementer: Heroshots for events bør vise ekte stemning fra tidligere arrangementer (glade folk, aktivitet), ikke bare en illustrasjon.

Hero-bildet ditt er som regel ditt Largest Contentful Paint (LCP)-element. Rask innlasting her er kritisk for SEO i 2026. Sjekk Heroimage

Slå AV Lazy Loading for hero-bildet: Elementer «above the fold» skal aldri lazy-loades. Det forsinker LCP-scoren din massivt. (Bruk kun lazy loading på bilder under folden).involvedigital+1
Bruk Fetchpriority: Legg til attributtet fetchpriority="high" på hero-bildet ditt. Dette ber nettleseren laste ned dette spesifikke bildet før noe annet.heroimage+1
Reserver plass (Unngå CLS): Husk alltid å definere width og height (eller bruk CSS aspect-ratio) i bildekoden. Dette forhindrer at teksten under bildet «hopper» (Cumulative Layout Shift) når bildet omsider lastes inn.heroimage+1

Hold det friskt: Bytt banner ofte etter sesong, kampanjer eller eventer. Et oppdatert hero-bilde gir tilbakevendende brukere en følelse av at nettsiden lever.
Video-bannere: Vurder video-bannere for å skape wow-effekt, men kun om det er en kort loop (uten lyd) komprimert i moderne formater (WebM/MP4) og der du har satt et lynraskt «poster»-bilde (fallback-bilde) mens videoen laster.

Test før publisering: Bruk verktøy som Responsively App eller den innebygde WordPress-forhåndsvisningen for å sikre at ingenting kuttes på små skjermer.
Bruk en bildekompressor: Kjører du ikke AVIF direkte fra designprogrammet? Kjør bildet gjennom Squoosh.app før du laster det opp i WordPress.