Guide til billedoptimering - 4 trin til et hurtigere website

Et website uden billeder duer ikke. Men ubehandlet fylder billeder oftest alt for meget, hvilket bremser load-hastigheden og generel performance på dit website. Derfor har vi samlet et par gode råd til, hvordan du kan komprimere dine billeder og reducere filstørrelsen markant for at sikre bedre web performance.

Når vi designer websites, er billeder altid en essentiel del af brugeroplevelsen. Billeder former brandet og den visuelle identitet i en bestemt retning, de fortæller historier, og de forbedrer læseoplevelsen markant. Blandt andet.

Men billeder øger også websitets vægt unødigt og gør sitet langsommere, end det behøver at være, hvis du ikke ved, hvordan du behandler og komprimerer dine billeder rigtigt.

Derfor er vi også nødt til at være opmærksomme på, hvor og hvordan vi bruger billeder på de websites, vi udvikler – og nogle gange kræver det et par spørgsmål som fx: Hjælper billedet brugeren til bedre forståelse af et bestemt budskab? Eller forbedrer det UX’en? Kan du ikke svare ja til de spørgsmål, er billedet overflødigt.

Er det originale billeder (fx billeder af medarbejdere, miljø, brand-elementer mv.), så har de ofte en værdi – men stockfotos er tit der, hvor du kan kappe en hæl og klippe en tå. Når du så har alle de nødvendige billeder tilbage, er der flere ting, du kan gøre for at opnå bedre billedoptimering og webperformance.

På den måde kan du lidt bedre forsvare at have et lettere søgt stock-billede a la dette:

Et spørgsmål om balance

Det kan dog være lidt af en opgave at finde balancegangen mellem den laveste filstørrelse og acceptabel billedkvalitet. Men metoderne til at komme frem til det bedste resultat sker, når du deler opgaven op i fire indsatser:

1. Filformatet
2. Resizing
3. Komprimering
4. Lazy Load

Vælger du fx den rigtige kombination af filformat og typen af komprimering, kan du reducere filstørrelsen af dine billeder ret markant, hvilket påvirker websitets performance i den rigtige retning. Det kan nogle gange kræve, at du eksperimenterer lidt med format og komprimering – men vi har samlet nogle af de bedste og mest effektive tips til bedre billedoptimering herunder.

1. Vælg det rigtige filformat

En væsentlig måde at optimere performance på, ud fra et billede-perspektiv, er at rette blikket mod de filformater, du bruger.

JPEG ­– brug kun dette filformat til fotos.

PNG og SVG – formatet her producerer billeder af højere kvalitet, men brug kun PNG-formatet, når der kræves transparens. Skal du lave ikon- og logo-filer er SVG oftest det bedste valg, da det er et vektorbaseret format, der tegnes af browseren. På den måde står dine SVG-filer også altid skarpt på skærmen.

WEBP og AVIF – begge formater er relativt nye, og de komprimerer bedre, fylder mindre, downloader hurtigere, men det tager også mere tid at komprimere. Kan du vælge AVIF er det at foretrække, da denne filtype kan fylde halvt så meget som WEBP.

GIF – dette format er det bedste, og eneste, valg til animerede billeder, men animerede GIF’er kan hurtigt blive rigtig store og tunge. Oftest er det bedre at bruge video, da filformatet komprimerer bedre og derved også fylder mindre.

MP4 – MP4 er det bedste format til video, da det er et format, der giver bedre tilgængelighed ift. features som undertekster.

2. Resize dine billeder

En anden effektiv, og ret nem, måde at optimere dine billeder til bedre web performance på, er at resize dine billeder, inden de uploades til dit website. Den bedste måde at resize dine billeder på, er at ramme modulernes eksakte dimensioner, da unødigt store billeder kan øge sitets load time, som påvirker sitets UX negativt. Du kan nemt bruge fx Photoshop eller Pixlr til at resize dine billeder ­– men uanset hvilket tool du bruger, så kan du reducere filstørrelsen på dine billeder markant, hvis du resizer og eksporterer dem, inden du uploader dem til sitet.

