Erik Norman

Vad är GIF

När vi surfar och chattar ser vi animerade GIF:s hela tiden. När man skickar en så kallad “reaction gif” till en kompis för att förstärka ett skämt eller inom posts på forum som t.ex. Reddit. Animerade GIF:s förekommer också på en mängd andra hemsidor i form av exempelvis banners för att förmedla information, eller som grafiska element på portfolios för att snabbt visa upp ett demon av arbeten.

Filformatet GIF står egentligen för Graphics Interchange Format och togs fram 1987 som ett sätt att snabbt spara spara och överföra elektroniska färgbilder i en relativt liten filstorlek (Roelofs, 2009). GIF-formatet är ett av de äldsta bildformatet som fortfarande stöds idag då GIF är lätt att implementera och stödjer effektiv komprimering (CompuServe Incorporated, 1990). 1889 utvecklades också filformatet för att stödja animation och transparens (Frazier, 1997). Bildrutor spelades upp i en sekvens för skapa illusionen av rörelse och transparens lades till i dess färgrymd som ett “genomskinligt” färgtillägg. GIF:s nu vara rörliga och/eller med genomskinliga bakgrunder, vilket blev den främsta igenkänningsfaktorn för GIF:s.

 

GIF gentemot video

Jag kan redan nu från början säga att användandet av videoformat istället för animerade GIF:s är statistiskt sett bättre när det gäller bildkvalitet i relation till filstorlek. Ett videoformat är mycket bättre på att komprimera då det beräknar skillnader mellan bildrutor och enbart kalkylerar det som förändras från en bildruta till en annan. Ett videoformat kan också inkludera ljud och mycket mer färger än en GIF (Doug, 2017). Detta betyder dock att GIF:s inte har sina användningsområden.

Animerade GIF:s har universellt stöd, inga patenter eller licenser och kan spelas och loopas på alla tänkbara plattformar utan problem. Populära videoformat som t.ex. .mp4 och .webm, som idag brukar användas som en ersättning till GIF:en, kan ha problem att spelas på äldre system och fungerar inte alltid önskat på alla webbläsare utan extra html kod. I webbläsare har också videoformat tendensen att visas med användargränssnitt för paus och spolning. Beroende på avsikt med videon kan det bli ett stort störningsmoment och kan också vara problematisk att korrigera för ovana användare (Hoffman, 2015).

För att sammanfatta så är videoformat bättre i kvalite och filstorlek, men GIF:s är fortfarande mer lätthanterliga.

 

Färgbegränsing

Nackdelen med filformatet GIF är att det enbart kan använda sig av 256 färgkombinationer per bildruta (CompuServe Incorporated, 1990). Andra filformat som t.ex. JPG och PNG kan varje färgkanal var av RGB:n (Red, Green Blue) använda sig av 256 färgkombinationer vilket ger upphov till miljontals av färgkombinationer per bild (Bourke, 1993). Resultatet av att GIF:s enbart kan använda sig av 256 färgkombinationer gör att komplexa bilder med mycket färg och detaljer markant förlorar kvalité. Fördelen är dock att filformatet blir mindre och man som skapare av en GIF kan välja vilka och hur många färger (upp till 256) som skall användas. Färgbegränsningen kan då användas som ett verktyg beroende på motiv. Man får anpassa motivet för att använda få färger (t.ex. blått hav och blå himmel) och/eller simpla färgytor och former (t.ex. en vektoriserad logotyp utan övertoningar). Användningen av filformatet GIF kan då vara mycket effektivt för att få ut en bild i liten filstorlek, också med utnyttjandet av animation.

 

Gitter

Ett sätt runt GIF:s begränsade färgpalett kan delvist lösas med en teknik kallat för gitter. Gitter är främst gjort för att motverka Bandning som är ett fenomen i färg som förekommer när det inte finns nog med data för att visa en viss färg (Protopopov, 2017). Detta kan ses nedanför på bilden i mitten. Om en bild försöks sparas med en färgpalett som inte räcker till för att visa en alla färger, kan Gitter användas för att generera ett form av brus som ersätter och efterliknar vissa färger. Bruset fungerar så att det använder de färger som redan finns med i paletten, som om i pixelnivå placeras omlopp i ett mönster, efterliknar önskad färg (helpx.adobe.com, 2017, 1). Gitter ökar dessvärre filstorleken på GIF:s och bör användas varsamt. (Kyrnin, 2017). Ibland kan det vara bättre att öka mängden färger för att kompensera för bandning. Men gitter kan också vara ett krav beroende på motiv och då bör det användas i relation med så få färger som möjligt som fortfarande genererar ett bra resultat.

