Halvér størrelsen på billeder og deres klimaaftryk

Vi kan reducere billeders filstørrelser med 30-50% uden nævneværdigt kvalitetstab, mindske klimaaftrykket tilsvarende og samtidigt forbedre brugeroplevelsen.

Hvorfor er det vigtigt?

På en typisk hjemmeside udgør billeder i omegnen af 60-80% af den mængde data, der skal transmitteres over internettet. Vi kan reducere datamængden betragteligt, ved at justere på komprimeringsgraden, eller tilbyde billeder i et moderne format som WebP

En lettere hjemmeside indlæses hurtigere – specielt på mobiltelefoner – og reduktionen i filstørrelsen kan direkte oversættes til et lavere strømforbrug under transmissionen og dermed en mindre CO2-udledning.

Ét foto, fire forskellige komprimeringsindstillinger

I galleriet herunder, ses fire udgaver af det samme 2560*1440 pixels store billede, komprimeret med fire forskellige indstillinger. Klik på et af billederne for at zoome ind. Du kan bladre i galleriet med højre og venstre piletast.

Fotos med fine detaljer og sarte farveovergange er vanskelige at komprimere, uden det kan ses. I det viste eksempel ses forskellen tydeligst på træerne i midten af billedet.

JPEG-70 er godt. WebP er bedre.

WordPress komprimerer som udgangspunkt JPEG-billeder i kvalitet 82. Ved bare at sænke denne indstilling til 70, kan vi reducere filstørrelsen betragteligt uden nævneværdig visuel forringelse. Går vi skridtet videre og konverterer billedet til WebP-format, opnår vi en yderligere reduktion i filstørrelsen

FilformatFilstørrelse
JPEG-82440 kB
JPEG-70312 kB
WebP-82254 kB
WebP-80203 KB
Filstørrelse i forhold til standard WordPress JPEG-kvalitet 82

Så lidt fylder de komprimerede filer i forhold til originalen

Fotos er forskellige og det afspejler sig også i, hvor meget de fylder. Fotos med mange detaljer, fylder mere end fotos med få. Test forskellige komprimeringsgrader med dine egne fotos, og vælg en fornuftig balance mellem filstørrelse og kvalitet. Her kan du se hvor lidt billedet med vindmøllerne fylder i forhold til originalen i de forskellige kvaliteter:

JPEG-kvalitet 82

100%

JPEG-kvalitet 70

71%

WebP-kvalitet 82

57%

WebP-kvalitet 80

46%

De fleste fotos er til pynt

De fleste fotos bruges blot til illustration eller dekoration og er forhåbentligt altid skaleret ned i en størrelse, der passer til layoutet, og altid komprimeret i en eller anden grad. Er det afgørende, at et foto er til rådighed i fuld opløsning, f.eks. på et foto site som Unsplash, er der en særlig download knap til formålet. Jeg vil derfor påstå, at en let øget komprimering eller konvertering til WebP, næppe bliver bemærket af den besøgende – det skulle da kun være fordi, at sitet indlæses hurtigere.

Kan du bruge WebP?

Ja du kan. Alle moderne browsere understøtter WebP. WordPress-plugins som laver WebP-varianter af dine billeder, tjekker lige understøttelse med den besøgendes browser, og hvis browseren ikke bryder sig om WebP, får den blot serveret den originale JPEG eller PNG.

Can I use WebP screenshot
Screenshot fra caniuse.com

Webp Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.

caniuse.com

Vil du vide mere om bæredygtig webudvikling

Vil du vide hvordan du kan optimere billeder på dit website, tilbyde en bedre brugeroplevelse samtidig med at websitet bliver mere bæredygtigt? Så skriv en kommentar på herunder eller kontakt mig – jeg deler gerne ud af min viden, specielt hvis vi sammen kan gøre en forskel.

Skriv en kommentar