För småföretag

Byta bild på hemsidan: rätt storlek, format och alt-text på fem minuter

För att byta bild på hemsidan väljer du en bild du har rätt att använda, skalar den till ungefär dubbla visningsbredden, komprimerar den, ger den ett beskrivande filnamn och laddar upp den med en alt-text. Själva bytet tar en minut i de flesta system. Det är förberedelserna som avgör om resultatet blir skarpt och snabbt.

Guiden går igenom hela flödet i ordning och fungerar oavsett om sajten är byggd i WordPress, Wix, Squarespace eller av en byrå.

Uppdaterad 18 oktober 20267 min läsning

Kort svar

Använd bara egna foton eller bilder med licens. En bild du hittat via Google får du i regel inte använda.
Gör bilden ungefär dubbelt så bred som den visas: cirka 2 000 px för en toppbild, 1 200 px för en vanlig innehållsbild.
Spara foton som JPG eller WebP, logotyper som SVG eller PNG, och komprimera i Squoosh eller TinyPNG innan du laddar upp.
Skriv en alt-text som säger vad bilden visar och varför den finns där, inte "bild" eller ett filnamn.
Blir bilden beskuren: välj ett bildförhållande som passar platsen eller sätt en fokuspunkt.

1. Välj en bild du får använda

Bilder på nätet är nästan alltid skyddade av upphovsrätt, även när det inte står något om det. Att en bild syns i Google Bildsök betyder inte att den är fri att använda. Företagarna har en kort genomgång av vad som gäller för bilder du hittat på internet (se källorna nedan). Det här är ingen juridisk rådgivning, men tre vägar är säkra i praktiken:

Egna foton. Bäst för de flesta småföretag: riktiga bilder på salongen, verkstaden eller teamet säger mer än en stockbild.
Köpta eller licensierade bilder från en bildbyrå. Läs licensen: den kan begränsa var bilden får visas, hur länge och om den får beskäras eller användas i annonser. Spara kvittot eller licensen.
Bilder från en fotograf du anlitat. Kom överens skriftligt om att ni får använda bilderna på webben och i sociala medier.

2. Rätt pixelmått per bildtyp

En bild som är för liten blir suddig, en som är för stor gör sidan långsam. Tumregeln är att bilden ska vara ungefär dubbelt så bred som den största ytan den visas i, eftersom mobiler och moderna skärmar har tät pixeltäthet. Många system skapar sedan mindre versioner automatiskt.

Tumregler för pixelmått (bredd × höjd). Anpassa efter din mall.
Bildtyp	Rimligt mått	Kommentar
Stor toppbild (hero)	ca 2 000–2 400 px bred	Ofta beskuren olika på mobil och dator, se avsnitt 6.
Tjänstebild / innehållsbild	ca 1 200–1 600 px bred	Räcker för bilder som tar halva eller hela textspalten.
Personalporträtt	ca 800 × 800 px eller 800 × 1 000 px	Använd samma bildförhållande för alla i teamet.
Logotyp	SVG, annars PNG i dubbel visningsstorlek	Visas loggan 200 px bred, ladda upp 400 px.
Delningsbild (Facebook, LinkedIn m.fl.)	1 200 × 630 px	Meta rekommenderar 1 200 × 630 och max 8 MB.

Ladda inte upp mobilens originalfil direkt. WordPress skalar sedan version 5.3 automatiskt ner bilder som är bredare än 2 560 px, men filen du laddar upp bör ändå vara rimligt stor från början.

3. Format och komprimering

Format	Använd till	Undvik till
JPG	Foton. Fungerar överallt.	Logotyper och text i bild (blir grumligt i kanterna).
PNG	Logotyper, ikoner, skärmdumpar, bilder med genomskinlig bakgrund.	Stora foton (blir tunga filer).
WebP	Foton och grafik. Ofta betydligt mindre än JPG i samma kvalitet.	Om ditt system inte tar emot formatet.
AVIF	Foton där filstorleken är viktig.	Om du är osäker på att systemet stödjer det. Välj då WebP eller JPG.
SVG	Logotyper och ikoner som ska vara knivskarpa i alla storlekar.	Foton. Vissa byggare tillåter inte SVG-uppladdning.

Komprimera innan du laddar upp. Två gratisverktyg som körs i webbläsaren: Squoosh (squoosh.app) från Google, där du kan ändra storlek, välja format och jämföra kvaliteten sida vid sida, och TinyPNG, där du bara drar in filerna. Sänk kvaliteten stegvis och titta på resultatet i full storlek innan du sparar. Ser du kantiga skuggor eller grumliga ytor har du gått för långt.

4. Filnamn och alt-text