Nedanför visas ett exempel på en extremt färgvarierad bild, först sparad i PNG med all nödvändig färddata för att visa bilden i dess originalform. Sedan i GIF med en maximerad färgpalett, och sist i GIF med en maximerad färgpalett fast med användande av gitter. På en gång kan gång man se hur GIF begränsar användandet av färger men också hur bra gitter är för att kompensera för förlusten.

PNG, 22.500 färger, 35kb
Original
GIF, 256 färger, 9kb
Utan gitter
GIF, 256 färger, 15kb
Med gitter

För GIF:s kommer gitter med det tre stilar av brus: Diffusion, mönster och brus.

Diffusion skapat ett gradvist och lugnt brus för att blanda färger. Styrkan kan regleras. Har dock en tendens att skapa bandning.

Mönster skapar ett brus i stilen med ett halvton-mönster och fungerar av egen erfarenhet bra på bilder gjorda med vektorer eller platta färger. Mönster kan dock inte regleras.

Brus går något mer i stilen med diffusion, fast mer framhävt. Brus är mer slumpmässigt vilket kan fungera mycket bra på fotograferade bilder och/eller på bilder med mycket detaljer. Nackdelen är dock att brus kan se något fläckigt ut. Brus är dock bra på att motverka bandning, men kan inte regleras.

Diffusion Mönster     Brus      


Färgförminskningsalgoritmer

För att en GIF ska kunna se bra ut i enbart 256 färger så behövs en färgförminskningsalgoritm användas när en färgpalett ska genereras. Algoritmen väljer vilka färger som behövs främjas och användas för att bäst efterlikna bildens originala motiv. Beroende på motiv, vad bilden skall användas till och vad för avsikt du som skapar GIF:en har, kan fyra olika algoritmer användas.

Den första algoritmer, perceptuell, skapar en färgpalett som prioriterar färger som det mänskliga ögat är mer känslig för. Detta resulterar i mer dova färger.

Den andra algoritmer, selektiv, genererar nästintill identiskt resultat som perceptuell. Skillnaden är att selektiv skapar en färgpalett genom att kolla på stora områden av färg i användning. Selektiv föredrar också att bevara webbsäkra färger (helpx.adobe.com, 2017, 2). Webbsäkra färger är egentligen 216 färger som är inkluderade i en färgpalett som bilder var tvungna att förhålla sig till inom internet när datorskärmar enbart kunde visa 256 färger. Detta är nu inte längre fallet då datorskärmar kan visa miljontals färger (websafecolors.info, 2017), men användandet av webbsäkra färger kan idag fortfarande användas för att minska filstorleken av en bild.

Den tredje algoritmen, adaptiv, genererar en palett utifrån färger som mest liknar och som främst förekommer i det originala motivet (helpx.adobe.com, 2017, 2). Adaptiv ger ett resultat som är mer kontrastfylld och nyansvarierad i jämförelse med perpetuell och selektiv.

Den fjärde algoritmen, restriktiv, genererar en palett som enbart inkluderar webbsäkra färger för att garantera att bilden kan visas på alla bildskärmar (helpx.adobe.com, 2v017, 2). Denna algoritmen är i min åsikt helt onödig då användandet av enbart webbsäkra färger inte har något syfte idag. Det får också bilder att sträva för alldeles för långt ifrån dess originalutseende.

Perceptuell / Selektiv Adaptiv                     Restriktiv        

Från att ha testat att applicera dessa algoritmer på en mängd bilder kan jag konstatera att den perceptuella och selektiva algoritmen främst fungerar bäst på realistiska motiv som innehåller lite färgvariation och kontrast. Den adaptiva algoritmen fungerar bäst på bilder med stor färgvariation och kontrast eller på grafiska element då bevarande av originalfärger ofta är nödvändigt. Detta kan dock variera från bild till bild, så att testa sig fram och tillbaka mellan dessa algoritmer är nödvändigt för att nå ett bra resultat.

 

Övningsuppgift

Nu hoppas jag att du har en bra förståelse av vad en GIF är, i vilka sammanhang filformatet bör användas och hur det fungerar. Jag har här skapat en övningsuppgift där jag går igenom hur man skapar en animerad GIF. Jag utgår ifrån att du har Adobe Photoshop och Adobe Premiere eller något annat liknande videoredigeringsprogram.

Jag valde själv att göra en animerad GIF (som kan ses längst upp i dokumentet) genom en liknande process. Jag skapade först motivet i Adobe Illustrator, där jag bröt upp texten i dess beståndsdelar. Sedan använde jag mig av Adobe Aftereffects för att animera om textens delar från “OER” till “GIF”. Därefter exporterade jag ut den färdiga animationen i en bildsekvens, öppnade den med Photoshop och skapade en GIF. Det är nu den sista delen där jag skapade en GIF som jag kommer gå igenom.

