Hur stora ska bilderna vara?
Utgå från hur bred bilden visas på sidan och dubblera för skärmar med hög upplösning. En bild som visas i 800 pixlars bredd behöver alltså vara omkring 1 600 pixlar, inte 4 000.
Ladda aldrig upp direkt från kameran. En obehandlad mobilbild är ofta fem megabyte, vilket är mer än hela resten av sidan tillsammans.
Vilket filformat ska ni välja?
WebP är förstahandsvalet för foton och ger ungefär halva filstorleken jämfört med JPEG vid samma kvalitet. Alla moderna webbläsare stödjer det.
PNG ska bara användas för logotyper och grafik med transparens. Ett foto sparat som PNG blir flera gånger större än det behöver vara.
Vad ska stå i alt-texten?
Alt-texten beskriver vad bilden föreställer, för den som använder skärmläsare och för Google. Den ska beskriva innehållet, inte upprepa filnamnet.
Skriv ”Nylagt klinkergolv i badrum med golvbrunn i mitten” i stället för ”IMG_4821” eller ”badrum kakel klinker plattsättning Malmö”. Det senare är sökordsstoppning och gör mer skada än nytta.
Rent dekorativa bilder ska ha tom alt-text så att skärmläsare hoppar över dem.
Spelar filnamnet någon roll?
Filnamnet är en av få signaler Google har om vad bilden visar. ”badrumsrenovering-limhamn-fardigt.jpg” säger något, ”DSC_0043.jpg” säger ingenting.
Använd bindestreck mellan orden och undvik å, ä och ö i filnamn.
Varför ska bredd och höjd anges?
Utan angivna mått vet inte webbläsaren hur mycket plats bilden ska ha, och innehållet hoppar när bilden laddas. Det är irriterande för besökaren och mäts av Google som Cumulative Layout Shift.
WordPress lägger till måtten automatiskt om bilden infogas på vanligt sätt. Läggs den in i egen kod måste ni göra det själva.
Vilka bilder ska laddas direkt?
Bilder högt upp på sidan ska laddas omedelbart, gärna med hög prioritet. Bilder längre ner ska laddas först när besökaren skrollar dit.
I WordPress sköts det oftast automatiskt, men kontrollera att den översta bilden inte råkat få lazy loading – det är ett vanligt fel som fördröjer det första besökaren ser.
- Överst: ladda direkt, gärna med fetchpriority
- Längre ner: lazy loading
- Bakgrundsbilder: kontrollera storleken separat, de missas ofta
- Referensbilder: samma vinkel före och efter säljer bäst
Vanliga frågor
Hur många bilder tål en sida?
Så många som är relevanta, om de är rätt storlek. Tjugo optimerade bilder väger mindre än tre obehandlade.
Kan vi använda bilder från nätet?
Bara om ni har rätt att göra det. Bilder på andras arbeten är dessutom sämre säljargument än era egna, även när de är snyggare.
Behöver alla bilder alt-text?
Alla som betyder något. Rent dekorativa element ska ha tom alt-text, inte en påhittad beskrivning.
Sammanfattning
Skala bilderna till den storlek de visas i, spara som WebP, skriv alt-texter som beskriver innehållet, ge filerna begripliga namn och ange alltid bredd och höjd. Det är samma arbete som gör sidan snabb och begriplig för Google.
Läs mer om att förbättra en befintlig hemsida →
Väger era bilder ner sidan?
Vi mäter och åtgärdar.
Skicka er adress så går vi igenom bilderna och säger vad som kan komprimeras utan att det syns.