Så minskar du bildstorleken på din webbplats utan att tappa kvalitet

Varför stora bilder gör din sida långsam

Bilder står ofta för merparten av en webbsidas datamängd. En hero-bild som är flera megabyte stor måste laddas ner innan besökaren ser ett färdigt första intryck, särskilt på mobilnät. Det ger längre laddtid, sämre upplevelse och kan påverka hur sidan rankas i sökmotorer eftersom hastighet och Core Web Vitals, bland annat Largest Contentful Paint, räknas in. Många småföretag laddar upp bilder direkt från kameran eller från en designer utan att ändra storleken. Då kan en bild vara 4000 pixlar bred fast den visas i 1200 pixlar. Resultatet är att besökaren laddar ner flera gånger mer data än vad som behövs, helt utan att bilden ser bättre ut på skärmen.

Steg 1: Mät först vad som är problemet

Börja med att ta reda på vilka bilder som är störst. Öppna sidan i webbläsaren, tryck F12 och välj fliken Nätverk (Network), filtrera på Bilder och ladda om sidan. Där ser du varje bilds filstorlek. Som tumregel bör en hero-bild ligga under cirka 200 till 300 kilobyte och vanliga innehållsbilder under 100 kilobyte. Du kan också köra gratisverktyget PageSpeed Insights från Google, som direkt listar bilder som kan komprimeras eller är för stora för sin visningsyta. Skriv ner de fem största bilderna och börja med dem, eftersom det är där du får störst effekt för minst arbete.

Steg 2: Välj rätt bredd och format

Anpassa bildens bredd till hur stor den faktiskt visas. En bild i en textspalt behöver sällan vara bredare än 800 pixlar, och en helbredds hero-bild räcker oftast med 1600 till 2000 pixlar. Välj sedan format. WebP ger ofta 25 till 35 procent mindre filer än JPEG vid samma synliga kvalitet och stöds av alla moderna webbläsare. AVIF kan bli ännu mindre men tar längre tid att skapa. Behåll PNG bara för grafik med genomskinlighet eller skarpa linjer, och använd JPEG eller WebP för foton. Ett foto som sparats som PNG är en vanlig orsak till onödigt stora filer, ibland tio gånger större än nödvändigt.

Steg 3: Komprimera och kontrollera resultatet

Exportera bilden med en kvalitet kring 75 till 85 procent för WebP eller JPEG. Det är oftast under gränsen där ögat ser skillnad, men filen blir mycket mindre. Jämför före och efter bredvid varandra i full storlek och titta särskilt på toner i himmel, text i bilden och kanter. Om något ser suddigt ut, höj kvaliteten några steg. Gratisverktyg som Squoosh eller liknande låter dig se skillnaden direkt. Spara originalfilen på ett säkert ställe så att du kan göra om arbetet vid behov, och ge de nya filerna beskrivande namn.

Steg 4: Ladda bilderna smart på sidan

Lägg till width- och height-attribut på bilderna så att sidan inte hoppar när de laddas. Använd loading=lazy på bilder som ligger långt ned på sidan, men inte på hero-bilden som syns direkt. Fyll alltid i en tydlig alt-text som beskriver bilden, vilket hjälper både tillgänglighet och sökmotorer. Om din webbplats använder WordPress finns tillägg som skapar WebP automatiskt, men kontrollera ändå att de stora bilderna verkligen blivit mindre. Mät sedan om med PageSpeed Insights och jämför laddtiden före och efter, så ser du om insatsen gav effekt.

När det lönar sig att få hjälp

Har du många bilder, flera sidor eller osäkerhet kring format och kvalitet kan det vara tidsbesparande att låta någon göra jobbet åt dig. Då får du färdiga, webbanpassade filer, en jämförelse av storlek före och efter och en enkel instruktion för hur du byter ut dem. Det är ett avgränsat arbete som oftast går att göra till ett fast pris och som ger en tydlig, mätbar förbättring av sidans hastighet.