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.

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å:

 

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).

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

 

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.

  1. Gå ind under “Resize” i menuen til venstre
  2. 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.
  3. 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.

 

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.

  1. Gå til tinypng.com
  2. Træk et eller flere billeder ind i den stiplede kasse.
  3. Vent et par sekunder og lad Tinypng komprimere billedet.
  4. 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.

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.

Del denne artikel

Indhold

Skal vi hjælpe dig med billede optimering?

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.

Ring til os på 40 90 91 98

Flere indlæg fra samme kategori

Skal vi tage en snak?

Udfyld formularen her og vi vil svare på din henvendelse inden for kort tid. Du er også velkommen til at kontakte os på telefon eller skrive til os på kontakt@webko.dk.

Så snart du benytter dig af vores formular, accepterer du samtidig vores persondatapolitik, som du kan læse her

+200 tilfredse kunder

Hvis du ikke allerede er kunde hos os ved du måske ikke...

At vi holder til i Herning, men kommer med glæde ud til jer til en uforpligtende snak om jeres muligheder. 

Vi har åbent fra kl. 08.00-16.30 mandag til torsdag og fredag fra kl. 08.00-15.00. Men vi er altid klar på at møde ind før, eller gå hjem senere, hvis det passer bedre ind i din kalender.

Du finder os på

Webko ApS
Industrivej Nord 11
7400 Herning
Find vej

Jacob Soelberg

Partner og konsulent

Vi sidder klar til at hjælpe

Eller skriv til os på kontakt@webko.dk