Den bedste billedstørrelse til hjemmesider i 2025

I dag er der flere, der vælger mobilen frem for computeren, når de går på nettet. Mobile enheder har en række forskellige skærmstørrelser, og derfor skal du vælge de bedste billedstørrelser til din hjemmeside, så alle dine besøgende kan få en god brugeroplevelse, uanset hvilken enhed de bruger.

Hvis ikke du optimerer dine billeder, risikerer du, at dine hjemmesidebrugere vil blive vist nogle små og uskarpe billeder eller store fotos, som øger sidens indlæsningstid og tvinger brugerne til at scrolle og zoome.

Den gode nyhed er, at det er nemt at gøre dine billeder kompatible med flere enheder og give dine brugere en førsteklasses browsingoplevelse. Dette gør du ved at vælge de rigtige billeddimensioner, reducere filstørrelserne og bruge en responsiv hjemmesideskabelon.

Følg vejledningen nedenfor for at optimere dine billeder til mobile og stationære enheder.

Den bedste billedstørrelse til hjemmesider

Pixelbredde: 2.500 pixels er perfekt til fuldskærmsvisning i en browser i de fleste tilfælde. Hvis dit billede er mindre end det, risikerer du, at det vil fremstå uskarpt, når det bliver strakt ud for at udfylde browserens bredde.

Billedstørrelse: Den bedste billedstørrelse i pixels afhænger af, hvad billeder skal bruges til. F.eks. skal baggrundsbilleder være større end billeder til blogindlæg.

Filstørrelse: Billeder, der fylder mere end 20 megabyte, kan nedsætte hastigheden på din hjemmeside. Mindre billeder (fra omkring 500 kilobyte op til to megabyte) er bedst i de fleste tilfælde.

Billedattributter: Billedattributter (tekstalternativer til billeder, alt-tekst eller alt-tag) er korte tekster, der beskriver indholdet i dine billeder. De påvirker ikke ydeevnen på din hjemmeside, men de er afgørende for webtilgængelighed, fordi de bruges til at fortolke billeder via skærmlæsere. Skriv kortfattede alt-tekster, og hold dig til mindre end 100 tegn.

De bedste billeddimensioner til hjemmesider på stationære og mobile enheder

Tabellen nedenfor viser anbefalede billedstørrelser til hjemmesider på både stationære og mobile enheder:

Disse billedstørrelser til hjemmesider er vejledende og skal muligvis justeres, især hvis du bruger responsivt webdesign.

Det er næsten altid en god idé, at visningsstørrelsen (rendering) på dine billeder er mindre end uploadstørrelsen.

Hvorfor er billedstørrelsen vigtig for hjemmesider?

• Det skaber en bedre brugeroplevelse
• Det forøger hastigheden på hjemmesidens sider
• Det forbedrer hjemmesidens placering i søgemaskiner

Skab en bedre brugeroplevelse

Du kan forbedre brugeroplevelsen på din hjemmeside ved at dimensionere dine billeder korrekt i forhold til deres funktion. På den måde kan dine besøgende se billederne i den rette størrelse og behøver ikke at scrolle for at se hele billedet.

Hvis dine billeder har en lav opløsning, er pixelerede eller for små, kan det påvirke brugerens kvalitetsopfattelse af dit indhold. For en webshop kan dette føre til, at kunderne sætter spørgsmålstegn ved kvaliteten af din virksomhed og dine produkter.

Har du derimod billeder af høj kvalitet og med de rigtige dimensioner, bliver den opfattede værdi af dine produkter højere, og du giver mere visuel information til potentielle kunder.

Billederne nedenfor kommer fra det bæredygtige skomærke Allbirds, der har forbedret brugeroplevelsen ved klart at fremhæve de forskellige funktioner ved deres produkt.

Forøg hastigheden på hjemmesidens sider

Når du uploader store billeder til din hjemmeside, tager det længere tid for serveren at indlæse siden. Mindre billeder (både i dimensioner og filstørrelse) kan indlæses hurtigere på tværs af enheder.

