Billeder skal opfylde en række praktiske krav, hvis du vil designe flotte sider og have flere besøgende

Det tager timer at finde gode billeder til en hjemmeside eller blog.
Regn med, at det også er tidkrævende at gøre dem klar til brug online.
Guiden kan bruges uanset hvilket system dit website eller din blog er lavet i. Udover nogle helt generelle råd er der dog også nogle konkrete tips til dig, der bruger WordPress og designskabelonen DIVI.

Forkert brug af billeder koster tid, penge og kunder

Billeder er en af de mest udbredte årsager til problemer på hjemmesider og blogs. Og jeg taler ikke om dårlige billeder - ikke om uskarpe billeder eller dårlige motiver, men om praktiske fejl.

Mange billeder på websites og blogs har alvorlige fejl. Og desværre er de usynlige for dig, hvis du ikke ved, hvad du skal være opmærksom på.

  • Forkerte billednavne gør dig mindre synlig i søgemaskiner
  • For tunge billeder sløver din side og irriterer besøgende
  • For tunge billeder får backup til at fylde for meget
  • For mange tunge billeder gør det tidkrævende at tage backup
  • For tunge billeder fylder dit webhotel - så er der mindre plads til mail og backup
  • For små billeder skaber et gnidret og uprofessionelt look
  • Forkert placerede billeder skaber uro på siden
  • For mange eller for store billeder i sliderfunktionen skaber problemer

Her får du praktisk viden, du er NØDT TIL at kende og tage hensyn til, hvis du vil undgå de værste fejl og tidrøvere.

 

Billeder skal have rigtig størrelse FØR de lægges på dit website

Billedbehandling (beskæring, lysere, skarpere etc.) skal klares før billeder lægges online
Billedstørrelsen skal være den optimale før billeder lægges på
Billeders filnavne skal gerne indeholde keywords af hensyn til SEO
Filnavne
skal være fri for æøåÆØÅ og blanke mellemrum

g

Bredde og højde måles i pixel (px)
Vægten måles i kilobyte (kb eller MB)

Vægten har afgørende betydning for, hvor hurtig - eller langsom - din side er.

Kender du dine mål

Før du kan finde de rigtige billeder i den rigtige størrelse, skal du kende de mål, der er relevante for din designskabelon.
Hvor bred er en hel side. Hvor bred er spalten til blogindlæg. Hvilken størrelse skal sliderbilleder have. Etc.

Vigtige mål til designskabelonen DIVI

De tre vigtigste billedstørrelser til DIVI

1280 px til fuld skærmbredde
1080 px til sliderbilleder
795 px til alle andre billeder (den mest brugte størrelse)

,

Kolonnebredde i DIVI

1 kolonne: 1080 px (slider)
¾ kolonne: 795 px (side m. sidebar)
⅔ kolonne: 700 px (blog)
½ kolonne: 510 px (2 kolonner)
⅓ kolonne: 320 px
¼ kolonne: 225 px

Indstil WordPress til rigtig billedstørrelse

Når du kender de billedmål du hyppigst skal bruge, bør du indstille WordPress mediebiblioteket til de størrelser, du bruger mest. Det indebærer, at billeder altid gemmes i fire versioner: originalen du uploader - samt de tre størrelser, du vælger.

Indstillingerne for WordPress mediebiblioteket finder du i kontrolpanelet under indstillinger > medier

Brug “stifinder” eller “finder” til overblik over filnavne og billedstørrelser.

Herunder ser du en stribe billeder, der ikke er gjort klar til brug online.
De vil alle skabe alvorlige problemer, hvis de lægges online som de er. Kan du spotte fejlene?

Filnavnene bør laves om og billedernes skal reduceres i størrelse via et billedbehandlingsprogram

Herunder er billederne reduceret i størrelse og har fået bedre filnavne.

Vælg den rigtige størrelse

Kommer billederne direkte fra dit kamera, skal de reduceres i størrelse.
Billederne må ikke fylde megabyte.

Er billederne for store - vejer de for meget (målt i bytes) eller er de for brede (målt i pixel) - skal de reduceres i størrelse, før de kan lægges online.

Er billederne for små (på størrelse med tændstikæsker) skaber det et umoderne og teksttungt udtryk.
Billeder skal generelt være betydeligt større, end ikke-designere forestiller sig.

