6 måder at optimere billeder på for at opnå bedre webydelse

6 måder at optimere billeder på for at opnå bedre webydelse
Rick Davis

Mennesker er visuelle væsner, og det understøtter forskningen. Efter kun tre dage er retentionsprocenten for tekst kun på 10-20 %, men for billeder kan den være helt op til 65 %. Hjernen modtager 90 % af den visuelle information og behandler den 60.000 gange hurtigere. Uden tvivl spiller visuelle elementer en afgørende rolle for engagementet på et websted.

Det kræver dog meget mere end blot at vælge nogle billeder og placere dem rundt omkring på dit websted. Store billeder bruger meget båndbredde og sænker hastigheden for indlæsning af siderne. Søgemaskinerne vil bemærke den langsomme ydeevne og straffe dig med en lav placering.

Vores artikel viser dig seks forskellige måder at optimere billeder på for at opnå bedre webydelse i 2021.

Tips til billedoptimering for bedre webydelse i

Lad os sige, at du designer websites til nonprofitorganisationer, og du kan lide at bruge mange billeder til at vise dit arbejde. Donorer, sponsorer og andre interessenter bruger sådanne oplysninger som grundlag for fortsat støtte. Men hvis du ikke optimerer billederne, vil brugeroplevelsen og engagementet lide under det. Det største problem vil være langsom indlæsning af sider og timeout-reaktioner.

Ved billedoptimering forstås alle de skridt, du tager for at reducere filernes størrelse, format eller opløsning. Du kan gøre dette uden at gå på kompromis med kvaliteten af billederne.

Lad os se på nogle af dine muligheder.

Illustration af markedsføringskampagne af Deemak Daksina

1. Start med en billedoptimeringsrevision

En billedoptimeringsrevision vil give relevant information om, hvor du skal forbedre dig.

Begynd med at lave en opgørelse over de billeder, du har på dit websted. Relevante tests vil diagnosticere eventuelle problemer, som du skal løse.

Revisionen kan f.eks. vise, at du har for mange billeder. Den viser også din billedformatering og giver dig mulighed for at bestemme, hvad du skal gøre. Hvis du f.eks. fjerner eller ændrer filformater, kan det forbedre indlæsningshastigheden på siderne betydeligt.

Se også: Med det gamle: Design med gamle engelske skrifttyper

2. Vælg det rigtige format til billederne

Billedfiler findes i forskellige formater. Her er de tre mest almindelige typer billedformater til webapplikationer, som du skal kende:

  • PNG har den fordel, at det er et billede af meget høj kvalitet. Desværre er filstørrelsen meget stor for at opnå dette. De fungerer godt til enkle billeder og logoer og giver mulighed for tabsfri komprimering.
  • JPEG-filer er de mest almindelige på de fleste websteder. De er fremragende til komplekse, farverige billeder. Du skal dog være forsigtig, når du komprimerer JPEG-billeder, da der kan opstå tab af klarhed, jo mindre billedet bliver. Nogle kalder dette for tabsgivende.
  • GIF er velegnet til animationer, små ikoner og billeder med lav opløsning. Den giver mulighed for tabsfri komprimering, men du kan kun bruge op til 256 farver.

Gem ikoner af Andreas Storm

3. Ændre størrelsen og komprimere billederne

Du har måske bemærket, at billederne lader til at blive indlæst lidt efter lidt. Der går noget tid, før du får det fulde billede at se, hvilket er et tegn på, at billederne sandsynligvis er for tunge. Hvis du tilpasser størrelsen eller komprimerer dem, vil problemet blive løst.

Bemærk, at du ikke bør uploade billeder, før du har optimeret dem, og for at opnå den bedste kvalitet bør du tilstræbe, at filerne er på mellem 1 og 2 MB.

Brug beskæringsværktøjet til at ændre størrelsen på billederne. Det hjælper med at reducere filstørrelsen, hvilket resulterer i en bedre sideindlæsningshastighed. Du har masser af værktøjer til rådighed til din brug.

Komprimering af billeder hjælper med at reducere filstørrelsen. Men du kan forvrænge billedet, hvis du komprimerer det for meget. Lav komprimering kan være ideelt, hvis du vil bevare billedkvaliteten, men det reducerer ikke størrelsen væsentligt.

Typer af kompressioner

