Varför är din PNG så stor? 3 svar

Din PNG-fil är på 8 MB för att PNG lagrar varje pixel exakt, och en skärmdump i helskärm på en retina-skärm innehåller faktiskt så mycket information. Formatet kastar inte bort någonting, vilket är hela poängen med PNG men också hela problemet.

Det finns 3 sätt att lösa det på, och var och ett kostar dig något annat. Att minska dimensionerna kostar upplösning som du förmodligen inte använde. Att minska färgdjupet kostar färgprecision på fotografier. Att byta format kostar kompatibilitet utanför webbläsare. Välj utifrån vad bilden ska användas till.

Dina 3 alternativ

• Minska dimensionerna. Gratis, och oftast den största vinsten. Ingen behöver en skärmdump på 5000 pixlar.
• Minska färgdjupet. Fungerar bra på platt grafik, dåligt på fotografier.
• Byt format. WebP behåller transparens och blir vanligtvis 25 till 35 procent mindre.

Varför PNG-filer växer så snabbt

En PNG-fils storlek skalar direkt med antalet pixlar, eftersom varje pixel måste beskrivas exakt. Att dubbla bredden och höjden fyrdubblar antalet pixlar och ungefär fyrdubblar filstorleken.

En skärmdump på 5120 x 2880 från en högupplöst skärm innehåller 14,7 miljoner pixlar. Vid 3 byte per pixel före komprimering motsvarar det 44 MB rådata, och PNG-komprimering reducerar det vanligtvis till någonstans mellan 4 MB och 12 MB beroende på hur mycket enhetliga färger bilden innehåller. Ett resultat på 8 MB är normalt snarare än ett fel.

Lösning 1: minska dimensionerna

Ändra storlek på bilden till den största storleken den någonsin kommer att visas i, vilket tar bort det mesta av filvikten innan något annat testas. Detta är lösningen med störst effekt och lägst kostnad.

Mät det bredaste bilden någonsin kommer att visas på sidan, dubbla det för högupplösta skärmar och ändra storleken till det resultatet. En skärmdump som visas med 800 pixlars bredd behöver 1600 pixlar och inget mer.

Lösning 2: minska färgdjupet

Att konvertera från 24-bitars färg till en 8-bitars palett minskar en PNG med 50 till 70 procent, och fungerar bara på bilder med ett begränsat antal färger. Skärmdumpar av gränssnitt, diagram, logotyper och grafer är perfekta kandidater.

Tekniken lagrar en palett med upp till 256 färger och refererar till den per pixel, istället för att lagra fullständiga färgvärden. En skärmdump av ett användargränssnitt innehåller sällan mer än 256 unika färger, så minskningen syns inte. Ett fotografi innehåller tiotusentals färger, så samma minskning skapar synliga färgband över himlar och hud.

Lösning 3: byt format

Konvertera till WebP för webbanvändning, vilket behåller transparens och vanligtvis blir 25 till 35 procent mindre än PNG. Konvertera till JPG endast när bilden är ett fotografi och inte behöver någon transparens.

• Förlustfri WebP för grafik och skärmdumpar, vilket behåller varje pixel exakt och ändå sparar 20 till 30 procent.
• Förlustbehaftad WebP för fotografiska PNG-filer, där besparingen når 70 procent eller mer.
• JPG för fotografier utan transparens, där PNG var fel val från början.
• AVIF för stora fotografiska bilder, vilket komprimerar ännu hårdare på filer över 100 KB.
• Vektorgrafik för logotyper och ikoner, där en SVG-fil kan väga en bråkdel av valfritt rasterformat.

Den vanligaste orsaken: ett foto sparat som PNG

Ett fotografi sparat som PNG är 3 till 5 gånger större än samma fotografi som JPEG, utan någon synlig skillnad. Det här enskilda misstaget står för de flesta för stora PNG-filer.

PNG-komprimering letar efter upprepningar, och fotografier innehåller nästan inga på pixelnivå, eftersom varje pixel skiljer sig något från sin granne. Formatet slutar med att lagra miljontals nästan unika värden exakt. Spara fotografier som JPEG eller WebP och reservera PNG för bilder som faktiskt har enhetliga färger eller transparens.

Hur du krymper en PNG utan att förlora kvalitet

Följ dessa 5 steg i ordning för att minska en PNG och samtidigt behålla den förlustfri.