Indlæsningstiden for billeder omtales ofte som “contentful paint”. Du kan tjekke denne indlæsningstid og andre sidehastighedsmetrikker på dine websider ved hjælp af Googles PageSpeed Insights.

Ifølge undersøgelser siger halvdelen af onlinekunder, at de forlader deres indkøbskurv, hvis en side på en webshop tager mere end tre sekunder at indlæse. Dette viser, hvor vigtigt det er at optimere sidehastigheden for at undgå en høj afvisningsprocent (bounce rate).

Forbedr hjemmesidens placering i søgemaskiner

Hjemmesidens placering eller rangering refererer til dens position i SERP (søgeresultatsiden) i en søgemaskine såsom Google. De hjemmesider, der er optimeret til onlinesøgning, rangerer højere i SERP for relevante søgeord.

Google bruger en række metrikker til at bestemme, hvilke websider der skal rangere højt i deres søgeresultater. Billedkvaliteten (rettere sagt, den brugeroplevelse, den medfører) er sandsynligvis også en vurderingsfaktor i Googles algoritme.

Retningslinjer for billedstørrelse til hjemmesider

• Billedstørrelse til baggrundsbilleder
• Billedstørrelse til hero-billeder
• Billedstørrelse til bannere
• Billedstørrelse til blogindlæg
• Billedstørrelse til logo

Forskellige typer webbilleder har forskellige størrelseskrav. Lad os se på de mest populære billedtyper til en hjemmeside.

Billedstørrelse til baggrundsbilleder

Baggrundsbilleder er generelt de største billeder på en hjemmeside. Denne billedtype fungerer som en baggrund for hovedsiden samt nogle landingssider.

For eksempel sætter cykelhandleren Cowboy sit produkt i centrum ved at bruge et produktbillede som baggrund på deres hjemmeside. Billedet fylder hele skærmen, uanset hvilken enhed det vises på.

Anbefalet billedbredde: 2.560 pixels

Anbefalet billedhøjde: 1.400 pixels

Format: 16:9

Anbefalet filstørrelse: 20 MB

Billedstørrelse til hero-billeder

Hero-billeder ligner baggrundsbilleder, men de har tendens til at være mindre i højden, omkring halvdelen af bagrrundsbilledstørrelsen. Et hero-billede er en god mulighed, hvis du vil fremhæve mere tekst på skærmen uden at tvinge brugerne til at scrolle for at se den.

I eksemplet ovenfor bruger BLK & Bold et hero-billede med et smalt format til at udfylde skærmen og samtidig give plads til tekstindhold nedenunder.

Anbefalet billedbredde: Mellem 1.280 og 2.500 pixels

Anbefalet billedhøjde: Mellem 720 og 900 pixels

Format: 16:9

Anbefalet filstørrelse: 10 MB

Billedstørrelse til bannere

Bannerbilleder kan have forskellige størrelser og former, afhængigt af hvilke platforme de vises på, og hvad du viser på dem. De mest typiske bannere er bannere til displayannoncer. En af de mest populære tjenester til publicering af bannerannoncer er Google Ads.

Hvis du overvejer at lave et bannerbillede, der ikke er en annonce, er det generelt bedst at bruge rektangulære billeder (f.eks. 300 x 200 eller 970 x 90 pixels).

Anbefalet billedbredde: Tjek med annonceplatformen

Anbefalet billedhøjde: Tjek med annonceplatformen

Format: Forskellige

Anbefalet filstørrelse: 150 KB (tjek med annonceplatformen)

Billedstørrelse til blogindlæg

Blogbilleder kan variere efter type og størrelse. Blogindlægget ovenfor kommer fra søvneksperterne Kulala, og billedets uploadstørrelse er 1.200 x 620 pixels, mens dets visningsstørrelse er 894 x 462 pixels.

Ved at definere visningsstørrelsen for dine websider kan du forfine dit design og holde filerne små (billedet i Kulala-indlægget er kun 95,1 KB).

Når det kommer til de primære headerbilleder på dine blogindlæg (øverst på siden), bør de have den samme størrelse på tværs af dine blogsider.

