Hjem » Blog » Guide: Sådan optimerer du billederne til din hjemmeside

Guide: Sådan optimerer du billederne til din hjemmeside

Vi for­står vig­tig­he­den af in­te­gra­tion med an­dre plat­for­me, og der­for er vo­res sy­ste­mer åbne, så­le­des at vi al­tid kan kob­le je­res nye løs­nin­ger op på de ek­si­ste­re­de og sam­ar­bej­de med.

Sådan optimerer du billederne til din hjemmeside

Er din hjemmeside sløv? Så kan et godt bud være, at dine billeder fylder alt for meget. Hvis du i forvejen bare uploader dem direkte fra dit kamera eller din telefon, så vil din hjemmeside med garanti, kunne gøres meget hurtigere med billede optimering. Det er slet ikke så svært, og i denne guide vil jeg vise dig hvordan. 

Skrevet af:

Hvorfor skal du optimere dine billeder?

Ingen gider vente på, at en langsom hjemmeside bliver færdig med at loade. Du har få sekunder til at fange dine besøgendes opmærksomhed, og hvis de første 5 sekunder skal bruges på at indlæse store billeder, så har mange af dine potentielle kunder allerede forladt siden og er på vej ind på din konkurrents hjemmeside. I denne guide viser jeg, hvordan du kan optimere dine billeder, så du får en lynhurtig hjemmeside. 

Når man skal arbejde med billede optimering, er der to “knapper” som man kan skrue på:

Størrelse

Optimering af billedets størrelse

Billedets størrelse er den vigtigste faktor, når man skal optimere sine billeder. Tager man eksempelvis et billede på en iPhone X, så er billedet 4032 pixels i bredden og 3032 pixels i højden. På en hjemmeside, skal man næsten aldrig bruge så stort et billede. 
Lad os sige, at jeg vil uploade et nyt billede, på vores forside i kolonnen længst til højre. Så vil jeg først tjekke, hvilken størrelse billedet maximalt kan blive. 

I dette tilfælde kan billedet blive op til 414 pixels i bredden og 335 pixels i højden. Jeg anbefaler, at du spørger din webudvikler om dette, fordi der kan være forskel på, hvor stort billedet bliver vist, afhængig af, hvilken device du sidder på. Sidder du eksempelvis på en stor 4k skærm, kan det være at billedet skal vises større. Når du ved, hvilken størrelse og format, billedet skal være, så skal du have fundet et program, som kan hjælpe dig med at klippe i billedet (crop) og rette i størrelsen (resize).

Programmer

Der findes mange programmer på markedet, som kan hjælpe dig med billede optimering. Jeg har samlet dem, som jeg synes, fungerer godt, på listen herunder:

I denne guide vil jeg gennemgå optimeringen, kun ved hjælp af online værktøjer, så både Windows og Apple computere kan være med, helt gratis. Derfor anvender vi www.befunky.com.

Ret størrelsen på billedet

Billedet, jeg har fundet, er fra unsplash.com, som i øvrigt er et rigtigt godt sted at finde gratis billeder, som du må bruge kommercielt. Billedet fylder 4,9mb og er 4000 pixels i bredden og 6000 pixels i højden. Fordi billedet har et andet format, end det vi skal bruge på vores hjemmeside, så skal det først klippes til (crop).

  • Upload billede til befunky.com
  • Vælg “Crop” i venstre menu
  • Tjek at Aspect Ratio står på “Freeform”.
  • Indtast den størrelse som du skal bruge. I vores tilfælde er det 414×335 pixels.
  • Sæt kryds i “Lock Aspect ratio”
  • Klik på den blå knap for at færdiggøre.
Play Video

Lav billedet mindre

Nu er billedet blevet klippet til, så formatet er det korrekte, men billedet er stadigvæk stort. Nu skal vi vælge, at billedet maksimalt må være 414 pixels i bredden.

  • Gå ind under “Resize” i menuen til venstre
  • Skriv 414 pixels i feltet “width”. Herefter bliver billedehøjden automatisk sat til at være 335 pixels, fordi vi før bestemte formatet på billedet. 
  • Klik på den blå knap for at færdiggøre. 