1. Beskär bort oanvända ytor, eftersom tomma marginaler fortfarande kostar filstorlek.
2. Ändra storlek till den största visningsstorleken bilden någonsin kommer att behöva, dubblerat för högupplösta skärmar.
3. Kontrollera om bilden faktiskt behöver transparens, eftersom en platt bild komprimeras bättre.
4. Minska färgpaletten om bilden är grafik snarare än ett fotografi.
5. Konvertera till förlustfri WebP, vilket fortfarande är exakt och vanligtvis 20 till 30 procent mindre.

Steg 1 och 2 löser oftast problemet på egen hand. De återstående stegen spelar roll när en bild måste förbli mycket stor, till exempel en helskärmsdump i dokumentation.

Varför skärmdumpar är så stora på moderna skärmar

Högupplösta skärmar fångar bilder med 2 eller 3 gånger den logiska upplösningen, så en skärmdump av ett fönster på 1200 pixlar sparas med 2400 eller 3600 pixlar. Filen är mycket större än vad fönstret såg ut att vara.

Den extra upplösningen är användbar när skärmdumpen ska visas på en annan högupplöst skärm och bortkastad annars. För dokumentation och hjälpartiklar halverar en storleksändring tillbaka till den logiska storleken dimensionerna och minskar filen med cirka 75 procent samtidigt som den ser identisk ut för de flesta läsare.

När du bör behålla PNG-filen stor

Behåll PNG-filen i full storlek när bilden är en masterfil, ett tryckoriginal eller en källfil som ska redigeras senare. Komprimeringsbeslut hör hemma på leveranskopior snarare än på original.

Designfiler, logotypmasterfiler, tryckmaterial och skannade dokument motiverar alla sin storlek. Lagra dessa i full upplösning och skapa mindre kopior för varje destination. Misstaget är att publicera masterfilen istället för att spara den, eftersom en masterfil kostar diskutrymme en gång medan en publicerad masterfil kostar bandbredd vid varje besök.

Transparens kostar mer än vad folk förväntar sig

En transparenskanal lägger till ett fjärde värde till varje pixel, vilket ökar rådata med cirka 33 procent före komprimering. Många PNG-filer bär på den kanalen utan att använda den.

Skärmdumpar, exporterade diagram och bilder som lagts mot en vit bakgrund behåller ofta en alfakanal som är helt heltäckande överallt. Att ta bort den kostar ingenting visuellt och minskar filen märkbart. Kontrollera om bilden verkligen behöver en transparent bakgrund innan du antar att kanalen krävs, eftersom de flesta bilder som placeras på en vit sida inte gör det.

Förlorar man kvalitet om man komprimerar en PNG

Förlustfri PNG-optimering förlorar ingenting, medan minskning av färger eller dimensioner ändrar bilden permanent. De 3 teknikerna beskrivs ofta tillsammans men är inte likvärdiga.

Förlustfri optimering omorganiserar hur filen lagrar sina data och sparar vanligtvis 5 till 20 procent med ett pixelidentiskt resultat. Palettreducering och storleksändring ändrar själva bilden, vilket är acceptabelt för leveranskopior och oacceptabelt för masterfiler. Behåll originalet när minskningen inte är återställningsbar.

Hur du fixar en hel mapp med för stora PNG-filer

Bearbeta mappen i en enda omgång, eftersom för stora PNG-filer oftast skapas i grupper från samma källa. En uppsättning dokumentation, ett skärmdumpsbibliotek eller en export från ett designverktyg tenderar att dela samma problem rakt igenom.

Släpp in upp till 500 filer samtidigt, eller dra ett ZIP-arkiv rakt in, och ställ in dimensioner och format en gång för hela uppsättningen. Allt körs i din webbläsare på din egen processor, så interna skärmdumpar, produktdesign och kunddokumentation når aldrig en server. Ingenting laddas upp, så det finns ingen lagringspolicy att läsa och ingenting lämnas kvar efteråt.

Åtgärda källan till problemet såväl som filerna. Ett skärmklippsverktyg inställt på att spara PNG i full retina-upplösning kommer att fortsätta skapa filer på 8 MB i all oändlighet. De flesta skärmklippsverktyg tillåter ett standardformat och en skalfaktor, och att ändra båda en gång tar bort behovet av att bearbeta skärmdumpar igen efter varje hjälpartikel.