Filformater til produktbilleder: JPG, PNG, TIFF eller WEBP?

Filformatet på dine produktbilleder lyder som en teknisk detalje, men det påvirker både hastighed, skarphed og hvor “premium” din webshop føles. Et tungt billede kan gøre en produktside langsom. Et for hårdt komprimeret billede kan få materialer, farveovergange og teksturer til at se grumsede ud, især når kunder zoomer ind.

Valget handler sjældent om ét “bedste” format. Det handler om at bruge det rigtige format til den rigtige opgave.

Hurtigt overblik: hvad er du ude efter?

Når man vælger filformat til produktbilleder, ender man næsten altid med at balancere tre ting: kvalitet, filstørrelse og kompatibilitet. Det er også derfor, mange webshops ender med en kombination, ikke en enkelt løsning.

Nogle teams vil helst have én standard, der bare virker overalt. Andre vil have maksimal performance og vil gerne servere next-gen formater til moderne browsere, men stadig have en sikker backup til ældre enheder.

Det bliver hurtigt overskueligt, når du kobler formatet til brugssituationen.

• Hurtig indlæsning
• Zoom og detaljevisning
• Ensartet look på tværs af sortimentet
• Transparent baggrund til fritlægninger

JPG (JPEG): standarden til fotobaserede produktbilleder

JPG er stadig det mest udbredte format til produktfotos på web. Det skyldes primært, at formatet er let, understøttes af alle browsere og egner sig godt til fotografiske motiver med mange farver og bløde overgange.

JPG bruger tabsgivende komprimering. Det betyder, at filen kan blive markant mindre, men at der kan opstå artefakter, hvis du komprimerer for hårdt, eller hvis billedet gemmes igen og igen i samme format. I praksis kan det ses som blokke i skygger, “myggenet” i fine strukturer eller lidt sløring i kanter.

En god tommelfingerregel til webshops er at eksportere i høj kvalitet, men ikke “maksimal” kvalitet, og at undgå gentagne re-exports af samme JPG. Gem hellere en masterfil og eksportér derfra.

Et ekstra tip: progressive JPG kan opleves hurtigere, fordi billedet vises gradvist, mens det loader. Det ændrer ikke filformatet, men kan forbedre den oplevede hastighed.

PNG: når gennemsigtighed eller knivskarpe kanter er vigtig

PNG er tabsfrit, så det bevarer detaljer meget præcist. Det gør PNG stærkt til grafik, logoer, badges, ikoner og billeder med tekst, hvor du ikke vil risikere komprimeringsstøj omkring bogstaver.

Den mest typiske grund til at vælge PNG i produktbilleder er gennemsigtighed (alfa-kanal). Hvis du har fritlagte produkter, der skal kunne ligge oven på farvede baggrunde, mønstre eller kampagneflader, er PNG et sikkert valg.

Ulempen er filstørrelsen. Til rene fotografier bliver PNG ofte væsentligt større end JPG eller WebP, og det kan koste på load-tid og performance, især på mobilnet.

• Brug PNG når: du har behov for transparent baggrund (fritlægning)
• Brug PNG når: du har tekst, grafiske elementer eller helt skarpe kanter
• Undgå PNG når: motivet er et almindeligt foto uden gennemsigtighed, fordi filen ofte bliver unødigt tung

WebP: mindre filer uden at det føles som et kompromis

WebP er lavet til web og er i mange tilfælde det mest effektive format, når målet er høj billedkvalitet ved lav filstørrelse. WebP kan både være tabsgivende (som JPG) og tabsfrit (som PNG) og kan også understøtte gennemsigtighed.

I praksis betyder det, at du ofte kan få en fil, der ligner din JPG eller PNG for øjet, men som fylder mindre. Det kan give hurtigere produktsider, bedre Core Web Vitals og en mere smidig oplevelse for kunder på 4G og travle netværk.

Den klassiske bekymring ved WebP har været kompatibilitet. I dag understøttes WebP af langt de fleste moderne browsere, inklusiv nyere Safari på iPhone og Mac. Har du kunder på ældre enheder eller miljøer, er løsningen at levere en fallback.

Det gøres typisk på én af to måder:

1. Dit CMS/CDN håndterer det automatisk (mange platforme kan servere WebP, når browseren kan tage imod det).
2. Du bruger <picture> og tilbyder WebP først, og JPG/PNG som backup.

TIFF: masterfil, arkiv og tryk, ikke webshop