Sørg også for passende mængde luft (white space) omkring billeder og øvrige elementer.

Vær opmærksom på, at det et billedets vægt (mål i byte) der er afgørende.
Vejer et billede 4 megabyte gør det ingen forskel, om det fylder hele skærmen eller du trækker det mindre, så det er på størrelse med en tandstikæske.

Du kan ikke (uden videre) SE størrelsen
Billedet af bilen herover ser ud til at være størst. De er lige store (målt i højde og bredde). Men billedet af benzinstanderne vejer mest - målt i kilobyte.

Filnavne - undgå æøåÆØÅ og blanke mellemrum

Kryptiske filnavne som img_25-09-2015.jpg bør erstattes med mere sigende navne, der gerne må indeholde keywords.
lisbeth_scharling.jpg er bedre af hensyn til søgemaskineoptimering.

Forkert navngivning af billeder

Er billederne navngivet forkert, kan det give problemer med synlighed generelt.
Korrekt navngivning kan give fordele i forhold til synlighed i Google.

Dine billeder skal derfor også navngives korrekt.
Du må ikke bruge ÆØÅæøå og blanke mellemrum i filnavn.
“rødgrød og æbleflæsk.jpg” dur med andre ord ikke.
“roedgroed-aebleflaesk.jpg” er bedre.

Prøv at google dit eget navn og tjek billeder

Herunder kan du se, hvilken effekt det giver at være omhyggelig med navngivning af billeder. Det er ikke tilfældigt, at Lene Purkær Stefansen og hendes bronzebilleder fylder hele Google billedsøgning på Lene Purkær Stefansen, når man søger på hendes navn. Det er et godt eksempel på, hvorfor det ikke er uden betydning, hvilke filnavne du bruger.

Billeder til slider - 1080 px

Billedslideren dur kun på skærme, der har en opløsning på min. 768 pixels
Og slideren dur kun i disse kolonner

  • 1 kolonne: 1080 pixels
  • ¾ kolonne: 795 pixels
  • ⅔ kolonne: 700 pixels

Du får det flotteste resultat ved at bruge slider-billeder, der har samme højde.
Bruger du flere billeder i forskellige størrelse, vil slideren tilpasse sig det højeste billede.

Billeder til slidere bør sjældent være for høje. Oftest får du det flotteste resultat, hvis billederne er meget brede (1080 px) og ikke højere end 450 px

Billeder til gallerier - 795 px

Billedgallerier ser som regel pænes ud, hvis billederne har samme højde.
Jo større billederne er, desto flottere er de naturligvis. 795 pixel i bredde er optimalt, men du kan lave dem større, hvis du finder det nødvendigt. Det vil naturligvis sløve siden.

Billeder til toppen af blogindlæg - 700 px

Standardbredden på en blog med sidebar er ¾ kolonne = 700 px
Vil du have et billede til at fylde hele bredden, skal det altså være 700 px

Gemmer du de fleste af dine billeder i størrelsen 795 px, tilpasser de sig fint til bloggen også.

 

Billeder indsat i blogindlæg - 320 px

dreamstime_xs_22495555Du kan strengt taget selv bestemme bredde på billeder du indsætter i blogindlæg - bare de ikke bliver bredere end spalten.

Men det er ofte en god idé at indsætte billeder, der fylder max 320 px, når de indsættes til højre for i et blogindlæg.

Det mål passer nemlig fint til mange smartphones.

Billederne jeg har brugt her er henholdsvis 320 px og 480 px brede.
På computer ses størrelsesforskellen.
På smartphone er de lige store.

Tjek på både computer, smartphone og tablet for at se forskellen.

dreamstime_xs_22495555

 

Udvalgt billede til blogindlæg

Billeder til udvalgt billede (featured image) bør ikke være for høje.
700 x 250 px er en udmærket størrelse, hvis de ikke skal være for voldsomme i størrelse.
Eksperimenter dig frem for at finde en passende størrelse til dit formål.

Når du bruger citatboksen i DIVI behøver det lille runde foto ikke være større end 100 px på hvert led.
Billedet jeg har brugt her fylder kun 11 kb

Lisbeth Scharling

WEBwoman, WEBwoman KOMMUNIKATION