1.
Först och främst behöver du något som kan konverteras om till en GIF. Antingen kan du använda en egen animation eller en videosnutt. Beroende på vad du väljer kommer olika inställningar att användas men det utgår alltid från samma regler.

2.
Efter du valt material importerar du det in i önskat videoredigeringsprogram (t.ex. Premiere). Här är det viktigt att veta vad ditt materials FPS är då det kommer påverka din GIF:s filstorlek, känsla och importeringsalternativ senare i Photoshop. FPS står för “frames per second” eller “bilder per sekund” och beskriver hur många bildrutor som spelas upp under en sekund för att skapa illusionen av rörelse (Taylor, 2017). Genom att sänka FPS:en kommer din GIF:s filstorlek minska men rörelser kommer bli mindre mjuka. Jag rekommenderar att sänka FPS:en om ditt material har lite rörelse, t.ex. moln som rör sig långsamt över en himmel. Om ditt material istället har mycket fartfyllda rörelser så rekommenderar jag inte att sänka FPS:en. Det kan möjligtvis bli hackigt och otrevligt att kolla på. Den vanligaste FPS:en för rörligt material ligger runt 24 och för att en rörligt material ska upplevas som trovärdig bör FPS:en ligga över 16 (Taylor, 2017). Rör dig helst mellan dessa tal.

3.
I ditt redigeringsprogram bestämmer du också längden och hur innehållet för din GIF beter sig. Här behöver du klippa och redigera på egen hand tills du blir nöjd. Ha gärna i åtanke att animerade GIF:ar inte är så tilltalande om dom inte loopar (spelar om från början när dom tar slut). Du kommer senare i Photoshop kunna välja om din GIF ska loopa oändligt, ett exakt antal, eller inte alls. Det är helt upp till dig, men om avsikten är att din GIF ska loopa så bör ditt material klippas för att börja och avslutas långsamt. Det ska gärna ta lite tid så att din GIF inte upplevs stressig, som t.ex. min GIF något blev. Det är också viktigt att att ditt material inte består av mer än 500 bildrutor innan de först över till Photoshop. Photoshop begränsar nämligen antalet bildrutor som kan sparas ut till en animerad GIF. T.ex. en video i 24 fps kan maximalt bli 20,8 sekunders, och en video i 16 fps kan maximalt bli 31,2 sekunders.

4.
Den sista viktiga delen du bör göra i ditt redigeringsprogram är att justera upplösningen. En stor upplösning faller inte in inom GIF:ens specialitet, då det kan orsaka långa laddningstider och ökad filstorlek. Min GIF som kan ses ovan är t.ex. 300 x 300 pixlar. En GIF bör vara optimerad för dess användningsområde, oftast webb, så en liten upplösning där man ändå tydligt kan se innehållet är bäst. Jobba förslagsvis inom 100 till 500 pixlar.

5.
Från ditt redigeringsprogram behöver du nu exportera ditt material i antingen ett videoformat som inte orsakar kompressionsartefakter, eller i en bildsekvens. Jag rekommenderar en bildsekvens i PNG format då ljud inte behövs inkluderas och för att PNG formatet stödjer transparens. PNG ger också en perfekt representation av original materialet medans det effektivt komprimerar. Du behöver inte heller oroa dig över vilket videoformat som fungerar bäst, stöds av Photoshop och andra kvalitetsinställningar som kan behöva konfigureras.

6.
När du har exporterat ditt material öppnar du upp det i Photoshop. Antingen öppnar du videon du exporterat, eller så väljer du första bilden från din exporterade bildsekvens, bockar i bildsekvens och vilken fps du använt från redigeringsprogrammet.

7.
Väl i Photoshop finns det inte mer att göra än att spara ut ditt material som en animerad GIF. Vart man gör detta kan vara klurigt att hitta, men det ligger under Arkiv → Exportera → Spara för webben. Rutan som nu öppnas är där all optimering och konfiguration för GIF:en görs.

8.
Först och främst behöver du välja filformatet GIF.


För att välja en optimal färgförminskningsalgoritm kan du först välja max antal färger (256) och gradvist sänka dem tills bilden rejält börjar förlora sitt originalutseende. Om ditt material är filmat/fotat, stanna exempelvist på 64 färger. Om det är tecknad eller gjort med platta färger, stanna exempelvist på 16 färger. När du har stannat på ett lågt antal färger kan du gå över till färgförminskningsalgoritmerna och testa dig fram vilken av dem som fungerar bäst för din bild och återger ett färgresultat mest likt ditt originalmaterial.

