facebook1pximg
Kursusfabrikkens blog

Guide til komprimering af billeder

Se videoen hvor Simon kort introducerer komprimering af billeder og hvad du kan læse i blogindlægget.

Du har sikkert selv oplevet frustrationen, når en hjemmeside er alt for langsom og du skal vente i, hvad der føles som en evighed, før siden og billeder loades og vises. Den følelse vil du selvfølgelig helst undgå, at dine kunder sidder med. Derfor skal du sikre dig, at dine billeder på din hjemmeside ikke fylder for meget, da det kan være med til at sænke hastigheden på din hjemmeside.

I blogindlægget her kan du læse om, hvorfor du skal gøre dine billeder mindre på din hjemmeside, hvilke fordele og metoder der er til komprimering af billeder og hvordan du kan gøre billeder mindre med forskellige programmer.

Hvorfor skal du gøre dine billeder mindre?

Det er sådan, at store billedefiler sænker hastigheden på din hjemmeside, hvilket påvirker brugeroplevelsen negativt. Ved at komprimere billeder gør du filstørrelsen på billederne mindre, hvilket øger hastigheden på din hjemmeside. Det kan være med til at skabe en positiv brugeroplevelse på din hjemmeside, som derfor øger din hjemmesides performance og dermed også SEO-placering (placing på Google). Derfor er det vigtigt, at du optimerer dine billeder, inden du uploader dem i dit CMS-system, omend du arbejder i WordPress, Umbraco, Shopify eller en af de andre CMS-systemer (du kan læse mere om CMS-systemer og hvilket du skal vælge i vores blogindlæg).  

Fordelene ved komprimering af billeder

Faktisk er der flere fordele at hente ved at optimere dine billeder. Hastigheden optimeres, som er gavnligt for brugeroplevelsen, og én der godt kan lide hurtige hjemmesider; det er Google. Google rangerer nemlig hjemmesider i søgenetværket efter forskellige faktorer, hvor hastighed er en af dem. Derfor er du også med til at søgeoptimere din hjemmeside ved at komprimere dine billeder. Så ved at du gør dine billeder mindre, øger du samtidig muligheden for, at dine kunder finder dig på Google, da du øger dine chancer for at blive vist på side 1 af Google. Vil du gerne vide mere om, hvordan du kan komme i toppen på Google? - Læs vores guide til hvordan eller få praktisk erfaring på et SEO-kursus

Når du komprimerer dine billeder, bliver filstørrelsen mindre, hvilket også betyder, at det vil blive hurtigere for dig at foretage backup af din hjemmeside, da filerne simpelthen fylder mindre. Fordele er altså i flertal, så vi håber, at vi har vækket en opmærksomhed omkring, hvordan du kan drage fordel af at komprimere dine billeder. Og nu vil du sikkert rigtig gerne vide, hvordan du gør det…

Men hvordan?

Og det kommer vi til! Først skal du vide, at der er forskellige metoder til at komprimere filstørrelsen på dine billeder. Vi kommer til at forklare to forskellige metoder: lossy compression og lossless compression. Og nu bliver det lidt teknisk, men hold tungen lige i munden - der er stor værdi at hente i komprimering af billeder!

Lossy compression (klassisk komprimering)

Med lossy compression komprimerer du billedets filstørrelse ved at slette noget data i filen. Det kan risikere at gå ud over kvaliteten af billedet, som gør, at billedet fremstår pixeleret og uskarpt. Derfor skal du være opmærksom på ikke at komprimere billedet for meget.

Dog er lossy compression en af de mest populære metoder til at komprimere billedets filstørrelse, fordi det giver dig mulighed for at reducere filens størrelse meget ad gangen. Du skal bare huske at holde øje med, hvor meget du kan komprimere filen, uden at billedets kvalitet bliver for dårlig. For såvel som at brugeren bliver frustreret over langsomme hjemmesider, så er pixeleret billeder også frygtelig frustrerende at kigge på. Det handler derfor om at finde balancen mellem, hvornår billedet fylder tilstrækkeligt lidt, imens du bevarer en kvalitet, der opretholder en god brugeroplevelse.

Lad os tage et par eksempler

Komprimering af billede

