Så komprimerar du bilder för en webbplats

I HTTP Archives Web Almanac 2025 vägde en typisk startsida (medianen) 2,56 MB i mobilen, och 911 KB av det var bilder. På datorn innehöll mediansidan 1 058 KB bilder. Det är också bilderna som besökarna väntar på: det största elementet på skärmen när en sida laddas, Largest Contentful Paint (LCP), var en bild på 76 % av mobilsidorna.

Lättare bilder laddas snabbare på långsamma anslutningar, drar mindre mobildata för dina besökare och kostar dig mindre bandbredd. LCP är ett av Googles Core Web Vitals, de mätvärden Google använder för att bedöma sidupplevelsen, så tunga bilder kan kosta mer än några sekunders tålamod.

Komprimering kan inte rädda en bild som är mycket större än ytan den fyller. Ett kamerafoto som är 4000 pixlar brett och visas i en kolumn på 800 pixlar innehåller 25 gånger fler pixlar än sidan kan använda. Enligt web.dev kan det gå åt 2–4 gånger mer data än nödvändigt när telefoner får bilder i datorstorlek.

• Banners i full bredd: omkring 1600–2000 pixlar i bredd räcker för de flesta layouter.
• Bilder i en artikelkolumn: ungefär dubbla kolumnbredden, så att de förblir skarpa på skärmar med hög pixeltäthet (till exempel 1400 pixlar för en kolumn på 700 pixlar).
• Miniatyrer och profilbilder: dubbla visningsstorleken, ofta 200–400 pixlar.

Formatet avgör hur effektivt en bild kan lagras. Kort sagt: foton passar i JPG eller WebP; logotyper, skärmbilder och allt med transparens passar i PNG eller WebP. Vår jämförelse av JPG, PNG och WebP förklarar när vilket format vinner.

Omkring 97 % av de webbläsare som används visar WebP, och filerna blir ofta märkbart mindre. Vill du prova, konvertera med JPG till WebP eller PNG till WebP och jämför resultatet med originalet: en konverterad fil är inte alltid mindre, särskilt inte för enkel grafik.

Komprimering tar bort data som ögat knappast saknar. I bildkomprimeringen hos Bitinz kan du släppa in en hel omgång JPG-, PNG- eller WebP-filer och välja en av tre nivåer:

• Snabb: hastigheten först, för stora mängder bilder.
• Balanserad: standardvalet och ett bra val för de flesta bilder på en webbplats.
• Maximal: tar lite längre tid men ger mindre filer; värt det för bilder som visas på varje sida, som banners och bakgrunder.

När du behåller formatet ger Bitinz dig aldrig tillbaka en fil som är större än den du laddade upp. Jämför resultatet med originalet i full storlek, särskilt bilder med fin text eller mjuka övertoningar, och ladda sedan ner de bilder du är nöjd med.

En välkomprimerad bild kan ändå göra en sida långsam om den laddas vid fel tillfälle eller i fel storlek. Några HTML-attribut gör det mesta av jobbet:

• Ange width och height på varje bild, så att webbläsaren kan reservera platsen och layouten inte hoppar medan bilden laddas.
• Lägg till loading="lazy" på bilder längre ner på sidan, så att de laddas först när besökaren scrollar nära dem.
• Använd aldrig lazy loading för huvudbilden högst upp på sidan. web.dev rekommenderar i stället fetchpriority="high" för den bilden, på högst en eller två bilder.
• Använd srcset och sizes för att erbjuda samma bild i några olika bredder, så att telefoner laddar ner en mindre fil än stora skärmar.
• Leverera bilder med lång cachetid, via ett CDN om du har ett, så att återkommande besökare inte behöver ladda ner dem igen.

Testa sidan i PageSpeed Insights eller i Lighthouse-panelen i Chrome. Sedan Lighthouse 13 är bildkontrollerna samlade i en enda insikt, ”Improve image delivery”, som listar bilder som kan komprimeras mer, levereras i ett modernt format eller göras mindre. Bilder som skulle spara mindre än 4 KiB listas inte, så en kort lista är ett gott tecken.

Titta sedan själv på sidan i en telefon. Det är i skarpa kanter, text i bilder och hudtoner som komprimeringsproblem syns först.

Om din webbplats får nya bilder varje dag, till exempel via ett publiceringssystem eller en webbutik, komprimera dem vid uppladdning eller publicering i stället för manuellt. Bitinz utvecklar-API tar emot en bild via HTTP och returnerar en länk till den komprimerade filen, så det kan köras från ett skript eller en byggpipeline. Varje konto har en gratis månadskvot.

1. 01Skala om varje bild till ungefär dubbla storleken den visas i.
2. 02Använd JPG eller WebP för foton och PNG eller WebP för grafik och transparens.
3. 03Komprimera på nivån Balanserad och prova Maximal för de största bilderna.
4. 04Jämför resultatet med originalet innan du byter ut det.
5. 05Ange bredd och höjd, använd lazy loading för bilder nedanför den synliga delen och aldrig för huvudbilden.
6. 06Kontrollera sidan igen i PageSpeed Insights.

Laddar du upp bilder någon annanstans än på din egen webbplats? Varje plattform har sina egna regler: se krav på bildstorlek för e-post och webbutiker.