Döp om filen innan uppladdning: små bokstäver, bindestreck och vad bilden visar, till exempel frisor-goteborg-balayage.webp i stället för IMG_4821.jpg. Google använder både filnamn och alt-text för att förstå bilder.

Alt-texten läses upp av skärmläsare och visas om bilden inte laddar. Beskriv det som är viktigt i sammanhanget, kort. W3C:s beslutsträd för alt-texter och 1177:s riktlinjer för alt-texter är bra att luta sig mot. Rent dekorativa bilder ska ha tom alt-text, så att skärmläsaren hoppar över dem.

Exempel på alt-text per bransch
Bransch	Dålig alt-text	Bra alt-text
Frisör	bild1	Frisör färgar en kunds hår med balayageteknik
Snickare	snickare snickeri altan billig snickare	Nybyggd altan i lärkträ med trappa ner mot gräsmattan
Café	Café	Kanelbullar och kaffe på ett marmorbord i caféets fönster
Redovisningsbyrå	Anna	Anna Berg, auktoriserad redovisningskonsult, i byråns mötesrum
Bilverkstad	IMG_0032	Mekaniker byter bromsskivor på en bil på lyft

5. Själva bytet i olika system

WordPress

Öppna sidan i blockredigeraren och klicka på bilden.
Välj Ersätt i verktygsfältet och ladda upp den nya filen.
Fyll i alt-text i blockets inställningar till höger och klicka Uppdatera.

Toppbilder ligger ofta i ett omslagsblock eller i temats inställningar. WordPress kan inte ersätta en fil i mediebiblioteket utan tillägg (till exempel Enable Media Replace), så den gamla bilden ligger kvar där tills du raderar den.

Wix, Squarespace och One.com-byggaren

Klicka på bilden i redigeraren, välj att byta eller ändra bild, ladda upp och skriv alt-texten i bildinställningarna. Publicera sedan, ändringen syns inte förrän du gjort det.

Byråbyggd eller egenutvecklad sajt

Har sajten ett CMS loggar du in där och byter bilden i rätt fält. Saknas det får du skicka bilden till byrån. Skicka då originalfilen, alt-texten och vilken sida det gäller i samma mejl. Är sajten byggd i Next.js kan utvecklaren koppla på ett CMS som sitecms så att du byter bild och alt-text själv, se hemsida byggd i Next.js. Vad det kostar att låta byrån göra det läser du i vad kostar en textändring.

6. Varför blir bilden suddig eller beskuren?

Suddig: bilden är för liten för ytan och förstoras i webbläsaren. Ladda upp en bredare version enligt tabellen ovan. Det kan också bero på för hård komprimering.
Beskuren: mallen visar bilden i ett fast bildförhållande, till exempel 16:9 på dator och nästan kvadratiskt på mobil. Ett stående foto i en liggande yta tappar då topp och botten.
Huvudet försvinner på mobil: sätt en fokuspunkt. WordPress omslagsblock, Squarespace och flera av Wix bildelement låter dig välja vilken del av bilden som alltid ska synas.

Ska du samtidigt uppdatera texten bredvid bilden, se ändra text på hemsidan. Ny tjänst med egen bild? Läs lägga till en tjänst.

Vanliga frågor

Vilken storlek ska en bild på hemsidan ha?

Ungefär dubbelt så bred som ytan den visas i. Som tumregel räcker cirka 2 000 px bredd för en toppbild, 1 200–1 600 px för en innehållsbild och 1 200 × 630 px för en delningsbild. Komprimera alltid innan uppladdning.

Ska jag använda JPG, PNG eller WebP?

JPG eller WebP för foton, PNG eller SVG för logotyper och grafik med skarpa kanter eller genomskinlig bakgrund. WebP ger oftast mindre filer än JPG i samma kvalitet, men kontrollera att ditt system tar emot formatet.

Vad är alt-text och måste jag skriva det?

Alt-text är en kort beskrivning av bilden som skärmläsare läser upp och som visas om bilden inte laddar. Skriv det för alla bilder som tillför information. Dekorativa bilder ska ha tom alt-text.

Varför blir min bild suddig eller beskuren på hemsidan?

Suddig betyder oftast att bilden är för liten för ytan eller för hårt komprimerad. Beskuren betyder att mallen har ett fast bildförhållande. Ladda upp en större bild, välj ett format som passar ytan eller sätt en fokuspunkt.

Får jag använda bilder från Google på min hemsida?

I regel inte. Bilder i Google Bildsök tillhör någon och är oftast skyddade av upphovsrätt. Använd egna foton, köpta bilder med licens eller bilder du fått skriftligt tillstånd att använda.