Husk også at sætte height- og width-attributter på dine billeder, så browseren har mulighed for at allokere nok plads på siden, før den loader billederne. Har du ikke attributter på dine billeder, kan du risikere layout shifts.

3. Komprimér filstørrelsen på billederne

Når du har valgt de rigtige formater på billederne, så er der stadig mulighed for at reducere størrelsen på billederne yderligere. Når du arbejder med komprimering af billeder, er en god tommelfingerregel at komprimere ned til max 1500px.

Du kan bruge flere forskellige komprimeringsprogrammer som fx https://squoosh.app/ – alternativt FileOptimizer (Windows) eller ImageOptim (Mac). Vil du have en mere udførlig liste over komprimeringstools, kan du se den her.

Alle programmerne minimerer filstørrelsen uden at kompromittere billedkvaliteten unødigt. Det er en nem måde at spare tid, reducere menneskelige fejl og komprimere autogenererede billeder så som thumbnails.

 Vil du gøre lidt ekstra arbejde, er det faktisk også muligt at reducere størrelsen af PNG’er yderligere, hvis du vælger at optimere billedet i hånden, inden du bruger komprimeringsprogrammet. 24-bit PNG-filer indeholder over 16 millioner farver, som alle er til stede i billedet, selvom langt fra alle farverne bliver brugt. Her kan du bruge programmer med lossy compression, der konverterer 24-bit PNG-filer til PNG-8-filer, som kun indeholder de farver, der er nødvendige. Den løsning er særligt god til fx logoer og ikoner.

Responsive billeder hjælper også på performance, da der loades forskellige størrelser af billederne på henholdsvis mobil, tablet, laptop og desktop. Her er dette tool en god løsning:  https://responsivebreakpoints.com/. Du kan samtidig også overveje, om der skal optimeres til high density-skærme, dvs. skærme med en Device Pixel Ratio højere end 1.

Et konkret eksempel

Lad os for god ordens skyld lige komme med et eksempel på, hvor meget det faktisk gør, hvis du følger de tre steps, som vi nu har været igennem:

De ovenstående billeder har jeg taget på vores kontor i Aarhus med et spejlreflekskamera. Når de hives over på computeren fylder de omkring 25 MB (se tabellen), hvilket vil betyde, at de selv på en almindelig internetforbindelse sandsynligvis vil loade langsomt og hakkende.

Men ved at resize billedet, ændre filformatet og komprimere filstørrelsen når vi helt ned på omkring 100 KB for et JPG-billede og henholdsvist 39 og 33 KB for AVIF. Hvis du skulle have glemt dine matematiktimer fra folkeskolen, så er det altså flere hundrede gange mindre! Og kvaliteten er stadig rigeligt god til en ganske almindelig webside som denne. Det er da digital food-for-thought.

4. Lazy load af billeder

Vil du optimere performance, og særligt hastigheden, på dit website, så er lazy load af billeder et rigtig effektivt redskab. Lazy load betyder i al sin enkelthed, at billederne først loades, når du har brug for dem – i stedet for at loade dem med det samme. Det hjælper med at prioritere websites ressourcer, så hastigheden på sitet også performer bedst muligt.

Så den åbenlyse fordel ved lazy load af billeder er, at der er færre bytes, som skal downloades – og det betyder, at langt de fleste devices, på hvilket som helst netværk, kan processere de resterende ressourcer meget hurtigere.

En anden væsentlig fordel handler om omkostninger. De fleste cloud hosting serivces leverer assets, heriblandt billeder, til en pris baseret på antal overførte bytes. Et billede med lazy load bliver måske aldrig loadet, fordi brugeren aldrig scroller ned til billedet. Det reducerer antallet af overførte bytes, som i sidste ende kan lette lidt på omkostningerne til din cloud hosting service.

Vil du vide mere om, hvordan du optimerer performance på dit website, så send mig en mail. Og hvis du gerne vil høre mere om, hvordan vi kan hjælpe jer med web performance, og med digitalisering generelt, så ræk ud til min kollega Jon. Så giver han nok en kop kaffe.

Og hvis du vil læse endnu mere om de vigtigste områder du skal fokusere på for at forbedre din web performance, så har vi en artikel om det lige her.