Nordic Custom Made
Billeder

Sådan optimerer du billeder til din hjemmeside – uden at de bliver grimme

Gør din WordPress-side hurtigere med mindre billeder. Få styr på størrelse, WebP, komprimering og responsive billeder.
  • Ca. 8 min. læsning

Hvis din hjemmeside er langsom, er billederne et rigtig godt sted at begynde.

Et foto direkte fra kameraet eller telefonen kan være flere tusinde pixels bredt og fylde flere megabyte.

Det er fint, hvis det skal printes på en plakat.

Det er knap så smart, hvis det skal vises i en lille boks på en hjemmeside.

For hver gang en besøgende åbner siden, skal billedet hentes. Og på en mobilforbindelse kan unødvendigt store billeder hurtigt mærkes.

Heldigvis er billeder også noget af det, du relativt nemt kan gøre noget ved selv.

Du skal især have styr på tre ting:

  1. Den rigtige størrelse
  2. Det rigtige filformat
  3. En fornuftig komprimering

Det behøver ikke kunne ses på billedet.

Men det kan ofte mærkes på hjemmesiden.

Start med størrelsen

Lad os sige, at du har et billede, der er 5.000 pixels bredt.

På hjemmesiden bliver det aldrig vist bredere end 900 pixels.

Så er der sjældent nogen grund til at servere alle 5.000 pixels til den besøgende.

Det svarer lidt til at sende en flyttekasse, fordi nogen har bestilt et frimærke.

Browseren kan godt skalere billedet ned visuelt. Men hvis den stadig skal hente den store fil først, har du ikke sparet ret meget.

Google anbefaler netop responsive billeder, så browseren kan hente en billedstørrelse, der passer til den aktuelle skærm. Store desktopbilleder sendt direkte til små mobilskærme kan ellers bruge væsentligt mere data end nødvendigt.

Hvor stort skal billedet så være?

Det afhænger af, hvordan det bruges.

Et billede, der fylder hele bredden på en stor skærm, skal naturligvis være større end et billede, der ligger i en lille kolonne.

Men som tommelfingerregel:

Upload ikke et kæmpestort originalfoto bare for en sikkerheds skyld.

Find ud af, hvor stort billedet reelt skal vises, og tilpas det derefter.

Hvis du arbejder i WordPress, er der lidt hjælp indbygget. WordPress opretter automatisk flere størrelser af billeder, når de uploades, og bruger responsive image-markup med srcset og sizes, så browseren kan vælge en passende størrelse.

Det betyder dog ikke, at du lige så godt kan uploade alle billeder direkte fra kameraet.

Det er stadig god praksis at starte med en fornuftig original.

Brug WebP – men ikke fordi JPEG pludselig er forbudt

JPEG og PNG virker stadig.

Der er bare kommet bedre muligheder.

Til almindelige fotografier på nettet er WebP ofte et rigtig godt valg. Formatet understøttes bredt i moderne browsere og kan typisk levere en mindre fil end JPEG eller PNG ved sammenlignelig visuel kvalitet.

Der findes også AVIF, som i mange tilfælde kan komprimere endnu mere effektivt. Det understøttes også af de store moderne browsere, men WebP er stadig et meget praktisk og udbredt valg.

Så meget for:

JPEG er altid forkert.

Det er det ikke.

Men hvis du kan få det samme billede i en markant mindre WebP-fil uden synligt kvalitetstab, er det svært at finde en god grund til at sende den større fil.

Hvornår skal du bruge PNG?

PNG har stadig sin plads.

Det er især relevant, når du har brug for eksempelvis:

  • gennemsigtighed
  • grafik med skarpe detaljer
  • elementer hvor tabsfri komprimering er vigtig

Til almindelige fotos vil PNG til gengæld ofte være unødvendigt tungt.

Et stort produkt- eller stemningsfoto gemt som PNG kan fylde ganske imponerende meget uden at give den besøgende noget ekstra.

Til logoer, ikoner og simpel grafik kan SVG også være relevant, fordi det er et vektorformat, der kan skaleres uden at blive uskarpt.

Så formatet afhænger af billedtypen.

Der findes ikke ét format, der er bedst til alt.

Komprimer billedet

Når størrelsen og formatet er på plads, kommer komprimeringen.

Og her tror mange, at komprimering betyder:

Så bliver billedet grimt.

Det behøver det bestemt ikke.

Ved billeder til web kan du ofte reducere filstørrelsen betydeligt, før forskellen bliver synlig for almindelige besøgende.

Det handler om at finde balancen.

Komprimerer du alt for lidt, sender du unødvendige data.

Komprimerer du alt for aggressivt, begynder du at se:

  • slørede detaljer
  • underlige områder i farveovergange
  • blokke og komprimeringsartefakter
  • tekst og fine linjer, der bliver uskarpe

Derfor er vores foretrukne metode ikke:

“Sæt altid kvaliteten til X.”

Det er:

Komprimér billedet og kig på det.

Hvis du ikke kan se forskel i den størrelse, det faktisk skal vises på hjemmesiden, er du sandsynligvis på rette vej.

Hvor meget må et billede fylde?

Her findes heller ikke ét magisk tal.

Et lille billede i en artikel og et stort hero-billede øverst på forsiden har ikke de samme krav.

Det vigtigste er derfor ikke at sige:

Alle billeder skal være under 100 KB.

Det vigtigste er at spørge:

Fylder dette billede mere, end det behøver for at se godt ud i den størrelse, vi bruger det i?

