Billeder på din hjemmeside

Artiklen er opdateret den: 4. juli 2023

Billeder på hjemmesiden er efter min mening meget vigtige … og JA jeg ved godt at jeg ikke har nogle her 🙂

Billedstørrelser og format

• Banner billeder – Her vil jeg anbefale 1600px x 550px eller ca. deromkring.
  Format = WebP (Læs om banner-plugin)
• Personer – Her vil jeg anbefale 1000px – XX
  (Vigtigt at billedet er 1000px i bredden, da det er den optimale bredde på siden, hvor du kan læse mere indgående omkring personen. Se eksempel.)
  Format = WebP eller jpg
• Event billede – kommer snart!
• Produktbilleder til WooCommerce – Det kan være svært at anbefale en billedstørrelse her, da du som shopejer formodentlig vil opleve, at få tilsendt alle mulige billedstørrelser fra de forskellige producenter.
  Det er dog altid vigtig, at optimere dem så de er så “letter” som mulige, så dine kunder ikke skal vente på en langsom webshop.
  (På DEMO shoppen har jeg benytte en billedebrede på 1000px)

Vær konsekvent

Jeg vil bestemt anbefale, at du er konsekvent med dine billedstørrelser som du benytter på hjemmesiden. Det ser mere professionelt ud, når alle banner billederne har samme format, når du klikker rundt på hjemmesiden. Det medvirker, at designet står skarpt og ensartet på alle sider og ikke hopper og danser, hvergang du klikker hen på en ny side.

Formatet WebP

WebP billedformatet er forholdsvis nyt og har den store fordel, at det fylder meget mindre end de almindelige billedformater jpg, png etc.
Ulempen er, at nogle ældre browsere ikke kan vise dette format. Det gælder eksempelvis ældre smartphones og Windows systemer.
Læs mere her.

Fordelen ved at billedet fylder mindre er, at din hjemmeside loader hurtigere. Det er vigtigt for brugeroplevelsen og ikke mindst for din mulighed for at komme til tops i Googles søgeresultater (SERP).

Det eneste sted jeg stadig ikke vil anbefale at benytte WebP, er ved produktbilleder på webshoppen. Alle andre steder er jeg af den mening, at de få der ikke kan se dit billede, fordi de benytter gamle systemer, bare må undværer – SEO er så meget vigtigere!

Logo

Hvis man ønsker, at benytte et specielt logo når hjemmesiden vises på mobiler og tablets, kan man i tema mappen (child theme) placere en billede fil med navnet logo-mobil.png.
Nu vil WordPress temaet benytte dette logo ved mobil-visniger. Samtidig skjules det “normale” logo.

At benytte et specielt mobil-logo er ikke optimalt, når man arbejder med at optimere hastigheden på hjemmesiden, da der nu skal hentes to billeder. Et logo til desktop og et andet til telefonen. Når det er sagt, er det dog ikke den største udfordring m.h.t. hastighedsoptimering, specielt hvis man husker at gøre fil størrelsen så lille som mulig.