Anbefalet billedbredde: 1.200 pixels

Anbefalet billedhøjde: 800 pixels

Format: 3:2

Anbefalet filstørrelse: 3 MB

Billedstørrelse til logo

Dit logo er højst sandsynligt et af de mindste billeder på din hjemmeside). Afhængigt af dit logodesign bør du vælge enten et rektangulært eller kvadratisk format.

De fleste logoer egner sig til kvadratisk format (forhold 1:1), som du kan se i nederste venstre hjørne af Kulala-eksemplet ovenfor.

Rektangulære billeder fungerer godt for længere brandnavne, eller hvor logoet består af ord snarere end grafik. Shopifys eget logo har forholdet 4:1.

Anbefalet billedbredde: 100 pixels

Anbefalet billedhøjde: 100 pixels

Format: 1:1, 2:3, 4:1

Anbefalet filstørrelse: 1 MB

Anbefalinger til billedstørrelse på mobile enheder

Vælg de rigtige billeddimensioner

Mobilbrugere sætter pris på at kunne zoome ind på billeder. Prøv derfor at finde en god balance mellem billedstørrelse og filstørrelse.

Højopløsningsbilleder giver din hjemmeside et professionelt og velafbalanceret udseende med gode muligheder for zoom. Sørg for, at lignende billeder har det samme format for at opretholde et ensartet design på tværs af sidetyper.

For eksempel kan du gøre alle produktbilleder i din webshop kvadratiske. Kvadratiske billeder er lettere at repositionere på mindre skærme. Derudover passer kvadratiske og lodrette billeder godt på mobile skærme, hvilket gør det muligt for besøgende at se mere af dine billeder uden at skulle scrolle.

Vær opmærksom på filstørrelsen

Store billedfiler kan påvirke din hjemmesides hastighed, især når besøgende bruger en smartphone. Mange platforme til hjemmesidedesign har også begrænsninger for, hvor store filer man kan uploade. For eksempel har Shopify et krav om maksimal filstørrelse på 20 MB.

Hvis du har brug for at komprimere dine billeder for at reducere deres størrelse, findes der onlineværktøjer til billedformatering, der kan hjælpe. Med disse værktøjer kan du omformatere store billedfiler til nye dimensioner eller filtyper.

Det kan anbefales, at du komprimerer header- og baggrundsbilleder til under 10 MB, og produktfotos til omkring 300 KB.

Tilpas billedstørrelsen til mobilvisning

Shopify ændrer automatisk størrelsen på dine billeder, så de passer til små skærme. Men på andre platforme kan du være nødt til at redigere billederne selv for at gøre dem mobilvenlige. Husk, at computerskærme har en vandret position, mens mobilskærme ofte bruges lodret.

Husk også, at store filer bremser indlæsningshastigheden for din hjemmeside. Billedkomprimering uden kvalitetsforringelse giver den bedste billedkvalitet, men det skaber også store filer, der kan tage lang tid at indlæse på din hjemmeside. Overvej at bruge de mindste billedfiler med den bedste opløsning, du kan få.

Shopifys responsive designs og algoritmer er gode til at ændre billedstørrelsen og vise dine billeder på tværs af enhedstyper, men du kan give dem en hånd ved at uploade mindre filer for at gøre brugeroplevelsen mere glidende.

Hvad er den bedste filtype til billeder?

Ved at vælge den rigtige filtype til dine billeder kan du sikre en høj kvalitet og en passende filstørrelse, der er nem at håndtere for at forbedre hjemmesidens hastighed. Her er de mest populære filformater til billeder og deres funktioner.

JPEG

JPEG eller JPG er et af de mest anvendte digitale billedfilformater, fordi det tilbyder en god balance mellem filstørrelse og billedkvalitet. Det er et populært valg til visning af fotos og komplekse billeder med mange farver.

Ulempen ved JPEG-billeder er, at de ikke kan komprimeres uden kvalitetsforringelse, hvilket betyder, at noget billedkvalitet går tabt.

PNG

