Så får du bilder att laddas snabbare på en webbplats
De fem ändringarna som minskar bildvikten på vilken webbplats som helst, i ordning efter effekt.
På de flesta webbplatser står bilderna för merparten av det en besökare laddar ner. Ett enda ooptimerat foto från en mobil kan väga mer än resten av sidan tillsammans. Att fixa bilderna är oftast den största och billigaste hastighetsförbättringen som finns, och snabbare sidor rankar bättre, håller kvar besökarna längre och konverterar mer.
1. Ladda upp bilderna i den storlek de visas
Ett foto direkt från mobilen är 4000 pixlar brett eller mer. En innehållskolumn på en webbplats är sällan bredare än 1200 pixlar, och ett kort eller en miniatyr är mycket mindre än så. Varje extra pixel laddas ner och slängs sedan av webbläsaren. Ändra storlek innan du laddar upp: ungefär 2000 pixlar brett för banners i full bredd (så att de förblir skarpa på skärmar med hög pixeltäthet), 1200 till 1600 för innehållsbilder och 600 till 800 för kort. Verktyget för att ändra storlek tar en hel mapp på en gång.
2. Komprimera
När måtten är rätt sköter komprimeringen resten. Ett foto som har sparats med kvalitet 80 ser likadant ut som ett med kvalitet 100 på en webbsida och är ofta en tredjedel så stort. Bildkomprimeraren hanterar många filer på en gång och visar hur mycket varje fil har krympt.
3. Använd WebP
WebP stöds av alla aktuella webbläsare och är normalt 25 till 35 procent mindre än JPG vid samma synliga kvalitet. Formatet klarar dessutom transparens, så det kan ersätta många PNG-filer också. Konvertera med JPG till WebP eller PNG till WebP. AVIF är ännu mindre men långsammare att koda och stöds inte lika brett av uppladdningssystem, så WebP är det praktiska standardvalet.
4. Välj rätt format för innehållet
| Innehåll | Bästa format |
|---|---|
| Foton | WebP, eller JPG där WebP inte accepteras |
| Logotyper och ikoner | SVG om du har det, annars PNG eller WebP |
| Skärmbilder med text | PNG eller förlustfri WebP |
| Enkla animeringar | En kort video i stället för en GIF |
5. Hjälp webbläsaren att ladda dem klokt
- Lat inläsning. Bilder nedanför den första skärmen ska bara laddas när besökaren scrollar nära dem. De flesta plattformar gör detta automatiskt. I ren HTML lägger du till loading="lazy" på img-taggar som inte syns från början.
- Mått. Ge varje bild en bredd och en höjd så att sidan inte hoppar runt när bilderna dyker upp. Layoutförskjutning är en av Googles Core Web Vitals.
- Huvudbilden först. Den stora bilden högst upp på en sida, oftast den som räknas som Largest Contentful Paint, ska aldrig latinläsas. Den ska laddas så tidigt som möjligt.
Hur stor skillnad det gör
En typisk sida med tio foton direkt från mobilen kan väga 30 MB. Med bilderna nedskalade till rimliga bredder och komprimerade ligger samma sida oftast runt 2 MB. Konverterad till WebP hamnar den närmare 1,4 MB. På en mobilanslutning är det skillnaden mellan en sida som syns på en sekund och en som många besökare ger upp på.
Kontrollera resultatet
Googles PageSpeed Insights och Lighthouse-panelen i Chromes utvecklarverktyg listar båda för stora bilder, bilder som borde vara WebP och elementet för Largest Contentful Paint. Kör dem före och efter, och fokusera först på sidorna som har mest trafik.