Vilka format är bäst lämpade för vilken användning? Vi ger en kort översikt över när bildformaten JPEG, GIF eller PNG ska användas.
En av huvuddelarna på internetsidor är bilder, enligt mottot ”En bild säger mer än tusen ord”. På grund av den ständigt växande eller tillgängliga bandbredden och de förändrade tekniska förutsättningarna (t.ex. större skärmar, högre bildskärmsupplösning) har användningen av bilder på webben förändrats på ett sådant sätt att de ofta används mycket och i stor skala.
Men även om laddningstiderna inte är i fokus nuförtiden som för några år sedan, är det fortfarande vettigt för att välja rätt bildformat för rätt syfte. Det handlar inte bara om aspekten av filstorlek, utan också om att använda fördelarna och nackdelarna med respektive bildformat.
När det kommer till filformat för bilder på webben har inte mycket förändrats genom åren gjort mycket så att de tre formaten JPG, PNG och GIF fortfarande är relevanta när det kommer till webbdesign. Vart och ett av dessa format har sina styrkor och svagheter, som kommer att diskuteras kort här.
JPG / JPEG – Klassikern för bilder
JPG-formatet är faktiskt känt för nästan alla , som är redan lite involverad i att använda en PC och t.ex. B. tog bilder med sin kamera. ”JPG” eller bättre ”JPEG” står för ”Joint Photographic Experts Group” och beskriver ett så kallat förlustfilformat som kan innehålla upp till 16,7 miljoner färger .En fördel med JPG-formatet är möjligheten till komprimering (från en skala från 0 – 100%), vilket minskar bilder från filstorleken i enlighet med detta. Ju mer en JPG-bild komprimeras, desto mer blir den synlig, men desto mindre blir filstorleken. Tricket är att hitta bästa möjliga mellanväg mellan kvalitet och tryckhållfasthet.
JPG-formatet har dock svagheter när det kommer till att visa enkla färgområden och former – faktiskt skarpa kanter, t.ex. B. en fyrkant suddig. Dessutom kan JPEG-formatet inte hantera transparenta bakgrunder, t.ex. B. är ofta nödvändiga för knappgrafik.
GIF – För former och animationer
Till skillnad från JPG-formatet stöder GIF-formatet (”Graphics Interchange Format”) endast 256 färger (8 bitar) och är därför särskilt lämplig för att visa bilder med få färger (t.ex. logotyper) , banderoller), motiv med enkla eller få färgade ytor eller även för repetitiva mönster. Dessutom kännetecknas formatet av extrem förlustfri komprimering, så att GIF-bilder har en Minsta filstorlek har uppnåtts. På grund av dess egenskaper är GIF-formatet inte lämpligt för foton eller grafik med detaljerade färggradienter.
En ytterligare fördel som talar för användningen av GIF-formatet är möjlighet till animering. Flera bilder kan kombineras i en fil. Den individuella grafiken visas efter varandra med hjälp av en tidskontroll, vilket resulterar i rörelseeffekter (nyckelord: blädderbok).
Också möjligt är användning av transparent, till exempel genom att definiera en specifik färg som transparent. Som ett resultat kan element som ligger under GIF-grafiken som t.ex. webbplatsens bakgrund.
GIF-formatet används ofta för enkla animerade banners, varvid bannerskapandet med HTML5 nu ökar mer och mer. GIF-formatet är också annars hotat av utrotning till viss del, eftersom PNG faktiskt ger ett adekvat alternativ som också har fler fördelar att erbjuda totalt sett.
PNG – Hybriden bland bildformat
PNG står för ”Portable Network Graphics” och utvecklades ursprungligen för att ersätta GIF-formatet. PNG-formatet är i grunden enhybrid av JPG- och GIF-format och kombinerar fördelarna med båda bildformaten. En skillnad görs mellan PNG-8 (8-bitars färgdjup) och PNG-24 (24-bitars färgdjup), med PNG-8, liknande GIF-formatet, som endast tillåter 256 färger, medan PNG-24 stöder över 16 miljoner färger. Dessutom tillåter PNG-formatet användning av transparens eller en alfakanal.
När det gäller filstorlek är PNG-formatet inte riktigt lika starkt som förlustfritt format och även flexibelt som JPG-formatet. Även om PNG:er också är relativt små vad gäller filstorlek, når de inte JPG-formatets möjligheter i detta avseende och det är inte heller möjligt att välja en individuell komprimeringsstyrka. Den övergripande kvaliteten är dock bättre än JPEG-bilder och det är också möjligt att visa skarpa kanter.
PNG-formatet är därför särskilt lämpligt för mindre bilder, grafik eller former som t.ex. B. Knappar och är alltid förstahandsvalet när en genomskinlig bakgrund krävs.
SVG – För skalbar vektorgrafik
Även om de tre grafiska formaten GIF, PNG och JPG främst dominerar webben, bör ett annat intressant format inte döljas.
Detta är SVG-formatet (”Scalable Vector Graphics”), som är baserat på användningen av tvådimensionell vektorgrafik.
Grafiken visas i form av vektorer, vad förlustfri skalning med liten filstorlek, vilket gör det så intressant för ämnet responsiv webbdesign, bland annat saker. Detta innebär att SVG-filer kan visas i vilken storlek som helst utan kvalitetsförlust eller att grafiken blir ”pixelerad”.
I utskriftsområdet används sådana vektorfiler t.ex. De har alltid använts till exempel i logotyper och möjliggör flexibel användning av grafik för olika behov. En annan pluspunkt för SVG-formatet ärmöjligheten att animera med JavaScript. SVG-formatet är dock inte lämpligt för foton eller detaljerade bilder.