PNG er et filformat, der kan komprimeres uden kvalitetsforringelse, hvilket betyder, at du kan reducere filstørrelsen uden at ofre billedkvaliteten. Formatet understøtter gennemsigtige baggrunde, hvilket gør det til et godt valg for billeder, der skal kunne vises på forskellige baggrunde.

Selvom PNG'er ofte har større filstørrelser end JPEG'er, er de bedre egnede til detaljeret grafik og logoer på grund af den høje detaljeringsgrad og transparens.

SVG

SVG er et vektor-billedeformat, hvilket betyder, at det gengiver billeder ved hjælp af matematiske ligninger. Dette gør det muligt for SVG-billeder at blive skaleret til enhver størrelse uden tab af kvalitet.

SVG er et ideelt format til logoer, ikoner og andre grafikker, der skal bruges på flere steder. SVG'er har typisk også en mindre filstørrelse end andre formater, hvilket hjælper med at forkorte indlæsningstiden.

HEIC

HEIC (High Efficiency Image Format), er et filformat, der bruges af Apple-enheder. Ved hjælp af avanceret komprimeringsteknologi skaber dette billedformat fotos af høj kvalitet med mindre filstørrelser end tilsvarende JPEG'er.

HEIC-formatet understøttes hovedsageligt af Apple-enheder.

WebP

WebP er et billedformat udviklet af Google. Formatet gør det muligt at komprimere webbilleder uden kvalitetsforringelse og reducere filstørrelsen med mere end 30 % sammenlignet med JPEG og PNG.

Dette kan betydeligt forbedre indlæsningstiderne for hjemmesider. Det er dog værd at bemærke, at det ikke er alle browsere, der understøtter WebP-formatet.

GIF

GIF er et bitmap-billedformat, der er kendt for simple animationer. Formatet gør det muligt at komprimere billeder uden kvalitetsforringelse og reducere dem til maksimalt 256 farver, hvilket resulterer i mindre filstørrelser.

GIF er i høj grad blevet erstattet af PNG i forhold til statiske billeder, men det forbliver et populært valg til korte, loopede animationer, og det understøttes af alle browsere.

TIFF

TIFF, eller Tagged Image File Format, er et billedformat af høj kvalitet og uden kvalitetsforringelse. Formatet understøttes af de fleste billedredigeringsprogrammer, og dets høje opløsning samt farvedybde gør det ideelt til opbevaring af billeder til professionelt tryk.

Med TIFF kan flere billeder og sider nemt gemmes i en enkelt fil, men filstørrelserne har tendens til at være store.

Hvordan finder man billedstørrelser på en hjemmeside?

Den hurtigste måde, hvorpå du kan se størrelsen på et billede på en hvilken som helst webside (uden at downloade billedet), er ved at bruge inspektionsværktøjet i din browser.

Denne metode fungerer på Mac og Windows, med Safari, Chrome eller Firefox.

Gå til en webside, og hold musen over det billede, du vil have information om. Højreklik for at åbne menuen, og vælg “Inspektion” eller “Inspect”.

Ved at klikke på “Inspektion” åbner du sidens HTML-kode (det kan virke kompliceret, men det er det ikke).

Nu kan du se et inspektionspanel, hvor informationen om det billede, du klikkede på, er fremhævet. Hvis du holder musen over den fremhævede kode, vil billedet også blive fremhævet.

Nu kan du se, hvor mange pixels der er i det billede, du undersøger. Hvis du skifter til en anden skærmstørrelse, vil det tal ændre sig i overensstemmelse hermed.

Hvis du leder efter den oprindelige størrelse, som billedet er blevet uploadet i, skal du holde musen over billedlagringslinket.

For at forlade inspektionspanelet skal du blot klikke på X i øverste højre hjørne.

Værktøjer til billedoptimering

• Shopify Image Resizer
• Squirai Image Optimizer
• LoyaltyHarbour Image Optimizer

Shopify Image Resizer

Shopifys gratis onlineværktøj til billedstørrelser er en praktisk måde at justere dine billeder på og gøre dem klar til markedsføringskanaler som sociale medier.

