PNG, förkortning för Portable Network Graphics, är ett förlustfritt bildformat som stöder transparenta bakgrunder. Det fungerar bäst för logotyper, ikoner, skärmdumpar och grafik med text eller platta färger där tydlighet är viktigt.
Till skillnad från JPEG bevarar PNG bildkvaliteten även efter att den har sparats flera gånger. Nackdelen är filstorleken. PNG-filer är vanligtvis två till fem gånger större än JPEG-bilder. Den här guiden förklarar när man ska använda PNG istället för JPEG eller WebP, hur PNG-komprimering fungerar och hur man minskar filstorleken utan att förlora kvalitet.
TL;DR: Förklaring av PNG-filformatet
- PNG är ett högkvalitativt bildfilformat som använder förlustfri komprimering, så bildens skärpa bevaras även efter storleksändring eller redigering.
- PNG stöder transparens, vilket gör den idealisk för logotyper, ikoner och webbgrafik med rena bakgrunder.
- Jämfört med JPEG, GIF och TIFF fungerar PNG bäst för bilder med enhetliga färger och webbfokuserade användningsområden på grund av dess balans mellan kvalitet och filstorlek.
- PNG-bilder bör optimeras noggrant eftersom de kan bli stora, särskilt när de används för detaljerade bilder eller omfattande redigering.
Definition och betydelse av PNG-filformat
PNG-filformatet, en förkortning för Portable Network Graphics, är ett vanligt förekommande bildformat utformat för att lagra och överföra rasterbilder på internet.
PNG introducerades den 1 oktober 1996 som ett patentfritt alternativ till GIF och använder en förlustfri komprimeringsalgoritm för att bevara den ursprungliga bildkvaliteten. Detta innebär att ingen bilddata går förlorad under komprimering eller dekomprimering, till skillnad från förlustbringande komprimering som används i JPG.
En PNG-fil börjar med en fast filsignatur som identifierar formatet och hjälper till att upptäcka överföringsfel. Efter signaturen är filstrukturen organiserad i delar.
Varje chunk består av ett längdfält, en chunktypskod skriven med ASCII-bokstäver, ett datafält och ett 32-bitars CRC-värde för felkontroll. Vissa chunkar är kritiska chunkar som måste finnas i varje PNG-fil, till exempel IHDR-bildhuvud-chunk, IDAT-bilddata-chunk och IEND-slutmarkören för filen.
Bildhuvudet lagrar viktig information som bildens bredd, höjd, bitdjup, färgtyp, komprimeringsmetod, filtermetod och sammanflätningsmetod.
PNG stöder färgbilder, gråskalebilder, indexerad färg och en alfakanal för transparens. Med stöd för 8 bitar och 16 bitar per pixel erbjuder PNG hög färgprecision och stark bildkvalitet, vilket gör den idealisk för logotyper, ikoner och webbsidesgrafik i alla operativsystem och webbläsare.
Fördelar med PNG-filformat
Det finns många fördelar med att använda PNG-filformatet.
- En fördel är att det är möjligt att ha en transparent bakgrund med den här filtypen (till skillnad från JPEG). Detta kan vara praktiskt för att skapa en bild med en "genomskinlig" effekt.
- Dessutom behåller PNG-bilder sin kvalitet även när de ändras i storlek, så de kan användas för både små och stora bilder utan att förlora några detaljer.
- Ett annat plus är att PNG-filer är mycket mindre än andra förlustfria filtyper som TIFF, vilket gör dem idealiska för webbanvändning eller e-postbilagor.
Lär dig: Introduktion till nästa generations bildformat
Hur använder man PNG-filer i webbdesign?
PNG-bilder används bäst i webbdesign när bilden har stora områden med enhetlig färg eller transparent bakgrund. Detta beror på att PNG-bilder är förlustfria, vilket innebär att de behåller alla detaljer i originalbilden. PNG-bilder är också mindre i filstorlek än JPEG-filer, vilket gör dem snabbare att ladda.
Så här använder du en PNG-bild i din webbdesign:
- Se till att bilden är sparad som en .png-fil.
- Använd en HTML-bildtagg för att infoga bilden i din webbsides kod. Attributet img src ska peka till PNG-filens plats på din server.
- Ställ in attributen bredd och höjd så att bilden visas i rätt storlek på din sida.
Om du vill skapa en transparent PNG-bild kan du använda ett onlineverktyg som Pixlr eller Photoshop:
- Skapa ett nytt lager i din bildredigerare och fyll det med den färg du vill göra transparent.
- Ställ in lagrets opacitet till 50 % eller mindre.
- Spara din bild som en .png-fil och ladda upp den till din server.
När bilden visas i en webbläsare visas den med en transparent bakgrund.
Relaterat: Bästa WordPress-plugins för bildoptimering
Jämförelse av PNG med andra bildfilformat (JPEG, GIF, TIFF)
PNG är ett utmärkt val för bilder med stora områden med enhetlig färg eller bilder som kräver en transparent bakgrund. Du bör dock vara medveten om några viktiga skillnader mellan PNG och andra bildfilformat innan du fattar ditt beslut.
- JPEG passar bäst för bilder med mycket detaljer, som fotografier. Komprimeringsalgoritmen som används av JPEG resulterar i viss detaljförlust, så det är inte det ideala formatet för bilder med få färger eller stora områden med helfärg.
- GIF passar bäst för små bilder med begränsade färger, som logotyper eller linjeteckningar. Komprimeringsalgoritmen som används av GIF kan resultera i artefakter (synlig distorsion) i bilden om den inte är noggrant optimerad.
- TIFF är ett högkvalitativt format som är lämpligt för tryckta tillämpningar. TIFF-filer är generellt sett mycket viktigare än andra bildfilformat, så de är inte idealiska för användning på webben.
Tips för att skapa och redigera PNG-bilder
När du arbetar med PNG-bilder finns det några saker att komma ihåg för att skapa och redigera dem effektivt.
- PNG-bilder används bäst när stora områden är enhetliga. Det betyder att de inte är idealiska för fotografier eller bilder med mycket detaljer och variation. De kan däremot vara utmärkta för logotyper, ikoner och annan grafik där du vill ha ett rent och enkelt utseende.
- PNG-bilder stöder transparens. Det betyder att du kan ha en transparent bakgrund bakom din bild, vilket kan vara praktiskt för vissa typer av designarbete. För att skapa en transparent bakgrund i din PNG-bild, använd ett onlineverktyg som Pixlr för att ta bort bakgrundsfärgen från din bild.
- När du redigerar PNG-bilder är det viktigt att tänka på filstorleken. Eftersom PNG-bilder är förlustfria (vilket betyder att de inte förlorar någon kvalitet när de redigeras eller komprimeras) kan de tendera att bli ganska stora filer. Av denna anledning är det generellt bäst att redigera dem i ett program som Photoshop, som har verktyg specifikt för att hantera stora filstorlekar.
Slutsats
PNG är ett praktiskt bildfilformat för en mängd olika tillämpningar. Dess förmåga att behålla data och hålla bilder rena även när de är komprimerade gör det idealiskt för webbsidor, logotyper och annan grafik med stora områden med enhetlig färg eller transparenta bakgrunder.
Om du letar efter en bildfil som är av hög kvalitet och tar upp minimalt med utrymme, behöver du inte leta längre än till PNG!
Vanliga frågor om PNG-filformat
Vad är en PNG-fil och vad används den till?
En PNG-fil är ett rasterbildformat som använder förlustfri komprimering. Det används ofta för webbgrafik, logotyper och bilder som behöver transparens och hög bildkvalitet.
Hur fungerar PNG-komprimering?
PNG använder deflate-komprimeringsmetoden med PNG-filter. Denna komprimeringsprocess minskar filstorleken utan att pixeldata tas bort från originalbilden.
Vad är PNG-bitar och varför är de viktiga?
PNG-segment lagrar bilddata och metadata. Kritiska segment som IHDR, IDAT och IEND definierar filstrukturen, medan hjälpsegment lagrar text, gammavärde och färgprofilinformation.
Hur kan jag öppna en PNG-fil?
Du kan öppna en PNG-fil med hjälp av bildredigeringsprogram, webbläsare eller standardbildvisaren i ditt operativsystem.
Är PNG bättre än JPG eller GIF?
PNG är bättre för bilder med transparens, text och skarpa kanter. JPG passar för foton med förlustbringande komprimering, medan GIF är begränsat till indexerade färger och grundläggande grafik.