TIFF er et professionelt format til maksimal kvalitet og efterbehandling. Det er tabsfrit, kan rumme høj farvedybde og er velegnet som “arbejdsfil”, når billeder skal kunne justeres, farvekorrigeres og genbruges til flere formål.

Til web er TIFF næsten altid en dårlig idé. Filstørrelserne er store, og formatet er ikke et praktisk leveringsformat til almindelige produktlister og gallerier.

Derimod giver TIFF mening i disse situationer: når du vil gemme en stabil master i høj kvalitet, eller når billeder skal i tryk og videre gennem en grafisk produktion.

Hvilket format passer til hvilken opgave?

Når man ser formatvalget som en del af en kanalstrategi, bliver det nemmere at standardisere. Her er en praktisk oversigt, der matcher typiske e-commerce behov.

Et workflow der virker i praksis (og sparer tid)

Mange webshops får mest ro i driften ved at adskille “master” fra “levering”. Masterfilen skal kunne holde til fremtidige behov. Leveringsfilen skal være hurtig og kompatibel.

Det er også her, et ensartet produktfoto-setup gør en forskel: samme lys, samme baggrund, samme beskæring og samme filspecifikationer giver et ensartet udtryk og gør automatisering realistisk, når sortimentet vokser.

Når du sætter et format-flow op, er der fem beslutninger, der giver mest effekt:

1. Gem en master: TIFF/PSD i høj kvalitet, så du ikke mister data ved gen-export
2. Sæt en web-standard: WebP som førstevalg, JPG som fallback til fotos
3. Reserver PNG til det rigtige: gennemsigtighed og grafik, ikke almindelige fotos
4. Hold farver stabile: sRGB til web, og styr på farveprofiler når der eksporteres
5. Eksportér i faste størrelser: klare regler for dimensioner til liste, produktvisning og zoom

Hos et produktfotostudie er det typisk en del af en effektiv produktion at levere flere varianter fra samme grundfil, fx både webfiler og masterfiler, og i de filformater der passer til kundens platform.

Komprimering: hvorfor “kvalitet 100” sjældent er den rigtige idé

Det lyder logisk at gemme JPG i maksimal kvalitet, men du betaler ofte med større filer uden synlig gevinst. Mange motiver ser næsten identiske ud ved en lidt lavere kvalitet, mens filstørrelsen falder markant.

Omvendt kan for hård komprimering koste konverteringer, fordi materialer og overflader ikke længere ser troværdige ud. Det gælder især:

• tekstil med fine vævninger
• blanke produkter med bløde refleksioner
• skygger og gradienter på hvid baggrund

En god praksis er at teste på den måde kunderne bruger billederne: mobil først, hurtige scrolls, zoom på detaljebilleder, og tjek på både lys og mørk skærm.

Typiske fejl der gør produktbilleder langsomme eller uens

En klassiker er at bruge PNG til hele kataloget “for at få den bedste kvalitet”. Til fotos giver det ofte det værste fra to verdener: meget store filer og ingen synlig forbedring.

En anden fejl er at uploade alt for store billeder og lade temaet skalere dem ned i browseren. Det ser måske fint ud, men brugeren downloader stadig en tung fil. Her hjælper responsive billeder (srcset) og en bevidst strategi for dimensioner.

Der er også mange, der mister ensartethed ved at blande exports fra forskellige værktøjer og forskellige presets. Det kan give små farveforskelle, varierende hvidbaggrund og skiftende beskæring, som samlet set får en webshop til at se mindre professionel ud.

Hvad du med fordel kan bestille, når du får taget packshots

Hvis du samarbejder med et studie, kan du spare meget intern tid ved at definere leverancerne klart fra starten. Det gælder både filformat, dimensioner, navngivning og hvilke varianter der skal med.

En typisk, robust pakke til e-commerce kan være:

• WebP (primær) + JPG (fallback) til produktgalleri
• PNG til fritlagte varianter, hvis du bruger transparent baggrund i design eller kampagner
• TIFF/PSD som master, hvis du vil kunne genbruge billeder til print, nye crops eller fremtidige kanaler

PackshotHuset og lignende full-service set-ups arbejder ofte med faste lysopsætninger og standardiserede leverancer, netop fordi det giver hurtig gennemløbstid og et ensartet udtryk, også når du løbende tilføjer nye produkter.

Hvis du vil gøre det helt enkelt: brug WebP til web, sørg for JPG som sikkerhedsnet, hold PNG til gennemsigtighed og grafiske behov, og gem TIFF til master og tryk. Det giver både fart på siden og ro i dit billedbibliotek.