Slik får du bilder til å laste raskere på en nettside
De fem endringene som reduserer bildevekten på alle nettsider, sortert etter effekt.
På de fleste nettsider utgjør bilder mesteparten av det en besøkende laster ned. Ett enkelt uoptimalisert bilde fra en mobil kan veie mer enn resten av siden til sammen. Å fikse bildene er vanligvis den største og billigste hastighetsforbedringen du kan gjøre, og raskere sider rangerer bedre, holder på besøkende lenger og gir flere konverteringer.
1. Last opp bildene i den størrelsen de vises
Et bilde rett fra en mobil er 4000 piksler bredt eller mer. En innholdskolonne på en nettside er sjelden bredere enn 1200 piksler, og et kort eller en miniatyr er langt smalere. Hver ekstra piksel lastes ned og kastes deretter av nettleseren. Endre størrelsen før du laster opp: rundt 2000 piksler bredt for bannere i full bredde (for å holde seg skarpe på skjermer med høy tetthet), 1200 til 1600 for innholdsbilder og 600 til 800 for kort. Verktøyet for å endre størrelse tar en hel mappe på en gang.
2. Komprimer
Med riktige mål gjør komprimeringen resten. Et bilde lagret med kvalitet 80 ser helt likt ut som ett med kvalitet 100 på en nettside, og er ofte en tredjedel av størrelsen. Bildekomprimeringen håndterer mange filer samtidig og viser besparelsen for hver fil.
3. Bruk WebP
WebP støttes av alle moderne nettlesere og er vanligvis 25 til 35 % mindre enn JPG med samme synlige kvalitet. Med støtte for gjennomsiktighet kan det også erstatte mange PNG-filer. Konverter med JPG til WebP eller PNG til WebP. AVIF er enda mindre, men tregere å kode og støttes ikke like bredt av opplastingssystemer, så WebP er det praktiske standardvalget.
4. Velg riktig format til innholdet
| Innhold | Beste format |
|---|---|
| Bilder | WebP, eller JPG der WebP ikke godtas |
| Logoer og ikoner | SVG hvis du har det, ellers PNG eller WebP |
| Skjermbilder med tekst | PNG eller tapsfri WebP |
| Enkle animasjoner | En kort video i stedet for en GIF |
5. Hjelp nettleseren å laste dem fornuftig
- Utsatt lasting. Bilder under den første skjermen bør bare lastes når den besøkende ruller nær dem. De fleste plattformer gjør dette automatisk. I ren HTML legger du til loading="lazy" på img-taggene som ikke vises med en gang.
- Mål. Gi hvert bilde en bredde og en høyde, slik at siden ikke hopper rundt mens bildene lastes inn. Layoutforskyvning er en av Googles Core Web Vitals.
- Hovedbildet først. Det store bildet øverst på en side, som vanligvis teller som Largest Contentful Paint, skal aldri ha utsatt lasting. Det skal lastes så tidlig som mulig.
Hvor stor forskjell det gjør
En vanlig side med ti bilder rett fra en mobil kan veie 30 MB. Med fornuftige bredder og komprimering veier den samme siden vanligvis rundt 2 MB. Konvertert til WebP er den nærmere 1,4 MB. På mobilnett er det forskjellen mellom en side som vises på et sekund, og en side mange besøkende gir opp.
Sjekk resultatene
Både Googles PageSpeed Insights og Lighthouse-panelet i utviklerverktøyene i Chrome viser for store bilder, bilder som burde vært WebP, og elementet som er Largest Contentful Paint. Kjør dem før og etter, og konsentrer deg først om sidene med mest trafikk.