Sådan får du billeder til at indlæse hurtigere på en hjemmeside
De fem ændringer, der skærer ned på billedvægten på enhver hjemmeside, sorteret efter effekt.
På de fleste hjemmesider udgør billederne størstedelen af det, en besøgende downloader. Et enkelt uoptimeret foto fra en telefon kan veje mere end resten af siden tilsammen. At rette billederne er som regel den største og billigste hastighedsforbedring, du kan lave, og hurtigere sider rangerer bedre, holder på de besøgende længere og konverterer mere.
1. Upload billederne i den størrelse, de vises i
Et foto direkte fra en telefon er 4000 pixels bredt eller mere. En indholdskolonne på en hjemmeside er sjældent bredere end 1200 pixels, og et kort eller en thumbnail langt mindre. Hver ekstra pixel bliver downloadet og derefter smidt væk af browseren. Skift størrelse før upload: cirka 2000 pixels i bredden til bannere i fuld bredde (så de forbliver skarpe på skærme med høj pixeltæthed), 1200 til 1600 til indholdsbilleder og 600 til 800 til kort. Værktøjet til at ændre størrelse klarer en hel mappe på én gang.
2. Komprimér
Når målene er rigtige, klarer komprimeringen resten. Et foto gemt med kvalitet 80 ser helt ens ud med et i kvalitet 100 på en webside og fylder ofte en tredjedel. Billedkomprimeringen håndterer mange filer på én gang og viser besparelsen for hver fil.
3. Brug WebP
WebP understøttes af alle aktuelle browsere og er typisk 25 til 35 procent mindre end JPG ved samme synlige kvalitet, og med understøttelse af gennemsigtighed kan det også erstatte mange PNG-filer. Konvertér med JPG til WebP eller PNG til WebP. AVIF er endnu mindre, men langsommere at kode og mindre udbredt i uploadsystemer, så WebP er det praktiske standardvalg.
4. Vælg det rigtige format til indholdet
| Indhold | Bedste format |
|---|---|
| Fotos | WebP, eller JPG hvor WebP ikke accepteres |
| Logoer og ikoner | SVG, hvis du har det, ellers PNG eller WebP |
| Skærmbilleder med tekst | PNG eller tabsfri WebP |
| Simple animationer | En kort video i stedet for en GIF |
5. Hjælp browseren med at indlæse dem fornuftigt
- Lazy loading. Billeder under den første skærm bør først indlæses, når den besøgende scroller tæt på dem. De fleste platforme gør det automatisk. I ren HTML tilføjer du loading="lazy" til img-tags, der ikke er synlige fra start.
- Mål. Giv hvert billede en bredde og en højde, så siden ikke hopper rundt, mens billederne kommer ind. Layoutskift er en af Googles Core Web Vitals.
- Hovedbilledet først. Det store billede øverst på en side, som regel det der tæller som Largest Contentful Paint, må aldrig lazy loades. Det skal indlæses så tidligt som muligt.
Hvor stor forskel det gør
En typisk side med ti fotos direkte fra en telefon kan veje 30 MB. Med fornuftige bredder og komprimering vejer samme side som regel omkring 2 MB. Konverteret til WebP er den tættere på 1,4 MB. På en mobilforbindelse er det forskellen på en side, der vises på et sekund, og en side, som mange besøgende giver op på.
Tjek dine resultater
Googles PageSpeed Insights og Lighthouse-panelet i Chromes udviklerværktøjer viser begge for store billeder, billeder der burde være WebP, og elementet for Largest Contentful Paint. Kør dem før og efter, og start med de sider, der får mest trafik.