Der er to begreber, som vi allerede har nævnt ovenfor, nemlig tabsfri komprimering vs. tabsgivende komprimering.

  • Tabsfri komprimering bevarer billedkvaliteten, mens unødvendige metadata fjernes.
  • Tabsgivende komprimering reducerer filstørrelsen ved at fjerne nogle af elementerne. Det kan gå ud over billedkvaliteten. Du vil dog muligvis ikke mærke forskellen. Det kan altså stadig være en glimrende måde at komprimere billeder på.

Den rigtige billedredigering hjælper dig med at finde ud af, hvilken komprimering der fungerer bedst for dig.

4. Mobilførste billedoptimering

Alle de skridt, du tager, skal følge en SEO-strategi, der tager udgangspunkt i mobile første rangeringer, da Google er gået over til mobile første rangeringer. Billederne skal se ens ud på alle mobile enheder og på alle stationære enheder. En enorm mængde internettrafik kommer via sådanne enheder.

Se også: Hvordan man designer et gentagende mønster

Hvis brugerne ikke er engagerede med en god UX, når de bruger mobile enheder, mister du dem.

Overvej at optimere billederne til mobiltelefonen først. Hvis det ser godt ud på den lille skærm, vil det også se fantastisk ud på en stationær eller bærbar computer.

ASO-optimering af Abbi_Kerimov

5. Filnavne og deres indvirkning på SEO

Billedoptimering kræver også, at du er opmærksom på, hvordan du navngiver filerne. Alle de handlinger, du foretager, skal have til formål at forbedre synligheden i søgemaskinerne. Når du uploader eller tager et billede, vil enheden automatisk give det et filnavn. Dette navn består typisk af tilfældige koder eller tal. Det kan se ud som 2224444.jpg.

Hvis du uploader billedet som det er på dit websted, hjælper det slet ikke søgemaskinerne.

Gør det lettere for webcrawlere at finde dig ved at tildele hvert billede beskrivende etiketter. Indarbejd relevante nøgleord, der giver oplysninger om din virksomhed eller dit websted.

6. Overvej at bruge lazy loading

Den dovne indlæsning af billeder er præcis, som navnet antyder. I stedet for at hele billedet indlæses på én gang, foldes det ligesom ud. Billedet fortsætter med at blive indlæst, jo mere den besøgende scroller ned ad siden.

Lazy loading viser kun det, der er relevant på det pågældende tidspunkt, og du sparer båndbredde, fordi du ikke bruger unødvendige ressourcer.

Indlæser... af Dona

Sidste tanker

Webpræstationer er en vigtig rankingfaktor, som søgemaskinerne bruger. Google vil straffe dit websted, hvis sideindlæsningshastigheden er lav.

Der er mange faktorer, der bestemmer sidens hastighed, og brugen af billeder er en af de vigtigste. Hvis du ikke optimerer billederne, vil din webpræstation lide under det. Siderne indlæses langsomt, og brugeroplevelsen og engagementet vil ikke være godt.

Vælg det rigtige billedformat. Brug derefter teknikker som størrelsesændring og komprimering for at reducere filstørrelsen. Planlæg regelmæssige sidetests og revisioner af webstedet for at kontrollere webstedets ydeevne.




Rick Davis
Rick Davis
Rick Davis er en erfaren grafisk designer og billedkunstner med over 10 års erfaring i branchen. Han har arbejdet med en række kunder, fra små startups til store virksomheder, og hjulpet dem med at nå deres designmål og løfte deres brand gennem effektive og virkningsfulde visuals.Rick er uddannet fra School of Visual Arts i New York City og brænder for at udforske nye designtrends og -teknologier og konstant skubbe grænserne for, hvad der er muligt på området. Han har en dyb ekspertise inden for grafisk designsoftware og er altid ivrig efter at dele sin viden og indsigt med andre.Udover sit arbejde som designer, er Rick også en engageret blogger, og er dedikeret til at dække de seneste trends og udviklinger inden for grafisk designsoftware. Han mener, at deling af information og ideer er nøglen til at fremme et stærkt og levende designfællesskab, og han er altid ivrig efter at forbinde med andre designere og kreative online.Uanset om han designer et nyt logo til en klient, eksperimenterer med de nyeste værktøjer og teknikker i sit studie eller skriver informative og engagerende blogindlæg, er Rick altid forpligtet til at levere det bedst mulige arbejde og hjælpe andre med at nå deres designmål.