Størrelsen på dine billeder er afgørende for det samlede indtryk.
Gør dem store nok. Især hvis det er et billede med mange detaljer.
Billeder på størrelse med tændstikæsker er kun brugbare som ikoner eller til små portrætter og simple billeder.

Billeder i toppen af kolonner

Når du bruger billeder i kolonner som vist herover er det vigtigt, at billederne har samme højde. Ellers vil de skabe et uroligt indtryk.

Herover er der brugt et billede, der oprindeligt er 800px × 420px
DIVI har automatisk skaleret ned til en størrelse, der passer til kolonnen. Det sker dog kun i nogle tilfælde. Som regel bør du derfor sørge for, at billeder har den samme størrelse, hvis de skal placeres ved siden af hinanden.

Miniguide i at tilpasse billeder, så de får samme størrelse

Gør du browservinduet smallere, vil kolonnerne placere sig oven på hinanden og billederne vil tilpasse sig kolonnebredden - og så kan du se, hvorfor jeg ikke har sat billederne ind i helt lille størrelse.

Billedbehandlingsprogram

PicasaVil du sikre dig, at du bruger ordentlige billeder på dit website eller din blog, skal du kunne bruge et billedbehandlingsprogram. Det behøver ikke være avanceret og dyrt. Der findes mange gode og endda gratis programmer. Eksempelvis Picassa fra Google.

Du skal kunne reducere billeder til den rette størrelse.
Du skal også gerne kunne beskære billeder.
Det er også ofte en fordel at kunne gøre et billede lysere, mørkere, skarpere

Ved hjælp af Picasa kan du nemt forandre størrelsen på adskillige billeder på én gang.
Marker alle de billeder, du vil formindske og vælg funktionen eksporter (se den røde pil på billedet).
Vælg nu hvilken størrelse billederne skal ekporteres til og hvilken mappe, de skal placeres i.

OBS: den størrelse du vælger vil påvirke den længste side af billedet.
Et billede på højkant vil derfor ikke nødvendigvis få den ønskede bredde.

Du kan aktivere billederne og se dem i stor version.

Sekunder er afgørende

Er billederne ikke optimale vil det koste dig dyrt.
Hvis billederne sløver dit website med tre sekunder, kan det koste dig halvdelen af de besøgende.

40 procent af dem, der besøger en webshop surfer videre, hvis de skal vente i tre sekunder eller mere, før et website er indlæst, viser undersøgelser.

Et enkelt sekunds forsinkelse kan betyde en nedgang på hele 2,8 procent i omsætningen for en webshop. Selv på en almindelig hjemmeside er det vigtigt, at billederne er i orden.

Huskeliste - billeder til DIVI

795 px brede

Lever alle billeder i den størrelse - medmindre de skal bruges til slider eller helsides baggrundsbillede
Skal billederne være mindre, vil DIVI selv sørge for, at de tilpasser sig  eksempelvis kolonnebredde/skærmstørrelse

Husk at alle billeder skal navngives korrekt - ingen æøå og mellemrum

Billedformat - alle billeder gemmes som .jpeg eller .jpg
Billeder med gennemsigtig baggrund kan være .png

Logo - ikke større end nødvendigt.
Jo større det er, desto mindre plads er der til menupunkter.
Må gerne leveres i .png med gennemsigtig baggrund

DIVI kan indstilles til, at logo automatisk bliver lidt mindre, når besøgende scroller ned ad siden

Billeder til sider, blogindlæg og sidebar

DIVI arbejder med flere billedstørrelser
Det er i alle tilfælde bredden, der nævnes

  • 1 kolonne: 1080 px (slider og helsides baggrundsbilleder)
  • ¾ kolonne: 795 px (side m. sidebar)
  • ⅔ kolonne: 700 px (blogindlæg)
  • ½ kolonne: 510 px (2 kolonner)
  • ⅓ kolonne: 320 px
  • ¼ kolonne: 225 px (eksempelvis sidebar)

 

l

Spørg hvis der er mere, du vil vide

Du er velkommen til at skrive en kommentar, hvis du har spørgsmål eller problemer vedrørende billeder, du ikke finder svar på i denne guide. Jeg arbejder videre på den og reviderer løbende efter behov.