Hvis et hero-billede fylder 2,8 MB, ville vi i hvert fald kigge nærmere.

Hvis en lille thumbnail gør det samme, ville vi kigge meget nærmere.

Mobilen er en god reality check

En hurtig hjemmeside på kontorets fibernet og en ny MacBook kan sagtens være mindre imponerende på en mobiltelefon.

Det er blandt andet derfor responsive billeder er vigtige.

En telefon skal helst ikke hente det samme enorme billede som en stor desktopskærm, hvis en mindre version er rigelig.

WordPress understøtter som nævnt responsive billeder automatisk for almindelige billeder og kan give browseren flere billedstørrelser at vælge mellem.

Men det kræver stadig, at temaet og den konkrete implementering bruger billederne fornuftigt.

Hvis du vil teste forskellen, så prøv din hjemmeside på mobilen uden Wi-Fi.

Det kan være en ganske pædagogisk oplevelse.

Pas på det store billede øverst på siden

Hero-billedet øverst på en side fortjener lidt ekstra opmærksomhed.

Det er ofte et af de største elementer på siden, og det kan derfor have stor betydning for, hvor hurtigt siden opleves som indlæst.

Hvis det store billede er sidens LCP-element – altså det største synlige indholdselement – kan en hurtigere levering af netop det billede forbedre sidens Largest Contentful Paint.

Så hvis du kun har tid til at optimere ét billede i dag:

Start med det store billede øverst på din vigtigste side.

Det giver ofte mere mening end at bruge en halv time på et lille ikon i footeren.

Lazy loading er smart – bare ikke på alt

Billeder længere nede på en side behøver ikke nødvendigvis blive hentet med det samme.

Her kan lazy loading bruges.

Det betyder kort fortalt, at browseren venter med at hente et billede, indtil brugeren nærmer sig det.

Det kan spare både data og arbejde under den første indlæsning.

Men:

Det store hero-billede, som brugeren skal se med det samme, bør normalt ikke lazy loades.

Hvis browseren først venter med at hente det vigtigste billede, kan du faktisk gøre oplevelsen langsommere.

Så:

Billeder langt nede på siden? Lazy loading kan være smart.

Det vigtigste billede øverst? Lad være med blindt at behandle det på samme måde.

Husk bredde og højde

Der er endnu en lille billeddetalje, som har betydning.

Browseren bør helst kende billedets proportioner, inden det er færdigindlæst.

Hvis den ikke gør det, kan teksten og resten af siden flytte sig, når billedet pludselig kommer frem.

Det er den slags, hvor du lige skal trykke på en knap – og så hopper knappen væk.

Ved at angive billedets dimensioner kan browseren reservere plads på forhånd og dermed reducere layout shifts.

På en almindelig WordPress-hjemmeside håndteres meget af det typisk af WordPress og temaet.

Men hvis billeder hopper rundt under indlæsningen, er det noget, der bør undersøges.

En enkel arbejdsgang til dine billeder

Hvis du selv lægger billeder på hjemmesiden, behøver processen ikke være mere kompliceret end dette:

1. Find ud af, hvor billedet skal bruges

Er det et hero-billede, et billede i en artikel eller en lille thumbnail?

2. Tilpas dimensionerne

Lad være med at uploade en 6.000 pixels bred original, hvis behovet er langt mindre.

3. Vælg format

Til almindelige fotos er WebP ofte et godt udgangspunkt.

Brug PNG, SVG eller andre formater, når billedtypen faktisk kræver det.

4. Komprimér

Reducér filstørrelsen, men kontrollér billedet visuelt.

5. Upload til WordPress

Lad WordPress generere de relevante billedstørrelser.

6. Tjek siden på mobil

Og gerne på en forbindelse, der ikke er kontorets lynhurtige Wi-Fi.

Det behøver ikke være mere avanceret for at gøre en forskel.

Men hvad med alle de billeder, der allerede ligger på hjemmesiden?

Hvis hjemmesiden har eksisteret i ti år, behøver du ikke nødvendigvis gå i panik og manuelt åbne 4.000 billeder.

Start med de sider, der betyder mest.

For eksempel:

  • forsiden
  • vigtige landingssider
  • de mest besøgte artikler
  • produktsider
  • sider, der føles langsomme

Kør dem eventuelt gennem PageSpeed Insights og se, om billeder bliver fremhævet som et problem.

Derefter kan du tage de største syndere først.

Det er næsten altid en bedre opgave end:

“Nu optimerer vi hele mediebiblioteket på én gang.”

Du kan godt optimere uden at ødelægge billederne

Billedoptimering handler ikke om at gøre alle billeder små, grynede og triste.

Det handler om ikke at sende mere billeddata end nødvendigt.

Et godt billede til web skal stadig se godt ud.

Det behøver bare ikke samtidig kunne trykkes på siden af en bus.

Så hvis din hjemmeside føles tung, så begynd med billederne:

Rigtig størrelse.
Rigtigt format.
Fornuftig komprimering.

Det er ikke den mest eksotiske form for weboptimering.

Men det er ofte en af de mest effektive steder at begynde.

Relaterede indlæg

  • Nordic Custom Made, Værktøjer

Farvel Podio – vi er skiftet til ClickUp
  • Nordic Custom Made, Økonomi

Nye priser

Indhold

Hvad søger du efter?

Sådan optimerer du billeder til din hjemmeside – uden at de bliver grimme