PNG eller JPG: hvilket bildeformat du bør bruke og når

Det korte svaret på PNG eller JPG: bruk PNG til alt med tekst, logoer, flate farger, skarpe kanter eller gjennomsiktig bakgrunn, og bruk JPG til fotografier. PNG er tapsfritt, så hver piksel du eksporterer, er pikselen som kommer frem. JPG er tapsbasert: det kaster detaljer for å gjøre filen liten, og detaljene det kaster, er nettopp de som gjør bokstaver skarpe og gradienter myke. Et foto skjuler det tapet godt. En overskrift på en gradient gjør det ikke.

Forskjellen på PNG og JPG

Begge formatene lagrer et rutenett av piksler, så ingen av dem kan skaleres opp uten å bli uskarpe. Det som skiller dem, er hvordan de presser rutenettet inn i en fil.

JPG deler bildet i små ruter på 8×8 piksler og forenkler fargen og de fine detaljene i hver rute. I et foto fullt av tekstur forsvinner forenklingen i støyen. I en myk gradient eller rundt kanten av en bokstav viser den seg som svake blokker, utsmurte glorier og trappetrinn av farge.

Når du bør bruke PNG

• Teksttung grafikk: sitatkort, kunngjøringer, karuseller, lysbilder.
• Logoer og ikoner, særlig på gjennomsiktig bakgrunn.
• Skjermbilder av grensesnitt, der JPG gjør liten tekst uskarp.
• Gradienter og flate farger, som får striper og blokker under JPG-komprimering.
• Masterfiler du skal redigere igjen, så kvaliteten ikke tapes ved hver lagring.

Når du bør bruke JPG

Bruk JPG til fotografier: produktbilder, portretter, reise, mat. Ekte foto er fullt av korn og tekstur som skjuler komprimeringen, og en JPG med kvalitet rundt 80 til 85 ser som regel identisk ut med originalen til en brøkdel av størrelsen. Et stort foto i PNG kan lett bli flere ganger tyngre uten synlig gevinst.

JPG passer også til design som stort sett er foto med litt tekst, så lenge teksten er stor. Hvis teksten er liten eller tynn, eller står over en myk himmel, eksporter heller PNG, eller test begge og sammenlign ved 100 % zoom.

PNG eller JPG til sosiale medier

Instagram, Facebook, X og LinkedIn komprimerer alt du laster opp på nytt, som regel til JPG. Det høres ut som en grunn til ikke å bry seg, men det er motsatt: komprimering hoper seg opp. En JPG som allerede var presset, blir presset igjen, og feilene dobles. Gi plattformen den reneste filen du kan, i nøyaktig den størrelsen den forventer, så den ikke trenger å endre størrelsen. Størrelsene står i bildestørrelser for sosiale medier.

PNG eller JPG til en logo

PNG, hver gang, hvis du trenger en pikselfil. En logo består av flate former og harde kanter, som PNG komprimerer godt og JPG ødelegger, og en logo trenger nesten alltid gjennomsiktig bakgrunn så den kan stå på foto, farger og mørk modus. Enda bedre er det å beholde masteren som SVG, som er skarp i alle størrelser. SVG eller PNG forklarer når du bruker hva, og logostørrelser lister filene du trenger.

Hvorfor gradienter får striper i JPG

Myke gradienter er den tøffeste testen for ethvert format. En mørk overgang fra nesten svart til dyp fiolett har bare noen få dusin ulike fargeverdier å jobbe med, og JPG-komprimering slår naboer sammen til synlige striper. Det er stripedannelse i gradienter, og det er verst på mørke bakgrunner med lav kontrast.

Korn hjelper mer enn noen innstilling, fordi det gir komprimeringen tekstur å jobbe med i stedet for en flat rekke nesten like farger. Kornete gradienter viser hvor mye som er nok. Marks i Gradiently har sitt eget korn og lys, nettopp den teksturen som hjelper et gradientdesign å overleve plattformens nye komprimering.

Hva med WebP og AVIF

På ditt eget nettsted slår nyere formater begge: WebP og AVIF kan være tapsbaserte eller tapsfrie, støtter gjennomsiktighet og er mindre ved samme kvalitet. Alle dagens nettlesere støtter WebP. Behold PNG og JPG til opplasting på plattformer og deling av filer, og les WebP eller PNG og JPG før du bygger om bildene på nettstedet ditt. For selve innstillingene, se bildekomprimering uten å ødelegge gradienter.