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
- Kvalitet: Komprimering af billedets kvalitet og meta data
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:
- Photoshop (betalt)
- befunky.com (gratis)
- Microsoft Paint (gratis)
- Apples Preview (gratis)
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.
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.
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.
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.