Så er du færdig med at rette på billedets størrelse, og du kan nu trykke “Save” i toppen af siden for at gemme billedet på din computer. Jeg anbefaler, at du gemmer dine billeder i jpg-format, og sørger for at kvaliteten er høj. Vi optimerer nemlig kvaliteten på billedet et andet sted senere i artiklen. 

Play Video
Kvalitet

Komprimering af billedets størrelse

Billedet, som før fyldte 4,9mb, fylder nu kun 86kb. Og det gør en kæmpe forskel. Et billede på 4,9 mb tager ca. 5 sekunder for dine besøgende at downloade, hvis de sidder på et mobilt 3g netværk. Hvis det fylder 86kb tager det langt under 1 sekund. So far, so good!

Nu skal vi have komprimeret billedet, så det fylder mindre uden at miste kvaliteten. Til dette bruger vi mit personlige favoritværktøj: tinypng.com. På denne side kan du uploade dit billede, og så fjerner den alt det data i billedet, som der ikke er brug for. Ofte ser vi, at billedet kan reduceres mellem 20 og 80 procent uden at miste kvaliteten. 

  • Gå til tinypng.com 
  • Træk et eller flere billeder ind i den stiplede kasse.
  • Vent et par sekunder og lad Tinypng komprimere billedet.
  • Klik download i højre side. 
Som du kan se i videoen herunder, sparede vi 24 procent, så nu fylder vores billede kun 65,6kb.  
Play Video
Konklusion

98,7 procent sparet på billedets størrelse

Nu er billedet maximalt optimeret, som det kan blive, uden at gå på kompromis med kvaliteten. Vi har sparet hele 98,7 procent i forhold til det originale billede. Det ender ud i knap 5 sekunders load-tid, som er sparet for dine besøgende, og de vil med garanti blive længere på din hjemmeside. Nu kan du uploade billedet til din hjemmeside og læne dig tilbage. 🙂 

 

Men jeg har en webshop med 2000 billeder - Det er godt nok meget arbejde?

Ja, det er nemlig meget arbejde. Derfor burde din webudvikler også lave automatisk optimering af dine billeder. Når vi udvikler webshops for vores kunder, så sørger vi altid for at programmere hjemmesiden, således at produktbillederne helt automatisk bliver klippet i det rigtige format, og størrelsen bliver tilpasset, så de fylder så lidt som muligt. 
Hvis du driver en WooCommerce webshop og har problemer med dette, så kan du skrive til os her, og så kan vi helt sikkert hjælpe med dette uden at det koster en bondegård. 

Skal vi hjælpe dig med billede optimering?

Har du måske brug for hjælp til billede optimering? Så tøv ikke med at kontakte os og få en gratis gennemgang af din side. 

Flere indlæg fra samme kategori

- 12. september 2019

Hvorfor vælge WordPress?

Hvorfor vælge WordPress? Hvorfor skal jeg vælge WordPress til min hjemmeside? Det er et spørgsmål vi ofte hører og der findes mange forskellige grunde til, hvorfo... Læs indlægget
- 16. juli 2019

Google Ads vs. SEO: Hvad er bedst?

Google Ads vs. SEO: Hvad er bedst? Hvad er forskellen på Google Ads og SEO, og hvad skal man bruge sine ressourcer på, hvis budgettet er stramt? I dette indlæg dy... Læs indlægget
- 18. juli 2019

Progressive Web Applications

Progressive Web Applications Mange kalder Progressive Web Applications for fremtiden, men vi mener, fremtiden er nu. Hvad dækker begrebet over, og hvorfor synes v... Læs indlægget
- 20. august 2019

Responsive design

Har du styr på responsive design? Og er din hjemmeside mobilvenlig? Er din hjemmeside bygget op med et responsive design? Hvis ikke, så bør den blive det. Vi leve... Læs indlægget