En köpare från tillverkningsindustrin landar på din webbplats och ser en hero-bild av en snygg SaaS-dashboard. En prospekt från fintech kommer dit och får samma bild. Ingen av dem känner att sidan är gjord för dem, och båda lämnar inom några sekunder. Problemet är inte att bilder på landningssidan saknas. Problemet är att samma bilder visas för alla, oavsett vilka de är eller vad de behöver.
Bilder på landningssidor väljs en gång, oftast av den som designade sidan, och visas sedan för varje besökare. På en B2B-webbplats med flera branscher och köparroller betyder det att de flesta besökare ser en bild av någon annans verklighet. Att matcha huvudbilden mot besökarens bransch, roll eller fas är en av de billigare formerna av personalisering, eftersom den inte kräver ny text, men den hjälper bara om bilden säger något specifikt. Det här inlägget går igenom vad varje bildtyp är till för, när video är värd sin vikt, hur du kopplar bilder till segment och de detaljer kring prestanda och tillgänglighet som avgör om något av det fungerar.
Varför generiska bilder på landningssidor misslyckas inom B2B
Bilder är oftast det första besökarens blick landar på, så de formar första intrycket innan rubriken har lästs. En generisk bild skadar inte mycket i sig; kostnaden är den missade chansen att visa besökaren något de känner igen.
För B2B-företag med flera köparpersonas skapar en enda uppsättning bilder en strukturell nackdel. En VP of Engineering som utvärderar din plattform har andra visuella förväntningar än en CMO som gör samma sak. Den ena vill se teknisk arkitektur, integrationer eller dataflöden. Den andra reagerar på dashboards, kampanjmått eller ROI-diagram. När båda ser samma generiska kontorsfoto får ingen av dem den relevanssignal som får dem att fortsätta scrolla. Detsamma gäller annonsen som tog dit dem; vår guide om när du ska använda responsiva displayannonser visar hur du håller displaymaterialet i linje med sidan.
Stockfoton på människor som skakar hand på ett glaskontor är den vanliga syndaren. De känns lätt igen som stockfoton, så de tillför ingenting, och de tar platsen där en produktskärmdump, en riktig kund eller ett diagram över arbetsflödet kunde ha stått. Om du testar en sak i en landningssidas bilder, testa en riktig bild (din produkt, dina kunder, ditt team) mot stockfotot.
Matcha bilder med besökarsegment
Idén bakom personaliserade bilder är att korta tiden mellan ankomst och ”det här är för mig”. Det praktiska sättet att göra det är att mappa bildvarianter till segment du redan följer. Om du använder besöksidentifiering för att se företagets bransch, storlek eller geografi kan samma datapunkter styra vilka bilder som visas på sidan.
Sätt att koppla segment till bilder:
Branschbaserade bilder. Visa ett fabriksgolv för besökare från tillverkningsindustrin. Visa en tradingdesk för finansbranschen. Visa ett arbetsflöde på ett sjukhus för vården. Produkten som säljs är densamma, men det visuella sammanhanget ändras för att matcha besökarens vardag.
Rollbaserade bilder. Tekniska köpare reagerar på arkitekturdiagram, kodavsnitt och integrationsflöden. Affärsköpare reagerar på dashboards, diagram och resultatmått. Att matcha bildspråket med köparens expertis signalerar att du förstår deras perspektiv.
Bilder efter fas. Förstagångsbesökare har nytta av övergripande illustrationer av fördelarna som visar vad du gör. Återkommande besökare som redan har tagit del av produktinnehåll reagerar bättre på detaljerade skärmdumpar, jämförelsetabeller eller bevis från kunder.
Företagsstorlek. Enterprise-besökare kan reagera på bilder som visar skala, säkerhetscertifieringar eller arbetsflöden med flera team. Mindre företag känner igen sig i bilder som visar snabbhet, enkelhet och snabba vinster.
Bildtyper och när var och en fungerar bäst
Olika visuella element fyller olika funktioner på en landningssida. Att förstå skillnaderna hjälper dig att göra medvetna val om vad som ska personaliseras och vad som ska vara statiskt.
Hero-bilder skapar det första intrycket och ramar in hela värdeerbjudandet. De tar den mest värdefulla ytan på sidan. En hero-bild som visar produkten i användning, helst med data eller i en miljö som besökaren känner igen, säger mer än en abstrakt grafik. På personaliserade sidor är hero-bilden det naturliga första elementet att variera, eftersom alla som landar ser den.
Produktskärmdumpar ger konkreta bevis på vad du säljer, men de kan få sidor att kännas röriga om de används slarvigt. En enda kommenterad skärmdump som lyfter fram de funktioner som är mest relevanta för besökarens användningsfall fungerar bättre än flera okommenterade. Om din data om segmentering säger att en besökare bryr sig om analys, visa analysdashboarden. Om hen bryr sig om integrationer, visa integrationspanelen.
Illustrationer och skräddarsydd grafik är utmärkta för att förenkla det komplexa. När du behöver förklara ett abstrakt arbetsflöde eller en process i flera steg förmedlar skräddarsydda illustrationer på några sekunder vad som annars skulle kräva flera stycken. De är särskilt användbara på personaliserade sidor där förklaringen behöver anpassas efter besökarens tekniska kunskapsnivå. Notera vilken bild varje avsnitt behöver i copy-briefen för landningssidan så att design och text planeras tillsammans.
Bilder med socialt bevis omfattar kundlogotyper, teamfoton och miniatyrer för kundcase. De kan personaliseras genom att visa logotyper från besökarens bransch eller storleksklass. Ett mellanstort SaaS-företag som ser logotyper från andra mellanstora SaaS-företag känner sig tryggare än av Fortune 500-logotyper det inte kan relatera till. Våra exempel på B2B-landningssidor visar vilket bevis varje sidtyp bör inleda med.
Bakgrundsbilder skapar stämning utan att kräva uppmärksamhet. Subtila övertoningar eller geometriska mönster fungerar ofta bättre än fotografiska bakgrunder eftersom de ger djup utan att distrahera. De behöver sällan personaliseras, eftersom deras roll är att stödja, inte att signalera relevans.
Video på en landningssida: när den förtjänar sin plats
Video är det tyngsta visuella element du kan lägga till, både i sidvikt och i den uppmärksamhet det kräver. Vår syn: en video på en landningssida ska besvara en fråga som besökaren inte kan besvara utifrån en skärmbild, oftast ”hur ser det ut när någon faktiskt använder det här?” Om videon upprepar rubriken med musik i bakgrunden gör en välvald skärmbild samma jobb snabbare. För video utöver landningssidor, se vår guide till videomarknadsföring för B2B.
Där video brukar löna sig på B2B-sidor:
- Produktgenomgångar på demo- och registreringssidor. Sextio till nittio sekunder som visar kärnflödet låter en besökare kvalificera sig själv innan de bokar ett samtal. Håll muspekaren långsam och gränssnittet läsbart i den storlek videon spelas upp.
- Kundberättelser på sidor i sena skeden. En kund som förklarar problemet med egna ord är ett bevis som en logotyp inte kan ge. Placera den bredvid påståendet den stöder, inte i ett separat videogalleri.
- Sidor för webbinarier och event. Ett 30 sekunder långt klipp med talaren visar att sessionen är värd tiden. Efter eventet ersätts det av inspelningen.
Och där den oftast inte gör det: som en bakgrundsloop som spelas automatiskt bakom rubriken (den konkurrerar med texten och kostar laddningstid), och som enda sättet att få fram nyckelinformation (många B2B-besökare surfar på jobbet med ljudet avstängt).
Lägga till video utan att göra sidan långsammare
- Använd en affischbild och ladda spelaren vid klick. En fullständig inbäddning från YouTube eller Vimeo laddar sina skript innan någon trycker på play. Googles Lighthouse-dokumentation rekommenderar lazy loading av tredjepartsinbäddningar bakom en fasad, en statisk förhandsvisning som byts mot den riktiga spelaren vid interaktion.
- Lazy-loada inbäddningar nedanför vecket. Att lägga till
loading="lazy"på iframes skjuter upp spelare utanför skärmen, enligt beskrivningen i web.dev:s guide till lazy loading av iframes. - Texta allt. Undertexter hjälper tittare som har ljudet av och är ett tillgänglighetskrav för förinspelad video med ljud.
- Håll CTA:n synlig utan videon. Formuläret eller knappen ska aldrig vara beroende av att någon tittar till slutet.
Mät om videon hjälper
GA4:s förbättrade mätning registrerar händelserna video_start, video_progress och video_complete för inbäddade YouTube-videor som har stöd för JS API aktiverat. Två siffror är viktigare än visningar: uppspelningsgraden (uppspelningar delat med sidbesökare) och konverteringsgraden för besökare som spelade upp videon jämfört med dem som inte gjorde det. Var försiktig med den andra. Besökare som trycker på play är redan mer engagerade, så en högre konverteringsgrad bland tittare bevisar inte att videon orsakade den. Det rättvisa testet är ett A/B-test av sidan med och utan video, bedömt på konverteringar, inte tittartid.
Video går också bra att personalisera. En besökare från tillverkningsindustrin och en från mjukvarubranschen kan se samma genomgång inspelad på två olika demodataset, vilket är billigare än det låter när manuset väl finns.
Visuell hierarki på personaliserade sidor
Bilder styr hur besökare rör sig genom en sida. På texttunga sidor skummar man oftast längs toppen och sedan ner längs vänsterkanten (F-mönstret); på glesa sidor rör sig blicken ofta i sicksack från övre vänstra till övre högra hörnet och nedåt. Placera bilder med de banorna i åtanke.
Placera din personaliserade hero-bild högst upp i F:et, där blicken landar först. Stödjande bilder placeras längs den vertikala läsvägen. Om du använder riktningssignaler i bilderna, som en persons blick eller en pil i ett diagram, låt dem peka mot din uppmaning till handling i stället för bort från den.
Storlek skapar hierarki. Större bilder signalerar vikt. Om du vill att en besökare från ett målkonto ska fokusera på ett specifikt resultat eller en specifik förmåga, gör den bilden till det dominerande visuella elementet på sidan. Sekundära bilder, som kundlogotyper eller kompletterande skärmdumpar, ska vara mindre så att de förstärker utan att konkurrera.
Ge huvudbilden utrymme. En tydlig bild som matchar segmentet, med luft runt omkring, läses snabbare än tre trånga bilder som konkurrerar om uppmärksamheten, och det är en variant att underhålla i stället för tre.
Ett arbetsflöde steg för steg för att personalisera bilder på landningssidor
Att införa bildpersonalisering kräver inte att du bygger om hela webbplatsen. Här är ett praktiskt arbetsflöde som börjar i liten skala och växer.
Steg 1: välj dina största kvalificerade segment. Hämta data från ditt analysverktyg eller verktyg för besökaridentifiering. Vilka branscher, företagsstorlekar eller roller står för huvuddelen av din kvalificerade trafik? Börja med segment som är tillräckligt stora för att mäta och tillräckligt distinkta för att olika bilder verkligen ska vara motiverade.
Steg 2: Gå igenom bilderna på dina nuvarande landningssidor. Lista varje bild på dina landningssidor med mest trafik. Fråga för var och en: tilltalar den alla tre segmenten lika mycket? Om ja är den antingen en stark universell bild eller en generisk bild som inte tilltalar någon. Flagga bilder där en segmentspecifik variant kan öka relevansen.
Steg 3: skapa 2–3 bildvarianter per markerad plats. Du behöver ingen fullständig omdesign. För hero-bilder kan det innebära tre versioner av samma layout med olika bakgrundsbilder, olika produktskärmdumpar eller olika illustrationer av användningsfall. Håll kompositionen och CTA-placeringen konsekventa så att du testar bildinnehållet, inte sidans struktur.
Steg 4: Sätt upp segmentbaserade visningsregler. Koppla varje variant till sitt målsegment i din personaliseringsplattform. Definiera en standardversion för besökare som inte matchar något segment. Testa att rätt bilder visas för rätt besökare genom att förhandsgranska med testkonton från varje segment.
Steg 5: mät och iterera. Följ konverteringsgraden per segment, inte bara totalt. En hero-bild som ökar konverteringarna för besökare från tillverkningsindustrin kan försämra resultatet för SaaS-besökare. Kör A/B-tester inom varje segment för att isolera effekten av bildändringar från andra element på sidan. Bestäm urvalsstorleken innan testet startar (vår guide om urvalsstorlek för A/B-tester visar hur), kör i minst två hela veckor och avbryt inte i förtid bara för att dashboarden ser bra ut.
Teknisk prestanda: hastighet kontra visuell kvalitet
En personaliserad hero som dyker upp sent är sämre än en generisk som kommer i tid. Hero-bilden är ofta elementet för Largest Contentful Paint, så dess storlek och laddningsordning avgör hur snabb sidan känns.
Använd moderna format. Googles dokumentation anger att destruktivt komprimerade WebP-bilder är 25–34 % mindre än jämförbara JPEG-bilder och förlustfria WebP-bilder 26 % mindre än PNG. AVIF komprimerar ofta ännu mer. Leverera AVIF eller WebP med JPEG som reserv via elementet <picture>.
I stället för att kopiera någon annans storleksgränser, sätt en budget för dina egna sidor: kontrollera hero-sektionens filstorlek och LCP i PageSpeed Insights med mobilprofil, och behandla varje variant som är märkbart tyngre än standardsidan som en bugg.
Använd responsiva bilder med srcset-attribut. Att skicka en 2000 px bred bild till en mobilbesökare slösar bandbredd och fördröjer renderingen. Låt webbläsarna välja bilden i rätt storlek utifrån visningsytans bredd. För personaliserade sidor innebär det att varje bildvariant behöver sin egen uppsättning responsiva storlekar, men byggverktyg kan automatisera det.
Lazy-loada inte herobilden. Den ligger ovanför vecket, så lazy loading fördröjer den; märk den i stället med fetchpriority="high" och lazy-loada bara bilder längre ner. För segmentvarianter avgör den renaste lösningen varianten på servern eller i edge, så att rätt bild finns i HTML:en från början. Sker bytet på klientsidan, reservera bildens mått så att layouten inte hoppar när den laddas.
Tillgänglighet för alla bildvarianter
Varje personaliserad bildvariant behöver sin egen alt-text. En herobild som visar ett arbetsflöde inom tillverkning ska ha en alt-text som beskriver den scenen, inte en generisk alt-text som kan passa vilken variant som helst. Skärmläsare läser upp det som finns på sidan, och alt-texten ska motsvara det som seende besökare i det segmentet faktiskt ser.
Bra alt-text beskriver bildens innehåll kortfattat och kopplar det till sammanhanget runt omkring. Håll den under 100 tecken. Dekorativa bilder (bakgrunder, utfyllnad) ska ha tomma alt-attribut så att skärmläsare hoppar över dem. Funktionella bilder som länkade grafiker behöver alt-text som beskriver länkens mål.
När bilder inte laddas visas alt-texten, vilket innebär att alt-texten fungerar som reserv även för seende besökare med långsamma anslutningar. När du har personaliserade bildvarianter är det ytterligare ett skäl till att varje variant behöver en unik, beskrivande alt-text i stället för en gemensam platshållare.
Vanliga misstag med personaliserade bilder
Team som är nya inom bildpersonalisering personaliserar ofta för mycket. Att byta varje bild på sidan efter besökarsegment skapar en underhållsbörda och späder ut effekten av de ändringar som verkligen spelar roll. Fokusera personaliseringen på en eller två bildplatser med störst effekt (oftast hero-sektionen och det främsta avsnittet med sociala bevis) och låt resten vara enhetligt.
Ett annat vanligt misstag är att använda segmentdata för att göra antaganden som känns påträngande. Att visa en besökare företagets logotyp innan hen har identifierat sig går över gränsen. Att visa bilder som är relevanta för deras bransch är hjälpsamt. Att visa deras kontorsbyggnad är obehagligt. Skillnaden går mellan kontextuell relevans och övervakning.
Att testa för många varianter samtidigt är en tredje fallgrop. Fyra segment gånger tre bildytor, med ett par varianter vardera, ger redan dussintals kombinationer, långt fler än B2B-trafik kan testa. Testa en variabel i taget inom varje segment, vänta på statistisk signifikans och bygg säkerhet i varje ändring innan du lägger på fler.
För team som arbetar enligt en bredare plan för optimering av B2B-landningssidor är bildpersonalisering ett rimligt tidigt steg, eftersom det kräver mindre nytt innehåll än textpersonalisering. Haken är att det förutsätter riktiga, segmentspecifika bilder; om allt du kan ta fram är en annan bildbanksbild per bransch, lägg hellre tiden på texten.
Var du ska börja
Ta din landningssida med mest trafik och titta på hero-bilden med en enda fråga: skulle en besökare från ditt största segment känna igen sitt eget arbete i den? Om inte, ersätt den med en produktskärmbild eller en kundbild som de skulle känna igen, och testa den mot den nuvarande. Först när en riktig bild slår bildbanksbilden är det värt att ta fram varianter per segment. Markettailor kopplar data från besöksidentifiering till innehållet på sidan, inklusive bilder, om du vill visa de varianterna utan att bygga reglerna själv.
