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

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.

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.
• 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.

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.

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 förklarar när du ska använda vilket, och logotypstorlekar 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, och den är värst på mörka bakgrunder med låg kontrast.

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 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 innan du bygger om webbplatsens bilder. För själva inställningarna, se bildkomprimering utan att förstöra gradienter.