Du kan vælge fra en række officielle billedstørrelser til Instagram-opslag og stories, YouTube-miniaturebilleder og andre typer sociale meideindhold.

Squirai Image Optimizer

Squirai Image Optimizer er blevet testet i forhold til hastighed for at sikre, at dine billeder bliver SEO-venlige. Værktøjet optimerer automatisk alle billeder på din hjemmeside, herunder de billeder, du vil tilføje i fremtiden.

Derudover kan du tilpasse og anvende et vandmærke for at beskytte dine produktfotos uden at skulle kunne programmere.

LoyaltyHarbour Image Optimizer

LoyaltyHarbour Image Optimizer fungerer på samme måde som værktøjet fra Squirai, der automatisk komprimerer billeder på din hjemmeside.

Derudover giver dashboardet dig mulighed for automatisk at generere alt-tekster til billeder og konvertere dem til den bedste filtype for at øge sidehastigheden.

Alternativt, hvis du har mulighed for det, kan du også bruge Photoshop til at hjælpe med at reducere filstørrelsen. Dette kan dog være en mere kompliceret proces end med de ovennævnte værktøjer.

Fejlfinding: problemer med billedformatering

Når du arbejder med din hjemmeside, vil du før eller hen støde på nogle udfordringer med billedformatering. Det kan være alt fra forkerte billedstørrelser til fejl i links.

Lad os se på nogle løsninger på de typiske problemer med billeder til hjemmesider.

Forkert billedstørrelse til en hjemmeside

Problem: Billeder fremstår for store eller for små og kan bryde layoutet af en webside, hvilket resulterer i en forværret brugeroplevelse.

Løsning: Hvis du bruger et hjemmeside-tema eller skabelon, skal du undersøge de korrekte billeddimensioner til dit design. I dit hjemmesideprogram skal du også sørge for at vælge visningsstørrelser for hvert billede, så de ikke vises i fuld størrelse.

Lang indlæsningstid

Problem: Billeder indlæses langsommere (eller slet ikke) end resten af din webside.

Løsning: Et forkert filformat kan føre til unødvendigt store filer, der påvirker indlæsningstiderne. Brug et billedredigerings- eller konverteringsværktøj til at ændre filformatet for dine billeder. For grafik og logoer kan du overveje at bruge SVG for at gøre dem skalerbare uden at gå på kompromis med kvaliteten. For andre billedtyper kan du overveje at konvertere til WebP for at komprimere store filer.

Dårlig billedkvalitet

Problem: Billeder fremstår pixelerede eller uskarpe.

Løsning: Hvis dine billeder fremstår pixelerede eller uskarpe, så prøv at finde en billedversion med højere opløsning. Husk, at billedopløsning og billedstørrelse er to forskellige ting. Opløsning refererer til mængden af detaljer, et billede indeholder, hvilket ofte måles i pixels per tomme (PPI). En højere opløsning betyder et skarpere billede, uanset dets størrelse.

Hvis billedkvaliteten reduceres af komprimering, skal du justere dens komprimeringsindstillinger eller skifte til et format, der kan komprimeres uden kvalitetsforringelse, f.eks. PNG.

Billeder vises slet ikke

Problem: Brudte billedlinks resulterer i, at der ikke vises noget billede.

Løsning: Bekræft kilde-URL'en for dine billeder. Denne URL skal føre direkte til placeringen af din billedfil. Sammenlign filnavnet i URL'en med det faktiske navn på din billedfil. De skal matche nøjagtigt, inklusive filtypen (.jpg, .png, .svg).

Optimer billedstørrelserne til din hjemmeside for succes

Billeder på en hjemmeside handler ikke kun om at gøre hjemmesiden pænere, men også om at forbedre brugeroplevelsen og øge hjemmesidens placeringen i søgeresultaterne.

Størrelsen på dine billeder påvirker begge disse elementer. Er dine billeder for store, kan dine websider ikke indlæses hurtigt. Er de for små, vil de fremstå pixelerede og uskarpe.

Sørg for at forstå kravene til billeddimensioner i dit webdesign, og vælg det rigtige filformat for at balancere billedopløsning og filstørrelse.