I billedet ovenfor ser du tre forskellige komprimeringer baseret på, hvilken kvalitet du eksporterer billedet i fra dit billedredigeringsprogram. Hvis vi laver en sammenligning, kan vi hurtigt vurdere, at 50% ser godt ud med en mere end acceptabel kvalitet. Hvis vi tager 25% bliver detaljerne i baggrunden en anelse mere sløret, når vi zoomer ind. Men stadig ikke noget, det blotte øje vil lægge mærke til og billedet vil stadig være en acceptabel komprimering for de fleste hjemmesider. Det sidste billede på 5% er tydeligvis ikke acceptabel, da det er meget pixeleret. Lad os tage et kig på, hvor meget plads vi sparer ved de forskellige komprimeringer:

  • originalt billede: 1,36 MB
  • 50%: 185 KB -  86,64% reducering af filstørrelse
  • 25%: 116 KB - 91,62% reducering af filstørrelse
  • 5% : 35 KB - 97,47% reducering af filstørrelse

Forestil dig, at vi gør dette ved alle vores billeder. På den måde sparer vi ufattelig meget plads på vores hjemmeside, som gør hjemmesiden dejlig hurtig.

Det handler om at finde balancegangen for, hvornår kvaliteten bliver for dårlig, hvor det gyldne punkt for dette billede ligger omkring de 20-25% og dermed omkring de 100-116 KB, hvilket jo er en betydelig forskel fra det originale, der fyldte 1,36 MB.

Lossless compression (tabsfri komprimering)

Betydningen her ligger lidt i ordet “tabsfri”, da du med lossless compression nemlig ikke mister tab af billedkvaliteten. Når du bruger lossless compression gør du billedet mindre ved at fjerne unødvendig data om billedet. Det kan være information omkring, hvornår billedet blev taget, hvilket kamera det er taget med osv.. Altså faktorer der ikke påvirker kvaliteten af billedet. Du vil derfor ikke ende ud med et pixeleret billede ved lossless compression. Dog har du ikke mulighed for at komprimere filstørrelsen på dit billede i lige så stor omfang, som du har med lossy compression.

Derfor vil reducering af billeder med lossy compression føre til en større reducering af filstørrelsen på dine billeder, som fører til en hurtigere hjemmeside end med lossless compression.

Men hvordan vælger du så, om du skal bruge lossy compression eller lossless compression?

Der vil være forskel på, hvor vigtig billedkvaliteten er for dig til fordel for en hurtig hjemmeside. Tricket er at finde den gyldne balance mellem den laveste filstørrelse og en acceptabel kvalitet. Det kræver, at du vurderer, hvad der er vigtigt for lige netop dette billede. Er det meget vigtigt, at dine billeder er af ekstremt god kvalitet eller kan du gå på kompromis med kvaliteten til fordel for en hjemmeside, der loader hurtigere? Det afhænger selvfølgelig af, hvad dit formål er og hvad du sælger. Sælger du sko, gadgets eller bøger er selve billedet formentlig ikke det vigtigste for dig. Der er du mere interesseret i at have en hurtig hjemmeside, der giver brugeren en god oplevelse. Sælger du til gengæld køkkener, er madblogger eller fotograf, så er dine billeders kvalitet vigtigere for dig, og dine kunder er i højere grad parate til at vente et par sekunder, da billedet er en stor del af oplevelsen for den konverterende bruger.

Hvad så nu?

Hvad så nu?

Når du har fundet ud af, hvilken metode du vil bruge til at gøre dit billede mindre, så skal du samtidig overveje, hvilket filformat der er bedst at bruge, da det hænger sammen med metoden.

Vi har forskellige muligheder, når det kommer til at vælge det filformat, der er bedst til dit formål. De mest populære filformater til billeder er PNG, JPG(JPEG) og GIF. Der er forskel på de tres kvalitet, størrelse og muligheder.

  • PNG: Ved at vælge PNG får du en høj kvalitet, men deraf også en stor filstørrelse. PNG er oplagt til lossless compression, men kan også blive komprimeret efter lossy compression.

TIP: til simple billeder som PNG burde du lave dem til mindre end 100 KB for den bedste performance på din hjemmeside. Hvis du ønsker at anvende transparent baggrund på et billede, er det også PNG-formatet som benyttes.

  • JPG: Ved JPG kan du både komprimere efter lossy og lossless compression, du skal bare være opmærksom på, at komprimeringen ikke medfører et pixeleret billede. Du skal vælge JPG, når du har et billede med mange farver.
  • GIF: Når du vælger GIF ønsker du et animeret billede, som altså ligner en video. GIF formatet bruger kun 256 farver og fungerer kun til lossless compression, hvor du altså ikke går på kompromis med kvaliteten.

