Ta vilken webbplats som helst som tappade dig de första sekunderna och scrolla tillbaka till toppen. Chansen är stor att bilderna hade med saken att göra. Ett arkivfoto av leende främlingar som inte alls liknar de människor företaget faktiskt betjänar. En huvudbild så vag att den kunde tillhöra vilket företag som helst i vilken bransch som helst. Eller inga bilder alls, så att sidan känns kal och ofärdig. Bilder på en webbplats är inte dekoration. De är kommunikation. Den här artikeln går igenom vad webbplatsbilder faktiskt gör, hur du väljer rätt, var de hör hemma på varje sida och vad som händer när du gör fel.
Besökare bearbetar bilder snabbare än ord. Innan någon läser din rubrik har hjärnan redan format ett första intryck av det visuella. Det betyder att dina bilder för fram ett argument om ditt företag innan du själv hunnit göra det. Frågan är om det argumentet är det du vill föra fram.
Vad gör webbplatsbilder egentligen?
Varje bild på din webbplats säger något till besökaren. Huvudbilden på startsidan säger "det här är den sortens företag vi är och det här är vilka vi finns för". Fotot på om oss-sidan säger "här finns riktiga människor". Produktbilden på tjänstesidan säger "det här får du när du arbetar med oss".
När de signalerna är tydliga och relevanta känner besökare att de hittar rätt. När de är vaga eller generiska känner besökare ingenting, vilket är det sämsta utfallet. En besökare som inte känner något har inget skäl att fortsätta läsa.
Bilder styr också var blicken går. Det är kärnan i visuell hierarki på en sida. En väl placerad bild drar uppmärksamheten mot avsnittet som betyder något. En dåligt placerad bild delar uppmärksamheten och gör besökaren osäker på var hen ska titta härnäst. Varje bild ska förtjäna sin plats genom att hjälpa besökaren åt rätt håll.
Egna foton eller arkivfoton: spelar det någon roll?
Ja. Mer än de flesta tror.
Besökare är bättre på att upptäcka arkivfoton än de var för fem år sedan. Det perfekt belysta mötesrummet med fyra mångsidiga yrkespersoner som nickar åt en laptop. Handslaget framför en stadssilhuett. Kvinnan som ler med en kaffekopp. De här bilderna är så vanliga att besökare har utvecklat ett slags visuell immunitet mot dem. De ser dem och registrerar ingenting.
Egna foton gör tvärtom. Ett foto av din verkliga butik, ditt verkliga team, ditt verkliga färdiga arbete. De här bilderna är specifika för dig och bara dig. En besökare som ser dem får bevis för att ett verkligt företag finns bakom webbplatsen, vilket är en av de mest värdefulla sakerna en bild kan förmedla. Även ett mobilfoto taget i bra ljus är ofta effektivare än en polerad arkivbild, eftersom det är äkta.
Som sagt har arkivfoton sin plats. För bloggartiklar, för att illustrera abstrakta begrepp och för att fylla sekundära bildplatser där det konkreta spelar mindre roll gör ett välvalt arkivfoto jobbet. Regeln är: använd egna foton där förtroendet står på spel och arkivfoton där bilden bara stödjer innehållet i stället för att göra ett påstående om ditt företag.
Hur väljer du rätt bild till varje sida?
Innan du letar efter en bild, fråga vilket jobb den ska göra på just den sidan.
På din startsida ska huvudbilden förmedla vad du gör och för vem innan någon läser ett ord. Om en besökare kunde titta på huvudbilden ensam och inte ha en aning om vilken bransch du är i gör bilden inte sitt jobb.
På din om oss-sida ska bilden vara personlig. Visa människorna. Visa lokalen. Visa något som gör att företaget känns mänskligt och konkret i stället för företagsmässigt och anonymt.
På en tjänste- eller produktsida, visa resultatet. Före och efter för ett renoveringsföretag. En skärmdump av dashboarden för ett mjukvaruverktyg. Ett foto av den färdiga rätten för ett cateringföretag. Resultatbilder är mer övertygande än processbilder eftersom de svarar på frågan en besökare faktiskt ställer: vad har jag när det här är klart?
När du vet jobbet hittar du bilden. Inte tvärtom.
Vad gör att en bild motverkar dig?
Irrelevans
En bild som inte har något särskilt att säga om ditt företag, din tjänst eller din kund talar om för besökaren att ingen har tänkt noga på webbplatsens visuella upplevelse. Det intrycket sitter kvar.
Missmatch
Om din text är varm och vardaglig men dina bilder är kalla och företagsmässiga känns sidan osammanhängande. Besökare märker den dissonansen även om de inte kan sätta ord på den. Bildens stämning och textens stämning måste stämma överens.
Långa laddningstider
Stora, okomprimerade bilder är den enskilt vanligaste orsaken till att webbplatser laddar långsamt. En sida som tar mer än tre sekunder att ladda på mobilen tappar en betydande del av sina besökare innan något syns. Varje bild du laddar upp ska vara komprimerad för webben. De flesta webbplattformar sköter en del av det automatiskt, men det är bra att veta vad du laddar upp. Se hur webbplatshastighet påverkar besökare och sökplaceringar för hela bilden.
Saknad alt-text
Varje bild på din webbplats behöver en kort beskrivning av vad den visar, skriven i alt-textfältet. Det spelar roll av två skäl. Besökare som använder skärmläsare förlitar sig på alt-text för att förstå vad en bild innehåller. Sökmotorer använder alt-text för att indexera bilder. Att hoppa över den är ett snabbt sätt att förlora både tillgänglighet och SEO-värde.
Var ska bilder placeras på dina sidor?
Det finns ingen allmängiltig regel för bildplacering, men några mönster fungerar genomgående.
Placera din starkaste bild där besökare tittar först. På de flesta sidor är det den översta delen, ovanför vecket. Om en besökare scrollar ner innan hen bestämmer sig för att läsa fångar den andra bildplatsen, någonstans mitt på sidan, hen mitt i scrollen. En tredje bild nära botten av en lång sida engagerar åter besökare som har läst nästan hela vägen.
Använd bilder för att bryta upp långa textavsnitt, men bara när bilden tillför något. En bild som illustrerar poängen i stycket bredvid gör ett jobb. En bild som placeras där bara för att avsnittet kändes för långt är utfyllnad, och besökare ser det.
På mobil förskjuts bildplaceringen eftersom skärmen är smal och bilder staplas vertikalt. En bild som ligger bredvid text på datorn hamnar ovanför eller under den på mobilen. Testa hur varje sida ser ut på en telefon och se till att bilden fortfarande är begriplig på sin nya plats. Det är en del av att se till att din webbplats följer principerna för responsiv design på varje sida.
Vilket filformat ska dina bilder ha?
Kortversionen:
- JPEG för fotografier. Liten filstorlek, hög kvalitet, fungerar överallt.
- PNG för logotyper, ikoner och allt med genomskinlig bakgrund eller skarp text.
- WebP för båda, om din plattform stödjer det. Det ger mindre filer än JPEG och PNG vid samma kvalitetsnivå. De flesta moderna webbläsare hanterar WebP utan problem.
- SVG för ikoner och enkla illustrationer. Skalas perfekt till valfri storlek med minimala filstorlekar.
Sikta på under 200 kilobyte för vanliga sidbilder. Huvudbilder kan gå upp till omkring 400 kilobyte. Allt större behöver komprimeras innan du laddar upp det. Ett fem megabyte stort foto från telefonen hör inte hemma på en webbsida.
Vad är alt-text och varför behöver varje bild den?
Alt-text är en kort skriven beskrivning kopplad till en bild. Den ligger i bildtaggen på sidan, osynlig för seende besökare men läst av skärmläsare och sökmotorer. Båda behöver den för att förstå vad dina bilder innehåller.
För tillgänglighet är alt-text hur besökare som använder skärmläsare upplever bilder på din webbplats. Utan den hör de ingenting när bilden laddas, vilket lämnar ett hål i det du ville förmedla. För SEO kan sökmotorer inte se bilder på det sätt människor gör. Alt-text är hur de förstår vad en bild visar och om den är relevant för sidan den stödjer.
Att skriva bra alt-text innebär att beskriva vad som faktiskt finns i bilden, konkret och enkelt. Ett foto av en färdig köksrenovering får alt-text som "vitt shakerkök med marmorbänkskivor efter renovering" i stället för "köksfoto" eller "bild1". Om ditt sökord passar naturligt in i beskrivningen, ta med det. Men skriv för beskrivningen först. Alt-text som bara finns för att upprepa sökord misslyckas med båda syftena.
Varje bild du laddar upp ska ha alt-text skriven innan sidan går live. Det tar mindre än en minut per bild och påverkar både vem som kan ta del av ditt innehåll och hur dina sidor rankar.
Så hanterar WEMASY bilder
WEMASY:s webbplatsbyggare har bildblock som du kan lägga till i vilket sidavsnitt som helst. Du laddar upp direkt i byggaren, placerar och ändrar storlek utan att röra kod och lägger till alt-text i samma steg. Bilder levereras automatiskt responsivt, så de anpassas till varje skärmstorlek utan att du behöver skapa separata versioner för dator och mobil.
Sidavsnitt i WEMASY stödjer bilder bredvid text i flexibla kolumnlayouter, eller som bakgrunder i full bredd för avsnitt där en stark bild sätter tonen. Oavsett vilket förblir bilden kopplad till innehållet den stödjer i stället för att sväva löst från layouten.
Se vad som ingår i WEMASY:s webbplatsbyggare eller jämför planerna på prissidan.
Vanliga frågor om webbplatsbilder
Behöver jag professionella foton till min webbplats?
Professionella foton gör verklig skillnad på nyckelsidor, särskilt startsidan och om oss-sidan, där förtroendet formas. För sekundära bilder, bloggartiklar och stödjande visuellt material fungerar ett väl belyst foto taget med en modern telefon bra. Det viktiga är att bilden är äkta och relevant för ditt företag, inte att den togs av en yrkesfotograf. Med WEMASY:s webbplatsbyggare kan du sätta upp det direkt på din webbplats.
Hur många bilder ska en startsida ha?
Tillräckligt många för att stödja avsnitten, inte så många att sidan känns rörig eller laddar långsamt. En stark huvudbild, en eller två bilder i sidans mitt och eventuellt ett foto av teamet eller arbetsplatsen längre ner är en rimlig struktur för de flesta småföretags startsidor. Varje bild ska förtjäna sin plats i stället för att fylla utrymme.
Kan jag använda bilder från arkivfotosajter på min webbplats?
Ja, med vissa villkor. Arkivfotosajter erbjuder bilder med licenser som tillåter kommersiell användning, men kontrollera villkoren för varje bild innan du använder den. Den praktiska begränsningen är att bilderna syns på många andra webbplatser, så använd dem på stödjande och sekundära bildplatser i stället för som din huvudbild på sidor där förtroendet är viktigt, som startsidan eller om oss-sidan.
Vilken storlek ska jag ladda upp bilder i till min webbplats?
Komprimera före uppladdning. Sikta på under 200 kilobyte för de flesta sidbilder och under 400 kilobyte för huvudbilder. Använd JPEG för fotografier, PNG för logotyper och genomskinliga bilder och WebP om din plattform stödjer det. Ändra alltid storleken på bilden till den största bredd den visas i innan du laddar upp, i stället för att låta webbläsaren skala ner den.
Påverkar bilder min webbplats sökplaceringar?
Ja, på två sätt. Stora okomprimerade bilder gör sidan långsam, vilket sökmotorer räknar in i rankingen. Bilder utan alt-text missar en chans att tala om för sökmotorer vad sidan innehåller. Rätt dimensionerade bilder med beskrivande alt-text bidrar både till sidhastighet och synlighet i sök.