Billedstørrelser til webshop: Pixel-dimensioner og komprimering

Når en webshop føles langsom, er det sjældent “serveren”, der er synderen alene. I praksis er det ofte billederne, der fylder mest, og som bestemmer, hvor hurtigt en produktside bliver brugbar på mobil.

Samtidig er billederne typisk det første, kunderne bruger tid på, når de vurderer et produkt. Det betyder, at du både skal ramme skarphed og hastighed, uden at bruge timer på manuelt bøvl.

Pixel-dimensioner: hvad betyder tallene egentlig?

Pixel-dimensioner er billedets bredde og højde, fx 1200×1200 px. Det er ikke det samme som filstørrelse i KB eller MB, men dimensionerne sætter rammen for, hvor detaljeret billedet kan se ud, især når brugeren zoomer eller når skærmen har høj pixeltæthed (retina).

En god tommelfingerregel er: lever billeder, der er større end de faktisk vises i layoutet, men ikke så store, at du sender “printfiler” til web.

Et enkelt eksempel: Hvis dit produktbillede vises 600 px bredt på desktop, er en leverance på 1200 px ofte passende, fordi den også står skarpt på mange mobilskærme og retina-skærme.

Anbefalede størrelser til de mest typiske webshop-billeder

De fleste shops har tre lag: store billeder (forside/hero), produktbilleder og små previews (thumbnails). Det giver mening at standardisere størrelserne, så du kan skalere produktion og holde et ensartet udtryk.

Her er et praktisk udgangspunkt, der passer til mange temaer og platforme:

En kort sætning, der sparer mange rettelser: vælg én primær aspect ratio til produkter og hold den konsekvent.

Når formater og beskæringer flyder, får du ujævne grids, hop i layoutet og mere arbejde med manuel tilpasning.

Det, der typisk går galt i praksis

Du kan have flotte billeder og stadig tabe salg, hvis de er leveret “forkert” til web. Det handler sjældent om én stor fejl, men om mange små.

De klassiske faldgruber dukker ofte op her:

• Uens beskæringer på tværs af produkter
• Upload af alt for store originalfiler direkte fra kamera
• Kvadratiske thumbnails lavet ud fra et rektangulært master uden omtanke
• For hård JPEG-komprimering, der smadrer kanter og teksturer
• Ingen responsive varianter, så mobil henter samme store fil som desktop

Responsive billeder: én fil er sjældent nok

Hvis du kun uploader én billedstørrelse, ender du med at vælge mellem to dårlige muligheder: enten er den stor nok til desktop, men tung på mobil, eller også er den let nok til mobil, men blød på større skærme.

Løsningen er at levere flere størrelser og lade webshoppen vælge den rigtige. I HTML sker det ofte via srcset og sizes, eller via platformens billedmotor/CDN, der serverer en passende variant automatisk.

Et robust sæt størrelser til produktbilleder kan være 400, 800, 1200 og 1600 px (på længste led). Så har du dækning til thumbnails, mobil, desktop og zoom uden at overdrive.

Vil du gøre det nemt for dig selv, så standardisér dine “breakpoints” én gang og brug dem på hele kataloget.

Komprimering: skarphed først, kilobytes bagefter

Komprimering er der, hvor hastighed bliver vundet eller tabt. Pixel-dimensioner bestemmer, hvor meget detalje du kan vise. Komprimering bestemmer, hvor hurtigt det når frem.

Målet er ikke at få den mindste fil, men den mindste fil uden synlig skade på produktet.

En god arbejdsgang er at kontrollere kritiske områder i 100% visning: kanter, teksturer, logo-tryk, syninger, små tekster på emballage og gradienter i baggrunden.

Her er et realistisk filstørrelsesbudget, som mange webshops kan styre efter:

• Produktbilleder: ca. 50–350 KB pr. billede, afhængigt af motiv og baggrund
• Hero/bannere: gerne under 500 KB, hvis det er et foto, og endnu lavere hvis det er grafik

Det er også her, performanceværktøjer giver mening. Google Lighthouse/PageSpeed Insights vil ofte pege direkte på billeder som største forbedringspunkt, især ift. LCP (Largest Contentful Paint), hvor et stort hero-billede tit er “den tunge klods”.

JPEG, PNG, WebP og AVIF: hvad skal du vælge?

De fleste produktfotos bør ende som JPEG eller WebP. PNG er stærkt til logoer og grafik, men bliver ofte unødigt tungt til fotografi.

Når du vælger format, kan du tænke i et simpelt regelsæt baseret på motivet:

