JPG vs. PNG vs. GIF: Skillnaderna mellan bildfilformat

En ros med något annat namn kan lukta lika sött, som Shakespeare säger i Romeo och Julia, men om du tar en bild på den rosen och sparar den som en JPEG med hög komprimering kan du uppleva en försämring av bildkvaliteten. Det är dock inga problem, eftersom du också har möjlighet att använda PNG, TIFF, GIF, SVG eller till och med ett nytt format som HEIC eller WebP. Vissa av dessa format skulle se bra ut på Capulet-familjens nyhetsbrev, medan andra skulle passa bättre på Romeos blogg, så att avkoda dessa filtyper kan vara ganska användbart.

Lossy vs. Lossless

Varje bildformat kan kategoriseras som antingen ”förlustfritt” eller ”förlustfritt”, och dessa termer förklarar oftast sig själva. Förlustkomprimering minskar filstorlekarna genom att permanent radera information om en fil, vilket gör den mindre men också försämrar kvaliteten. Förlustfri komprimering ordnar bara om data på ett sådant sätt att det tar mindre utrymme men kan packas och packas upp (eller packas upp!) utan att filen skadas.

Raster vs. vektor

När du tänker ”bildformat” tänker du förmodligen på ett raster. Den. har inget med Bob Marley att göra – det betyder bara att filen i huvudsak är ett rutnät av färgade pixlar som skapar en bild. JPG, PNG, GIF, TIFF och de flesta andra fotofiler är raster. Den enda information de har är vilken färg pixlarna har, så att förstora eller sträcka ut dem kommer i allmänhet bara att resultera i en mer pixlad bild.

Vektorer är dock designade för att skalas för alltid. SWF-, EPS- och PDF-filer lagrar inte bilder som pixlar, utan som matematiska ekvationer som kan renderas som punkter och linjer. Bilden kan bli så stor eller så liten som du behöver utan att ta en kvalitetsträff, men dessa tillägg är inte lika vanliga på webben eftersom vektorer inte är lika lätta kompatibla som rasterbilder.

Joint Photographic Experts Group (JPEG) – Lossy Raster

JPEG-filen är uppkallad efter gruppen som skapade den och dominerar världen av webbbilder på grund av dess nästan universella kompatibilitet och ringa storlek. Ditt öga kunde förmodligen inte skilja en lätt komprimerad JPEG från en bild med högre kvalitet utan några sekunders granskning, och det laddas snabbt, så det är tillräckligt bra för det mesta av webben.

JPEG-2000 är den uppdaterade versionen som har vissa förbättringar jämfört med originalet, men den har aldrig riktigt tagit fart, så det är osannolikt att du kommer att se detta format på många ställen.

Bra för: lägga ut bilder på webben, spara och skicka små bildstorlekar, allmänt bruk, skriva ut bilder.

Portable Network Graphics (PNG) – Förlustfritt raster

Det här formatet har blivit det bästa för webbgrafik av hög kvalitet, särskilt om du behöver en transparent bakgrund. PNG designades ursprungligen som ett GIF-alternativ, men det stöder mycket fler färger och är mer flexibelt när det gäller transparensinställningar. Filstorleken är i allmänhet större än antingen GIF eller JPEG, men PNG bevarar kvaliteten bättre och är mer flexibel,

Du kan också köra över PNG-8 och PNG-24 i vissa program. Dessa kommer fortfarande att exporteras som vanliga PNG-filer, men PNG-8 stöder bara 256 färger och tillåter inte partiell genomskinlighet, vilket ger dig en mindre filstorlek än den mer fullfjädrade PNG-24.

Bra för: webbgrafik, högkvalitativa foton där storleken inte är ett problem, transparens.

Graphical Interchange Format (GIF) – Förlustfritt raster

Föregångaren till PNG, GIF-formatet är nu mest känt för att möjliggöra de korta videoslingorna som du inte kan sluta titta på på sociala medier. Debatten om huruvida det ska uttalas som ”gom” eller ”jom” är ganska upphettad, men om du vill göra båda sidor arga, försök att uttala det som ”jeff”.

GIF:er stöder bara 256 färger, vilket gör dem till ett dåligt val för högkvalitativa foton, men deras komprimering är utmärkt, så det kan minska enkla bilder utan en stor kvalitetsträff. Pixlar kan också göras genomskinliga, men måste vara antingen på eller av, inte mittemellan.

Bra för: enkel grafik, animationer, ikoner.

Tagged Image File Format (TIFF) – Lossless Raster

Du kanske inte har stött på en TIFF personligen, men om du gillar att fotografera eller arbetar mycket med tryckta medier kanske du känner igen dem som det stora men högkvalitativa formatet som ofta föredras av förlag. Dessutom är det ingen som bråkar om uttalet.

Bra för: skriva ut högkvalitativa foton, skanna högkvalitativa bilder, allt där storleken inte är ett problem.

Skalbar vektorgrafik (SVG) – vektor

Om du någonsin har försökt spara en bild från Internet och istället fått alternativet ”spara som en webbsida” kan du ha sett en SVG. Det här är möjligen den vektorgrafik som har störst stöd som finns, och deras förmåga att upprätthålla god kvalitet och skalbarhet vid låga filstorlekar gör dem populära för logotyper, webbplatsgrafik och någon annanstans där en vektor skulle vara praktisk.

Bra för: affärsgrafik, skalbar grafik, logotyper.

Nya format

Du kanske inte har sett dessa format i naturen ännu, men de erbjuder vissa fördelar jämfört med dagens standarder.

Högeffektivt bildformat

HEIF är i huvudsak JPEG men med högre kvalitet och mindre filstorlekar. Detta är nu standardbildformatet på iOS 11 och senare.

WebP

WebP är Googles format, och det gör i stort sett allt: bättre komprimering än JPEG, bättre animationer än GIF och transparens i nivå med PNG. Den stöds av flera webbläsare och används för närvarande av YouTube, Facebook och några andra webbplatser om du besöker dem med en webbläsare som stöds.

Varför så många format?

Det är osannolikt att det någonsin kommer att finnas ett format som styr dem alla, eftersom olika fält har olika bildbehov. Allmänna webbläsare behöver egentligen inte tänka längre än JPEG och PNG (och kanske WebP och HEIC i framtiden), men för affärs- och publiceringsapplikationer gör det att ha alternativ som TIFF och SVG livet enklare.

Och, om du inte redan har gjort det, bör du fundera på att välja sida i GIF-debatten innan formatet försvinner. Bli en del av historien.

Bildkrediter: Jämförelse mellan JPEG, JPEG 2000, JPEG XR och HEIF, Google Developers, W3C.org, Det är lätt Neon Animerad Gif, JPEG JFIF och 2000 jämförelse, Exempel på JPEG-komprimering