Hvorfor bilder er den tyngste delen av de fleste nettsider
Tekst veier nesten ingenting. En hel side med tekst er ofte mindre enn ett enkelt bilde. Det er bildene som avgjør hvor mye telefonen må laste ned før siden er klar, og på de fleste nettsider er det bildene som står for mesteparten av vekten.
Problemet oppstår som regel i det små. Et bilde tas med mobilen eller kommer fra en fotograf i full oppløsning, lastes rett opp og vises i en boks som er en brøkdel av størrelsen. Den besøkende laster ned hele originalen likevel. Gjør du det samme med fem bilder på forsiden, har du en side som føles treg på mobil, uten at noe annet er galt.
Hva det koster i tapte besøkende, har vi skrevet om i artikkelen om hvorfor en treg nettside får færre kunder.
Formatene, og når du bruker hvilket
- WebP. Standardvalget for foto og illustrasjoner. Gir vesentlig mindre filer enn JPEG med samme synlige kvalitet, støtter gjennomsiktighet og vises i alle moderne nettlesere.
- AVIF. Nyere og ofte enda mer effektivt enn WebP, særlig på foto. Støtten i nettlesere er god, men ikke alle verktøy og tillegg håndterer formatet ennå. Et godt valg hvis løsningen din tar det, ikke et krav.
- JPEG. Det gamle standardformatet for foto. Fungerer overalt, og er en grei reserve når et system ikke tar imot WebP.
- PNG. For grafikk med skarpe kanter eller gjennomsiktighet, som skjermbilder og enkle illustrasjoner. Brukt på foto blir filene mange ganger større enn nødvendig.
- SVG. Ikke et bilde i vanlig forstand, men linjer og former beskrevet som kode. Perfekt til logoer og ikoner, fordi det er skarpt i alle størrelser og veier lite. Ikke egnet til foto.
Kort sagt: WebP til nesten alt, JPEG som reserve, PNG bare når du trenger gjennomsiktighet og ikke kan bruke WebP, og SVG til logo og ikoner. Merk at WordPress ikke tar imot SVG-filer som standard, fordi de kan inneholde kode. Bruk en løsning som renser filene, eller la den som drifter siden legge dem inn.
Hvor store bildene faktisk må være
Et bilde trenger ikke være større enn plassen det vises på, ganget med to for skjermer med høy oppløsning. Et bilde som vises 800 piksler bredt, trenger altså rundt 1600 piksler. Det gir noen enkle tommelfingerregler:
- Bilder over hele bredden. Sjelden bredere enn 2000 piksler. Større enn det merker nesten ingen, men alle må laste det ned.
- Bilder i en tekstspalte eller et kort. Mål boksen på en vanlig skjerm, og doble bredden.
- Filstørrelse. Sikt på under 200 kB per bilde. Store toppbilder kan unntaksvis være litt mer, små kortbilder bør være langt mindre.
WordPress skalerer automatisk ned bilder som er større enn 2560 piksler når du laster dem opp. Det er en sikkerhetsventil, ikke en løsning. 2560 piksler er fortsatt mer enn de fleste plasser på siden trenger.
Komprimering: hvor langt du kan gå før det synes
Komprimering fjerner informasjon øyet ikke legger merke til. Ved 70–80 % kvalitet er forskjellen umulig å se for de fleste, mens filen ofte blir en brøkdel av originalen. Går du lenger ned, begynner du å se uskarpe kanter, flekker i jevne flater og striper i himmel og fargeoverganger.
Sjekk alltid resultatet i den størrelsen bildet faktisk vises i, ikke forstørret. Bilder med ansikter, tekst eller fine mønstre tåler litt mindre komprimering enn landskap og bakgrunner. Ta vare på originalen et annet sted, slik at du kan lage en ny versjon senere uten å komprimere et bilde som allerede er komprimert.
Responsive bilder: mobil skal ikke laste ned desktop-bildet
En telefon trenger ikke det samme bildet som en stor skjerm. Med responsive bilder ligger det flere størrelser av samme bilde på serveren, og nettleseren velger den minste som fortsatt ser skarp ut på skjermen den har.
WordPress gjør dette automatisk. Når du laster opp et bilde, lages flere størrelser, og nettleseren får beskjed om hvilke som finnes. Det virker likevel bare når bildet settes inn på en måte som tar med denne informasjonen. Bilder som er lagt inn som bakgrunn i en sidebygger, eller med fast adresse i egen kode, kan ende med bare én størrelse. Da laster mobilen ned det store bildet uansett. Har du en sidebygger, sjekk om den lar deg velge eget bakgrunnsbilde for mobil.
Lazy loading, og hva som bør lastes først
Lazy loading betyr at bilder lenger ned på siden lastes først når den besøkende nærmer seg dem. Det sparer mye data på lange sider, og WordPress legger det på automatisk.
Unntaket er det som vises øverst. Hovedbildet over skjermkanten skal lastes med en gang, ellers venter den besøkende på det viktigste bildet på siden. Ofte er det også dette bildet som teller når Google måler hvor raskt det største elementet på siden blir synlig. Sjekk derfor at toppbildet ikke er satt til lazy loading, og at det er komprimert ekstra godt.
Slik gjør du det i WordPress, med og uten plugin
Uten plugin gjør du jobben før du laster opp:
- Skaler bildet til riktig bredde i et bildeprogram eller et gratis nettverktøy som Squoosh.
- Lagre som WebP med 70–80 % kvalitet.
- Gi filen et beskrivende navn, som «ferdig-bad-drammen.webp», ikke «IMG_4831.webp».
- Last opp, og skriv en alternativ tekst som beskriver hva bildet viser.
Det fungerer fint når du laster opp noen få bilder i måneden.
Med plugin skjer komprimering og konvertering automatisk når bildet lastes opp, og mange kan også optimalisere bildene som allerede ligger i mediebiblioteket. På sider med mye innhold, eller der flere personer legger inn bilder, sparer det mye manuelt arbeid. Velg én bildeoptimaliserer, ikke flere som gjør det samme, og kontroller at bildene ser riktige ut etterpå.
Har du en driftsavtale, er det naturlig at den som drifter siden setter opp dette og følger med på at det virker etter oppdateringer. Hvordan vi tenker om drift, kan du lese om i Flyt WP Drift.
Sjekkliste før du laster opp neste bilde
- Riktig format. WebP til foto, SVG til logo og ikoner.
- Riktig bredde. Doble visningsbredden, og sjelden over 2000 piksler.
- Riktig vekt. Under 200 kB, og gjerne mindre.
- Beskrivende filnavn og alternativ tekst. Godt for søk, og nødvendig for dem som bruker skjermleser.
- Toppbildet lastes først. Ingen lazy loading over skjermkanten.
Vil du vite hvor mye bildene bremser din egen side, kan du be om en gratis nettsidesjekk.
Spørsmål og svar
Hvilket bildeformat er best for nettsider?
WebP i de fleste tilfeller. JPEG som reserve, PNG bare når du trenger gjennomsiktighet, og SVG til logoer og ikoner.
Hvor stort bør et bilde være?
Sjelden bredere enn 2000 piksler, og helst under 200 kB per bilde. Mål plassen bildet vises på, og doble bredden for skarpe skjermer.
Blir bildene dårligere av komprimering?
Litt, men langt mindre enn folk tror. 70–80 % kvalitet er umulig å se for de fleste, og filen blir ofte en brøkdel av originalen.
Trenger jeg en plugin?
Ikke nødvendigvis. Laster du opp få bilder, holder det å skalere og komprimere før opplasting. På sider med mye innhold sparer en bildeoptimaliserer deg for mye manuelt arbeid.