När du väljer foton för din webbplats är det inte bara vad som finns i bilderna som betyder något. Faktum är att välja rätt bildformat kan vara lika viktigt. Så låt oss prata om JPG vs PNG, som att välja, och varför.

om du går till fel format kan du sluta med en långsammare webbplats, högre avvisningsfrekvens och lägre konverteringsfrekvens – och det är inte vad du vill, särskilt när det lätt kan undvikas.,

skillnaden mellan png och JPG

låt oss börja med de grundläggande definitionerna.

PNG står för bärbar Nätverksgrafik, med så kallad ”förlustfri” komprimering. Det betyder att bildkvaliteten var densamma före och efter komprimeringen.

JPEG eller JPG står för Joint Photographic Experts Group, med så kallad ”förstörande” komprimering.

som du kanske gissat är det den största skillnaden mellan de två. JPEG-filer kvalitet är betydligt lägre än för PNG-filer.

den lägre kvaliteten är dock inte nödvändigtvis en dålig sak.,

Vad är JPEG?

JPEG-bilder är ett vanligt val för bilder som produceras av digital fotografering och de är ett bra val för bilder med komplexa färger och skuggning.

medan kvalitetsförlusten är liten klarsynt med JPG:s 10: 1-komprimering, gör den mindre storleken JPEG-bilder lämpliga för webbanvändning eftersom det är användbart för responsiv presentation att minska mängden data som används för ett foto.

å andra sidan är JPG-bilder inte det bästa valet för linjeritningar och annan textuell eller ikonisk grafik på grund av de skarpa kontrasterna mellan intilliggande pixlar., Om du vill använda en bild av den typen för din webbplats, bör du förmodligen överväga att använda förlustfria grafikformat.

Vad är png?

PNG skapades som en förbättrad ersättning för GIFs och det har blivit det vanligaste förlustfria bildkomprimeringsformatet på Internet.

så vad är en PNG-fil?

känd som bärbar Nätverksgrafik kan PNG-bilden vara palettbaserad, gråskala och icke-palettbaserad färgbaserad RGB/RGBA.,

PNG filformat har utformats speciellt för att överföra bilder på Internet snarare än för utskriftsgrafik och, som ett resultat av detta, stöder inte icke – RGB färgrymder som CMYK.

det stora pluset är det .png erbjuder en mängd olika transparensnivåer vilket innebär att png-bakgrunden kan vara helt transparent vilket är viktigt för PNG-logotyper och liknande. Det är också det bästa valet för bilder med fade effekter.,

JPG vs PNG-grundregeln

eftersom både JPG och PNG-format har sina fördelar och nackdelar, bör du få ut det mesta av dem båda och spela till sina styrkor.

i praktiken betyder det att du ska använda .jpeg för fotografier, och .png för grafik och skärmdumpar.

spelar det verkligen någon roll?

När man talar JPG vs png och jämför de två sida vid sida, är sanningen att du inte kommer att kunna se mycket av en skillnad i bilderna.

Så om PNG-bilder inte ser så mycket bättre JPG, varför inte alltid använda JPG-format och göra det lättare för dig själv?,

tyvärr är det inte så enkelt och anledningen till det är bildkomprimering.

du vill ha högsta kvalitet bildformat men du vill också ha en lyhörd webbplats så du måste verkligen ta skillnaden mellan jpeg och png i övervägande och särskilt skillnaden i bildkomprimering.

Tänk på det så här: bildkomprimering innebär att bildstorleken minskas utan att kvaliteten offras för storleken. Generellt är starkare komprimering lika med mindre filstorlek vilket motsvarar sämre bildkvalitet.,

Så om du vill ha en bra komprimering måste du hitta rätt balans mellan kvaliteten och storleken på din fil.

När du tittar på bilden som sparats i din dator ser du den bästa versionen av den eftersom filen inte har komprimerats. Men om samma bild finns på webbplatsen måste den laddas ner för att du ska kunna se den.

logiskt betyder det att ju större bilden är desto längre laddningstid.,

Bildkomprimeringstjänster

det finns många tjänster och verktyg för bildkomprimering och här är några bra som du kan använda för jpg eller png:

• Kraken.,io – stor balans mellan storlek och kvalitet

• Kraken WordPress plugin – automatisk komprimering av bilder du laddar upp till din webbplats

• WP Smush – en WordPress plugin som kommer att komprimera dina bilder automatiskt

bilder som innehåller text

från tid till annan vill du använda bilder som innehåller text och välja JPEG eller png betyder verkligen här. Png är vanligtvis ett bättre val för bilder av denna typ, liksom för grafik med fina detaljer.,

en viktig skillnad mellan jpg och png är att med JPG, konturerna av bokstäverna, liksom de fina linjerna från grafik, vanligtvis visas mindre skarp.

vanliga bilder

och medan grafiken och bilderna med bokstäver vanligtvis är snyggare i .PNG-fil, med vanliga bilder, JPG är ett bättre val för webben eftersom om mindre storlek.

om du väljer att bara använda PNG kommer de att sakta ner din webbplats vilket kan leda till frustrerade användare.,

ändra storlek på bilder

förutom komprimering kan du också överväga att ändra storlek på de bilder du vill använda för din webbdesign. Den goda nyheten är att storleksändring inte är en komplicerad process och det finns två sätt att göra det rätt:

1 – Använd några av de ändra storlek verktyg som gör att du kan manuellt flytta kanterna på bilden. Om du vill behålla det ursprungliga höjdbreddsförhållandet, se till att ta ett hörn av bilden istället för en av sidorna, och det gör att du kan ändra storlek på din bild proportionellt.,

2-Om du inte vill ändra storlek på bilden genom att manuellt justera den, eller om du behöver en bild av en viss storlek, kan du använda några av de avancerade grafikprogram som gör att du kan ange bildstorleken och sedan justera tidsbilden därefter.

Ibland blir bilderna lite ur fokus efter att ha ändrats, så överväga att använda några av skärpverktygen innan du exporterar den som png eller jpg.

PNG vs JPG när du inte är säker

nu vet vi att JPG är bättre för fotografier, medan .PNG-bilder fungerar bättre för grafer och bilder med text., Men vad är bättre för de bilder som är någonstans däremellan?

Skärmdumpar är ett bra exempel på det eftersom de ofta innehåller fotografier samt text och skarpa linjer.

När det gäller JPG vs PNG när man talar om skärmdumpar är det nästan alltid bättre att använda PNG-format för att behålla skärpan och läsbarheten för texten i bilden.

i slutet av dagen, om du fortfarande inte är säker på vilket format du ska gå med, kan du alltid spara bilden i båda dem och sedan jämföra dem och bestämma vilken du tycker passar dina behov bäst.,

slutar tankar på JPG vs PNG jämförelse

Nu när du vet vad PNG-fil är och vad skillnaden mellan en png och en JPG är, bör det vara lättare för dig att välja rätt format för att hålla din webbplats både snygg och snabb och lyhörd.

När man talar om JPG vs PNG finns det några viktiga saker att tänka på.

PNG är det bästa valet för grafer, bilder med text, skärmdumpar, och för mönster som kräver användning av öppenhet, såsom logotyper och liknande., Den största nackdelen är dock att de är större i storlek och de kommer att sakta ner din webbplats.

JPG är å andra sidan mindre och snabbare att ladda, men komprimeringen kommer i hand med viss kvalitetsförlust som vanligtvis inte är ett problem för fotografier, men det kan vara dåligt för text eller bilder som innehåller fina linjer.

Så vilken ska du använda? Tja, det beror på vilken typ av bild och vilken typ av webbplats du bygger.