# PNG eller JPG: vilket bildformat ska du välja och när

[Canonical HTML page](https://gradiently.design/sv/guide/png-vs-jpeg)

Ett format behåller varje pixel, det andra slänger detaljer för att hålla sig litet. När du vet vilka detaljer som försvinner vet du alltid vilket du ska välja.

## The short version

- PNG är förlustfritt, så det behåller varje pixel exakt, medan JPG är förlustbehäftat och slänger detaljer som ögat sällan märker.
- Använd PNG för text, logotyper, skärmbilder, plana färger och allt som behöver en genomskinlig bakgrund.
- Använd JPG för fotografier, där komprimeringen är svår att se och filen blir flera gånger mindre.
- JPG stöder inte transparens, och tenderar att visa block och band i mjuka gradienter och runt skarp text.
- Sociala plattformar komprimerar om varje uppladdning, så om du utgår från en ren PNG eller en JPG i hög kvalitet har deras komprimering mindre att förstöra.

Det korta svaret på **PNG eller JPG**: använd PNG till allt med text, logotyper, plana färger, skarpa kanter eller genomskinlig bakgrund, och JPG till fotografier. PNG är förlustfritt, så varje pixel du exporterar är pixeln som kommer fram. JPG är förlustbehäftat: det slänger detaljer för att göra filen liten, och just de detaljerna gör text skarp och gradienter mjuka. Ett foto döljer förlusten väl. En rubrik på en gradient gör det inte.

## Skillnaden mellan PNG och JPG

Båda formaten lagrar ett rutnät av pixlar, så ingetdera går att förstora utan att bli suddigt. Det som skiljer dem är hur de trycker ihop rutnätet till en fil.

| Egenskap | PNG | JPG (JPEG) |
| --- | --- | --- |
| Komprimering | Förlustfri: inget slängs | Förlustbehäftad: detaljer slängs för att spara utrymme |
| Transparens | Ja, en full alfakanal | Nej, genomskinliga områden blir en enfärgad yta |
| Bäst för | Text, logotyper, skärmbilder, plana färger, gradienter | Fotografier och fototunga designer |
| Filstorlek | Större för foton, liten för plan grafik | Liten för foton, justerbar med kvalitet |
| Att spara igen | Säkert, ingen förlust varje gång | Varje sparning förlorar lite mer |
| Färg | Upp till 16 bitar per kanal, sRGB på webben | 8 bitar per kanal, sRGB på webben |

JPG och JPEG är samma format. Tillägget med tre bokstäver är en kvarleva från gamla filsystem.

JPG fungerar genom att dela bilden i små rutor på 8×8 pixlar och förenkla färgen och de fina detaljerna i varje ruta. I ett foto fullt av struktur försvinner förenklingen i bruset. I en mjuk gradient eller runt kanten på en bokstav syns den som svaga block, utsmetade ljusringar och trappsteg av färg.

## När du ska använda PNG

- **Texttunga grafiker**: citatkort, meddelanden, karuseller, presentationer.
- **Logotyper och ikoner**, särskilt på en [genomskinlig bakgrund](https://gradiently.design/sv/guide/transparent-background).
- **Skärmbilder** av gränssnitt, där JPG gör liten text suddig.
- **Gradienter och plana färger**, som bildar band och block under JPG-komprimering.
- **Originalfiler** som du ska redigera igen, så att kvaliteten inte tappas vid varje sparning.

Ett stående socialt inlägg med texten Öppet sent på fredagar, med skarp text över en mjuk gradient

Ett textinlägg på en gradient exporterat som PNG: skarp text, inga band.

Samma stående inlägg, använt för att visa var JPEG-artefakter uppstår runt bokstäver och i mörka gradientområden

Sparad som en hårt komprimerad JPG är det här där artefakter syns först: ljusringar runt bokstäverna och trappsteg i de mörka hörnen.

## När du ska använda JPG

Använd JPG för fotografier: produktbilder, porträtt, resor, mat. Riktiga foton är fulla av korn och struktur, som maskerar komprimeringen, och en JPG med en kvalitet på ungefär 80 till 85 ser oftast identisk ut med originalet till en bråkdel av storleken. Ett stort PNG-foto kan lätt bli flera gånger tyngre utan synlig vinst.

JPG passar också designer som mest är foto med lite text, så länge texten är stor. Om texten är liten eller tunn, eller ligger över en mjuk himmel, exportera PNG i stället, eller testa båda och jämför vid 100 % zoom.

## PNG eller JPG för sociala medier

Instagram, Facebook, X och LinkedIn komprimerar om allt du laddar upp, oftast till JPG. Det låter som en anledning att strunta i saken, men det är tvärtom: komprimering staplas. En JPG som redan pressats pressas igen, och artefakterna fördubblas. Ge plattformen den renaste fil du kan, i exakt den storlek den förväntar sig, så att den inte har något att skala om. Storlekarna finns i [bildstorlekar för sociala medier](https://gradiently.design/sv/guide/social-media-image-sizes).

- Instagraminlägg 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- X-inlägg 1600×900: 1600 × 900
- LinkedIn-inlägg 1200×1200: 1200 × 1200

Exportera i exakt de här pixelstorlekarna. En plattform som måste skala om din bild komprimerar den hårdare.

| Vad du publicerar | Exportera som | Varför |
| --- | --- | --- |
| Citatkort, meddelande, karusellbild | PNG | Text och plana färger klarar omkomprimering bättre |
| Gradient eller materialbakgrund med ord | PNG | Förhindrar band i de mörka och subtila tonerna |
| Fotografi | JPG, kvalitet 85 till 90 | Visuellt identiskt, mycket mindre |
| Logotyp till en profilbild | PNG | Rena kanter, och den kan återanvändas med transparens |
| Open Graph-länkbild | PNG eller JPG | PNG för text, JPG för foto, håll den under några hundra KB |

## PNG eller JPG för en logotyp

PNG, alltid, om du behöver en pixelfil. En logotyp består av plana former och hårda kanter, som PNG komprimerar bra och JPG förstör, och en logotyp behöver nästan alltid en genomskinlig bakgrund så att den kan ligga på foton, färger och mörkt läge. Ännu bättre är att behålla originalet som SVG, som förblir skarpt i vilken storlek som helst. [SVG eller PNG](https://gradiently.design/sv/guide/svg-vs-png) förklarar när du ska använda vilket, och [logotypstorlekar](https://gradiently.design/sv/guide/logo-sizes) listar filerna du behöver.

## Varför gradienter bildar band i JPG

Mjuka gradienter är det svåraste testet för alla format. En mörk blandning från nästan svart till djupt violett har bara några dussin skilda färgvärden att arbeta med, och JPG-komprimering slår ihop grannvärden till synliga ränder. Det är [bandning i gradienter](https://gradiently.design/sv/guide/gradient-banding), och den är värst på mörka bakgrunder med låg kontrast.

Nästan svart till djupt violett: `linear-gradient(180deg, #0b0a14 0%, #1a1233 45%, #2e1a5c 100%)`

En subtil mörk blandning som den här är precis vad som bildar band under JPG. Exportera den som PNG eller lägg till lite korn före exporten.

### Orsakar bandning

- JPG i kvalitet 60 eller lägre
- Att spara en JPG, redigera den och spara igen
- En perfekt ren digital blandning utan struktur
- Att ladda upp en storlek som plattformen måste skala om

### Förhindrar det

- PNG till allt med en gradient
- JPG i 90 eller högre om du måste använda JPG
- Ett lätt kornlager, som bryter upp trappstegen
- Att exportera i plattformens exakta pixelstorlek

Korn hjälper mer än någon inställning, eftersom det ger komprimeraren struktur att arbeta med i stället för en plan följd av nästan identiska färger. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) visar hur mycket som räcker. Gradiently Marks har eget korn och ljus, vilket är precis den struktur som hjälper en gradientdesign att klara en plattforms omkomprimering.

## Hur är det med WebP och AVIF

På din egen webbplats slår nyare format båda: WebP och AVIF kan vara förlustbehäftade eller förlustfria, stöder transparens och är mindre vid samma kvalitet. Alla aktuella webbläsare stöder WebP. Behåll PNG och JPG för uppladdningar till plattformar och för att dela filer, och läs [WebP jämfört med PNG och JPG](https://gradiently.design/sv/guide/webp-images) innan du bygger om webbplatsens bilder. För själva inställningarna, se [bildkomprimering utan att förstöra gradienter](https://gradiently.design/sv/guide/image-compression).

## FAQ

### Är PNG bättre kvalitet än JPG?

PNG är förlustfritt, så det tappar aldrig kvalitet, hur ofta du än sparar det. För fotografier ser en JPG i hög kvalitet likadan ut för ögat och är mycket mindre, så vilket som är bättre beror på innehållet.

### Ska jag publicera PNG eller JPG på Instagram?

PNG för text, grafik och gradienter, JPG i kvalitet 85 eller högre för foton. Instagram komprimerar om båda, så exportera i exakt den storlek den förväntar sig, till exempel 1080×1350 för ett stående inlägg.

### Stöder JPG genomskinliga bakgrunder?

Nej. JPG har ingen alfakanal, så genomskinliga områden fylls med en enfärgad yta, oftast vit. Använd PNG, WebP eller SVG för transparens.

### Varför ser min gradient randig ut efter att jag sparat som JPG?

JPG-komprimering slår ihop liknande färger i mjuka gradienter till synliga band. Exportera designen som PNG, höj JPG-kvaliteten till 90 eller mer eller lägg till ett lätt kornlager.

### Är JPEG detsamma som JPG?

Ja. De är samma format, JPG är bara varianten av filtillägget med tre bokstäver.