Billeder er årsag til mange alvorlige fejl på websites. Og du kan nemt undgå problemerne.
Billeder til hjemmeside skal opfylde en række praktiske krav.
Er de for store og tunge, bliver din side langsom. Det koster dyrt på mange områder:
- Det skader din placering i Googles søgeresultat
- Besøgende giver op længe før indholdet bliver vist
- Din backup bliver unødigt stor
Billedbehandling tager tid
At finde gode billeder til en hjemmeside eller blog kan tage timer.
Regn med, at det også kan blive tidkrævende at billedbehandle - altså gøre dem klar til brug online.
Denne guide kan bruges uanset hvilket system dit website eller din blog er lavet i. Udover nogle helt generelle råd om at bruge billeder på et website er der også 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 og tekniske 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 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 en sliderfunktion skaber problemer
- For mange højkantsbilleder skaber dårligt design på smartphone.
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.
Bryd designprocessen ned i atomer
At have styr på billeders størrelse og klargøre billeder - inden du går i gang med at designe en side - kan spare dig for mange timers bøvl.
Vil du vide mere om at arbejde effektivt med webdesign vil jeg anbefale dig at læse om arbejdsmetoden Atomic Design. (Du finder link i bunden af dette indlæg.)
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
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. Forskellige designskabeloner har forskellige mål.
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 fire vigtigste billedstørrelser til DIVI
1920 px til fuldskærmssbilleder
1280 px til helsides billeder
1080 px til sliderbilleder 1 kolonne
795 px til alle andre billeder (ofte 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
Vær opmærksom på, at kolonne-bredde i DIVI ikke nødvendigvis er lig med, at indsatte billeder skal have kolonnens bredde.
Har du en kolonne på 320px skal indsatte billeder alligevel være større - fordi de ellers bliver meget små, når de vises på smartphone.
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 eventuelt “stifinder” eller “finder” til at få overblik over filnavne og billedstørrelser på de billeder, du har på din computer.
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 - pixels og bytes
Kommer billeder direkte fra fotografens kamera, skal de stort set altid 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å 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. Det vejer i begge tilfælde det samme.
Følgende er kun en tommelfingerregel - kig altid på kvaliteten. Men gør aldrig billeder tungere end nødvendigt:
- 250-300 kb til 1920 pixels brede billeder
- 200-300 kb til 1280 pixels brede billeder
- 200-250 kb 2001080 pixels brede billeder
- 100-200 kb til 795 pixels brede billeder
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 fuld skærm
Når du bruger hele browserens bredde - fuldskærm - er 1920 px minimum.
Hvis du har indrammet layout vil “arket” ovenpå baggrunden aldrig være bredere end 1280px og så behøver du ikke bredere billeder.
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 og blogindlæg
Billedgallerier ser som regel pænest ud, hvis billederne har samme højde.
Jo større billederne er, desto flottere er de naturligvis. 795 pixel i bredde er ofte ok, men du kan lave dem større, hvis du finder det nødvendigt. Det vil naturligvis sløve siden.
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 mindst 700 px
Gemmer du de fleste af dine billeder i størrelsen 795 px tilpasser de sig fint til bloggen også.
Udvalgt billede til blogindlæg
Billeder til udvalgt billede (featured image) bør ikke være for små, fordi det er dem, der følger med, når et indlæg deles på sociale medier.
1280 x 720 px er en udmærket størrelse, hvis de skal se godt ud på eksempelvis Facebook.
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
Tips & Tricks til at designe websider
Vil du lave smart webdesign i en fart?
Brug Atomic Design som en del af din arbejdsproces
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
Vil 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.
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
Sekunder er afgørende
Er billederne ikke optimale, kan 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
MINDST 795 px brede
Lever alle billeder i mindst den størrelse - og gerne 1280px ellere bredere.
Skal billederne bruges til slider, baggrundsfoto eller helsides billede er 795px langt fra nok.
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 størrelser på kolonner - og du skal være opmærksom på, at billeder ofte skal indsættes STØRRE end kolonnens bredde.
Ser du 5 eller 6 kolonner ved siden af hinanden på en stor skærm, forvandles de alle til en bredere kolonne på smartphone…. derfor skal billeder ofte være større, end de vises på stor skærm.
Det er i alle tilfælde bredden, der nævnes
- Fuldskærm: 1920 px
- Hel side: 1280 px
- 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)
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.
Guiden er oprindeligt udgivet i september 2015, men er siden revideret for at passe til DIVIs udvikling.
Seneste revidering:
- 24. november 2020