• Fotografi med mange farver og detaljer: JPEG eller WebP (ofte bedst samlet set)
• Gennemsigtighed eller knivskarp grafik/tekst: PNG (eller SVG til rene vektorelementer)
• Maksimal komprimering med høj kvalitet: AVIF, hvis din platform understøtter det godt, ellers WebP

Et formatvalg alene løser dog ikke alt. To filer kan have samme format, men være vidt forskellige i både kvalitet og KB afhængigt af eksportindstillinger.

Et konkret tip: start med JPEG kvalitet omkring 70–85 og justér op, hvis du kan se artefakter. Med WebP kan du ofte gå lavere i filstørrelse ved samme oplevede kvalitet, især på packshots med rene baggrunde.

En fast billedstrategi gør produktion skalerbar

Når der kommer flere produkter, bliver billedarbejdet hurtigt enten dyrt eller rodet, hvis der ikke er standarder. Det er præcis derfor mange e-commerce teams ender med faste “billedpakker”: samme lys, samme beskæring, samme filnavne og samme eksportstørrelser.

Det er også en del af logikken i et packshot-setup, hvor ensartethed ikke bare er et visuelt valg, men en effektiv måde at producere hurtigt og stabilt. Et studie som PackshotHuset arbejder netop med standardiserede flows, så du får en serie, der matcher fra produkt til produkt, og som er let at bruge i både webshop, annoncer og katalog.

Det vigtigste for dig er at få leveret billeder i en masterkvalitet, der kan genbruges, og webversioner, der er klar til upload uden ekstra arbejde.

Praktisk eksport: sådan undgår du “pæne, men tunge” filer

Når du eksporterer, er der to trin, der ofte bliver blandet sammen: resize og komprimering. Resize reducerer pixel-dimensioner. Komprimering reducerer datamængden pr. pixel.

Når begge trin er ramt rigtigt, får du et billede, der ser skarpt ud og loader hurtigt.

Et godt udgangspunkt til en eksport-standard kan se sådan ud:

• Master: PSD/TIFF i høj opløsning til arkiv og genbrug
• Web: JPG eller WebP, 1200 px på længste led til produktvisning
• Mini: 400 px til thumbnails og grids, hvor der vises mange billeder

Det lyder simpelt, men effekten er stor, når du ganger det med hundredvis af produkter og tusindvis af sidevisninger.

Kvalitetssikring: de tjek, der fanger problemerne tidligt

Den hurtigste måde at miste tid på er at opdage fejl efter upload, når layoutet allerede er sat. Lav i stedet et fast QA-tjek, før en serie bliver leveret eller lagt på sitet.

Efter en kort visuel kontrol af 5–10 billeder får du ofte afsløret hele batchens typiske fejl: farver der driver, baggrunde der ikke er helt rene, eller komprimering der spiser detaljer.

Her er en enkel tjekliste, der kan bruges internt eller deles med en leverandør:

• Beskæring: sidder produktet ens i rammen på tværs af varianter?
• Kanter: er frilægning og skygger rene ved zoom?
• Detaljer: holder syninger, struktur, print og små tekster?
• Filstørrelse: ligger billederne inden for dit KB-budget?
• Formatpakke: følger der varianter med til thumbnail og mobil?

Hvis du arbejder med flere markeder eller kanaler, giver det også mening at aftale filnavne og mapper fra start, så billedbanken kan bruges uden ekstra sortering.

Når hastighed møder salg: hvorfor det betaler sig at være konsekvent

Indlæsningstid påvirker både brugeroplevelse og købsvilje, og billeder er en af de mest direkte ting at optimere. Et tungt hero-billede kan alene skubbe LCP i den forkerte retning. Og langsomme produktsider gør det sværere for kunden at sammenligne varianter, zoome og lægge i kurv.

Samtidig må optimering aldrig gøre produktet “uskarpt”. Hvis materialer, pasform eller overflade ikke kan læses, stiger usikkerheden, og det rammer typisk konvertering og kan også give flere returneringer.

Det er netop balancen, der er målet: store nok pixel-dimensioner til at vise detaljerne, og stram nok komprimering til at siden føles hurtig.

Et godt samarbejde starter med klare specifikationer

Uanset om du producerer billeder selv eller får dem lavet eksternt, bliver resultatet bedst, når specifikationerne er faste: dimensioner, ratio, baggrund, skyggevalg, filformat og filstørrelsesbudget.

Og hvis du på forhånd ved, om din webshop selv laver WebP, thumbnails og responsive varianter, kan du undgå dobbeltarbejde og få en leverance, der passer direkte ind i dit setup.

Det er sjældent kameradelen, der er flaskehalsen. Det er beslutningerne om størrelse, beskæring og komprimering, der afgør, om billederne bliver en hjælp for salget eller en bremse for siden.