Därefter kan du gå över till gitter. Välj vilket mönster som passar bäst för din bild. Gitter kan dock inte alltid behövas då det ökar filstorleken. Bandning som gitter motverkar kan i vissa fall också motverkas bättre genom att öka mängden färger. Det beror på vad för bild du arbetar med, så testa dig fram vad som ger bäst resultat. Tänk på att gittret diffusion kan regleras om det bara kan behövas lite gitter.

Mängden färg bör du nu också öka i kombination med tillämpning av gitter. Sträva mot ett resultat likt kvaliteten av ditt originalmaterial fast med användandet av så få färger som möjligt. Du kan öka och sänka mängden färger gradvist genom att klicka på antalet färger och använda piltangenterna. Tänk också på din GIF kommer vara animerad, så vissa delar som kan se fula ut statiska kan se bra ut när det är i rörelse. Testa att förhandsvisa animationen och jämföra med bilens originalutseende i fliken längst upp i rutan till vänster.

Ett tips för när man sänker mängden färger är att använda sig av färgkartan. Färgkartan visar alla färger i bruk. Säg att du sänker mängden färger och helt plötsligt försvinner en färg som är väsentlig för bilden, då kan du öka mängden färger tills önskad färg återkommer, markera önskad färg i färgkartan och lås den. När en färg är låst kommer den alltid att finnas med i färgpaletten även om mängden färg sänks. På detta sätt kan du kontrollera färgerna bättre och nå en GIF som använder sig av ytterligare färre färger, men som ändå ser bra ut.

9.
Sist kan du öka förlust tills det precis börjar påverka din bild negativt. Detta förminskar filstorleken ytterligare. Hur mycket du använder är upp till dig.

Bocka i genomskinlighet om du använder dig av transparens.

Glöm inte att ställa in hur din GIF ska loopa.

Gå igenom alla inställning så att allt ser bra ut. Om du inser att du har glömt något efter att du har sparat ut din GIF kommer inte inställningarna att sparas om du själv inte sparar ut en preset. Gör det för säkerhets skull.

10.
Spara ut din GIF. Klart!

Källor

Bourke, P. (1993). A Beginners Guide to Bitmaps. [online] http://paulbourke.net. Available at: http://paulbourke.net/dataformats/bitmaps/ [Accessed 13 Oct. 2017].

CompuServe Incorporated. (1990). Graphics Interchange Format. [online] GitHub, Inc. Available at: github.com/SixLabors/ImageSharp/blob/master/src/ImageSharp/Formats/Gif/spec-gif89a.txt [Accessed 9 Oct. 2017].

Doug, S. (2017). Which is better: Animated GIFs vs. video files. [online] Developer.att.com. Available at: http://developer.att.com/blog/animated-gifs-vs-video-files [Accessed 23 Oct. 2017].

Frazier, R. (1997). All About GIF89a. [online] Gif animation on the www. Available at: http://www6.uniovi.es/gifanim/gifabout.htm [Accessed 9 Oct. 2017].

helpx.adobe.com. 1. (2017). Dithering in web images. [online] Available at: http://helpx.adobe.com/photoshop-elements/using/dithering-web-images.html [Accessed 16 Oct. 2017]

helpx.adobe.com. 2. (2017). Optimizing images for the GIF or PNG-8 format. [online] Available at: http://helpx.adobe.com/photoshop-elements/using/optimizing-images-gif-or-png.html [Accessed 22 Oct. 2017]

Hoffman, B. (2015). Optimizing Animated GIFs by Converting to HTML5 Video. [online] rigor.com. Available at: http://rigor.com/blog/2015/12/optimizing-animated-gifs-with-html5-video [Accessed 23 Oct. 2017].

Kyrnin, J. (2017). Optimizing Dithering GIF Images. [online] thoughtco.com. Available at: http://www.thoughtco.com/dithering-gif-images-4122770 [Accessed 26 Oct. 2017].

Protopopov, D. (2017). What Is Color Banding and How to Fix It. [online] photographylife.com. Available at: http://photographylife.com/what-is-color-banding-and-how-to-fix-it [Accessed 14 Oct. 2017].

Roelofs, G. (2009). History of the Portable Network Graphics (PNG) Format. [online] http://www.gregroelofs.com. Available at: http://www.libpng.org/pub/png/pnghist.html [Accessed 9 Oct. 2017].

Taylor, R. (2017). A Beginners Guide to Frame Rates. [online] http://aframe.com. Available at: http://aframe.com/blog/2013/07/a-beginners-guide-to-frame-rates/ [Accessed 25 Oct. 2017].

websafecolors.info. (2017). WebSafeColors.info. [online] Available at: https://websafecolors.info/learn [Accessed 23 Oct. 2017].