Om mig

Sådan optimerer billeder til brug på din hjemmeside – gratis!

Billeder er vigtige at have på sin hjemmeside. I dag har besøgende på hjemmesider sjældent tid til at læse en masse tekst, og billeder giver dig altså en chance for at fange opmærksomheden lynhurtigt og holde dine besøgende på din side. Det er godt for din SEO, hvis folk bruger mere tid på side.

Men… hvis du ikke er forsigtig, kan du ende med at gøre mere skade end gavn. Hvis dine billeder er for store kan det gøre din hjemmeside langsom.

Læs med her og lær hvordan du kan optimere dine billeder helt gratis.

Hvorfor skal du bekymrer dig om billedoptimering?

Google begynder i stigende grad at vægte brugeroplevelsen højere, når de skal rangere hjemmesider i søgeresultaterne. En hjemmeside der loader langsomt er, i Googles øjne, en hjemmeside der giver en dårligere brugeroplevelse. Andre punkter som kan føre til en dårlig brugeroplevelse er f.eks. en for lille skrift eller mangel på kontrast mellem tekst og baggrund.

Hvis du benytter store, ukomprimerede billeder vil din side efter al sandsynlighed også loade langsomt og have svært ved at rangere i søgeresultaterne.

Largest Contentful Paint

LCP er den tid det tager for det største element, som er “above the fold”, at loade og være helt klar til interaktion. “Above the fold” er den del af hjemmeside som er synlig uden at scrolle ned. Det vil sige toppen af din hjemmeside. Above the fold-udtrykket kommer fra trykte medier, f.eks. foldede aviser som lå i stakke. Her var det vigtigt at have interessant indhold, så man kunne fange forbipasserendes opmærksomhed.

Din hjemmesides LCP skal loade på under 2.5 sekund for at blive vurderet som “Good” af Google.

Grafik fra Google som viser loading-hastigheder for LCP

Hvilke konsekvenser har det for din hjemmeside og din forretning?

Det er ikke uden grund, at Google rangerer din side lavere, hvis den loader langsomt. Vi er simpelthen blevet så vant til hurtige hjemmesider, at vi hellere vil gå tilbage til søgeresultaterne end at vente på en side loader færdigt. Og det er i Googles interesse at servere sider med passende indhold og god brugeroplevelse til dem, som søger.

Det kan altså i værste fald ende med at være en selvforstærkende effekt af folk som ikke vil vente på din side loader og Google der rangere din side lavere og lavere.

Vil du lære mere om at bygge din egen hjemmeside? Læs her

Hvor meget må billeder fylde, hvis de skal bruges på en hjemmeside?

Det afhænger af billedets formål og resten af indholdet på siden, men en god tommelfingerregel er 2-300 kb. For reference, så kan et billede fra en nyere telefon nemt fylde 7-8 mb, eller mere, hvis kameraet er rigtig godt.

Hvis du har en hero section, hvor baggrunden skal være et billede, f.eks. med en knap og noget tekst henover, så må billedet gerne være større, så kvaliteten ikke bliver for dårlig. Det er ikke særligt interessant at se på et billede der minder mest om antik mosaik.

Når man snakker om størrelser og digitale billeder. I denne artikel refererer jeg altid til størrelse som den mængde data som billedet fylder. Dimensionerne er nemlig ikke altid det afgørende, når det kommer til hvor meget et billede fylder.

Hvilket filformat skal du benytte?

Det er en god ide at benytte det relativt nye format WebP. Det er skabt til at blive brugt på nettet og fylder mindre end f.eks. .png, men bibeholder samme kvalitet. Det er dog ikke alle redigeringsværktøjer der understøtter formatet endnu, men det er godt på vej.

Hvis det ikke er muligt for dig, så skal du benytte PNG og JPG. De har hver sine fordele og ulemper. Som tommelfingerregel skal du benytte PNG til grafik, billeder med gennemsigtig baggrund og screenshots. Hvis du skal vise fotografier er JPG at foretrække.

SVG er godt til logoer og ikoner. SVG fungerer som et stykke kode, og kan strækkes uden at miste skarphed, hvorimod JPG og PNG bliver pixelerede. Nogle vil sige, at man altid skal benytte SVG – til alt. Det er dog ikke altid muligt, og det kan blive lidt kompliceret, hvis man ikke er helt sikker på hvad man laver.

De filformater du skal benytte

  • SVG: God til logoer, ikoner og billeder/grafik der skal animeres (feks. skifte farve når man holder musen over). Hvis du har mulighed for det, så eksperimenter med at benytte dette format til alt.
  • WebP: Nyere format som er optimeret til brug på nettet. Brug det i stedet for PNG og JPG. Understøtter desuden gennemsigtighed.

Værktøjer til optimering af billeder

Gratis værktøjer

Du kan gratis og nemt komprimere dine billeder selv. Der findes mange hjemmesider som kan hjælpe med det.

Min personlige favorit:

Bulk Resize Photos tillader at komprimere ekstremt mange billeder ad gangen og du kan downloade dem i én zip-fil når den er færdig.

Interface fra Bulk Resize Photos som viser de forskellige muligheder

Premium værktøjer

Til mine egne sider bruger jeg et automatiseret værktøj kaldet WP Compress. Det komprimerer billederne for mine kunder, når de uploader til deres side, konvertere til WebP og har indbygget CDN.

Der findes mange værktøjer som dette. Nogle af de mere kendte er ShortPixel og EWWW.

Konklusion

Det er ekstremt vigtigt at have styr på sine billeder, hvis man vil have en hurtig hjemmeside. Du kan gemme https://bulkresizephotos.com/ som et bogmærke, og bruge den inden du uploader billeder til din hjemmeside.

Prøv dig lidt frem med de forskellige indstillinger indtil du finder et setup der virker for dig. Når du har fundet de rette kan du gemme dine indstillinger som et link, og bruge dette som bogmærke i stedet.

Automatic Mode fra Bulk Resize Photos som gør det nemt at anvende de samme indstillinger hver gang

Seneste indlæg

Indholdsfortegnelse