Pointen er, at du skal bruge PNG der, hvor du har et simpelt billede, som du har brug for i høj kvalitet, JPG til billeder med mange farver, som ikke behøver at være i høj kvalitet og GIF, når du vil have animerede billeder. Her skal du være opmærksom på også at komprimere dine GIF-filer, som vi lige trækker spændingen for hvordan lidt endnu. Hvis du synes alt det med filformater er en jungle, så kan vi anbefale dig et grundlæggende to-dagskursus i Photoshop, hvor du blandt andet lærer forskellen på de forskellige formater og hvornår du skal bruge hvad.

Jo lavere kvalitet jo højere komprimering og derved mindre filstørrelse på billederne, som fører til en hurtigere hjemmeside.

Hvordan gør jeg billederne mindre?

Godt så. Nu har du fundet ud af, hvilken metode du vil bruge til at komprimere dit billede - afhængig af om du vil gå på kompromis med kvaliteten til fordel for en højere hastighed på hjemmesiden og hvilket filformat, du skal bruge til lige netop dette formål. Husk du kan vurdere det ud fra, om det er et simpelt eller farvedetaljeret billede. Så langt så godt. Vi har samlet et par anbefalinger til programmer, du kan bruge til at gøre dine billeder mindre.

Program til komprimering af billeder

Adobe Photoshop

Det oplagte valg er at bruge det billedredigeringsprogram, du bruger i forvejen, som eksempelvis kunne være Adobe Photoshop. I Photoshop kan du justere på kvaliteten af den fil, du vil eksportere, hvor du skal justere efter at finde balancen mellem en lille filstørrelse og acceptabel kvalitet. På billedet i eksporteringsmenuen får du en forhåndsvisning af billedet i den valgte kvalitet. Føler du dig usikker i Photoshop? Du kan tage et to-dagskursus i Photoshop, hvor du får praktisk erfaring med de grundlæggende funktioner og muligheder i Photoshop. Vi tilbyder også et dagskursus til dig, der er lidt mere øvet i Photoshop og ønsker at effektivisere dit arbejde i programmet.

Eksport i Photoshop

Affinity Photo

Hvis du ikke bruger Photoshop til at redigere dine billeder, så er Affinity Photo et rigtig godt alternativ. Mange har fået øjnene op for dette program, da det er utrolig brugervenligt og betydeligt billigere end Photoshop, men stadig med en høj kvalitet. Når du har redigeret dit billede i Affinity Photo og gerne vil eksportere det, trykker du på Eksporter under Filer. Her kan du justere kvaliteten af billedet, hvor du får en lavere filstørrelse jo lavere kvalitet, du eksporterer dit billede i.  Men husk på at tjekke billedet efter, så du ikke risikerer at ende op med et meget pixeleret billede. Affinity Photo har en funktion til forhåndsvisning, så du hele tiden kan efterse dit billede, inden det eksporteres.

Affinity eksporterAffinity kvalitet

Tinyjpg

Tinyjpg er en hjemmeside, hvor du uploader det billede, du ønsker at komprimere, hvorefter programmet komprimerer det med omkring 65 %. Hvis du vurderer, at billedet endnu har en god kvalitet, så kan du forsøge at give det nye billede en tur også, så du får komprimeret billedet yderligere. Her vil Tinyjpg formentlig skære 5 % mere af. Selvom 5 % ikke lyder af meget, så kan det i det store hele betyde meget for din hjemmesides hastighed. Du kan både uploade filformater i JPG og PNG til komprimering. 

I eksemplet nedefor kan du se, at Tinyjpg har komprimeret billedet fra 1,36 MB til 547,1 KB.

Programmet er styret automatisk - du kan dermed ikke tilpasse komprimeringsgraden med dine præferencer og ønsker.

Tinypng

Billedet fylder stadig 547,1 KB, hvilket er relativt meget. Derfor uploader vi det komprimeret billede, så Tinyjpg kan komprimere det yderligere. 

Tinypng

Billedet blev reduceret yderligere 14 % og er nu kommet ned i 470,7 KB. Her sparede vi altså en del filplads, der kan bidrage til en hurtigere hjemmeside. Dog er det muligt at spare endnu mere, da 470,7 KB stadig er en relativt stor filstørrelse for et billede. 

Ezgif

Hvis du har et animeret billede, så husk endelig også at komprimere dette. Animerede billeder fylder ofte ret meget, men det behøver de slet ikke. Du kan sende din GIF forbi ezgif.com, så du får en mindre filstørrelse, men stadig en GIF i en god nok kvalitet, der giver din side et ekstra pift. Du kan finde GIF's til download på giphy.

Du uploader din GIF og trykker Upload. 

upload af filer

Derefter har du mulighed for at justere komprimeringsniveauet, hvor 5 er det laveste og 200 det højeste.

komprimeringsniveau

Nu kan du klikke på Optimize Image, hvorefter du får mulighed for at downloade billedet på ny i den nye komprimeret udgave ved at højreklikke på billedet.

optimeret GIF

Det animeret billedes originale størrelse var 1,5 MB. Efter at have komprimeret det i ezgif, fylder det nu 1,1 MB. Kan du se forskel? Nej vel? På den måde kan du spare en del KB på både stilbilleder og animerede billeder. 

GIF 1,5 MB

Original størrelse på 1,5 MB

GIF 1,13 MB

Komprimeret til 1,1 MB

Plugin

Du kan også vælge at bruge en udvidelse til dit CMS-system, der kan håndtere komprimeringen af billederne for dig. Hvis du sidder i WordPress, kan vi anbefale de to plugins, der hedder Smush eller ShortPixel.

Du kan også få Tinyjpg som plugin til komprimering af dine billeder i dit CMS-system. Synes du alt det med plugins lyder lidt svært? Vi tilbyder et kursus i WordPress, hvor du blandt andet lærer, hvad plugins er og hvad de kan gøre for din hjemmeside.

Du kan læse mere om plugins i vores blogindlæg om De bedste plugins til WordPress.

En vigtig pointe

En anden vigtig pointe når vi snakker om reducering af filstørrelsen på billeder er, at du også skal vurdere, om du kan justere størrelsen på billedets pixels.  Eksempelvis hvis du har et billede, der er 2400 x 1200 pixels, så kan du formentlig godt nøjes med 1200 x 600 pixels, hvilket også kan være med til gøre billedets filstørrelse mindre og dermed din hjemmeside hurtigere.

Men husk på, komprimering af billeder gennem programmerne ovenfor laver filstørrelsen mindre ved at fjerne data omkring billedet og kvaliteten heraf, hvor reducering af pixels gør selve billedet mindre i højde og bredde. Så ved pixel-komprimering er det altså ikke længere den bagvedliggende data, vi sletter, det er faktisk noget af selve billedet.

Ønsker du flere tips til, hvordan du kan redigere dine billeder i Photoshop? Vi har skrevet en guide til billedredigering i Photoshop.

Vores anbefaling

Generelt skal du tænke over, hvad du skal bruge dit billede til. Er det vigtigt for dig, at billedet har en høj kvalitet? Eller er det fint, at billedets kvalitet svækkes en smule (ikke noget det blotte øje kan se) til fordel for, at brugeren får en bedre oplevelse med din hjemmeside grundet blandt andet den øget hastighed? Du kan godt høre, hvad vi hælder mod ikke? Vi anbefaler, at du bruger lossy compression i de tilfælde, hvor det er muligt, fordi du netop har mulighed for at komprimere billedet med op til 90 % uden at miste nogen betydelig kvalitet af billedet.

Vi kan ikke understrege nok, hvor gavnligt det er for din hjemmeside at optimere dine billeder ved at gøre dem mindre, inden du uploader dem. Vi har opsummeret dette blogindlæg i 4 steps, som du kan følge, når du skal komprimere dine billeder og øge din hastighed.

Du kan også printe modellen ud og ligge på dit skrivebord, så du altid husker at komprimere dine billeder.

Step model til komprimering af billeder

Komprimer billeder og få flere kunder online

Vi håber, at du vil tage denne læring med dig, når du fremover uploader billeder til dit CMS-system. Tak fordi du læste med og god fornøjelse med komprimering af dine billeder - snart har du en lynhurtig hjemmeside!

Hvis du har brug for praktisk erfaring med hjemmesider, så kan du gå på opdagelse i vores kurser herunder.

Gå på opdagelse i relevante kurser 

WordPress kursus basis
photoshop kursus
SEO kursus

Del siden med dit netværK

Seneste udgivelser på Kursusfabrikkens blog