OER GIF

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 stä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 grafik på portfolios för att snabbt visa upp en del av ett arbete.

Filformatet GIF står egentligen för Graphics Interchange Format och togs fram 1987 som ett sätt att elektroniskt spara och överföra färgbilder i en relativt liten filstorlek och snabb hastighet (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 av data (CompuServe Incorporated, 1990). 1889 utvecklades också filformatet för att stödja animation och transparens (Frazier, 1997). Animation i form av att spela upp separata bildrutor efter varandra i sekvens och transparens som ett “genomskinligt” färgtillägg i dess färgrymd. I andra ord kunde GIF:s vara rörliga och/eller med genomskinliga bakgrunder, vilket blev en av de främsta igenkänningsfaktorerna för GIF.

 

GIF gentemot video

Jag kan redan nu från början säga att användandet av ett videoformat istället för en animerad GIF är statistiskt sett bättre när det gäller bildkvalite i relation till filstorlek. Ett videoformat är mycket bättre på att komprimera då det tar i beräkning skillnader mellan bildrutor och enbart kalkylerar skillnaden från en bildruta till en annan istället för hela bilden varje gång. Ett videoformat kan också inkludera ljud och mycket mer färger än en GIF (Doug, 2017). Detta betyder dock inte 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 ersättare till GIF:en, kan ha problem att spelas på äldre system och fungerar inte alltid önskat på alla webbläsare utan extra html kod. Videoformat har också tendensen att visas med användargränssnitt för paus och spolning om de spelas upp i en webbläsare. 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 av RGB:n (Red, Green Blue) använda sig av 256 färgkombinationer var 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 med detta är dock att filformatet blir mindre och att 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å motivet. 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 animering.

 

Gitter

Ett sätt runt GIF:s begränsade färgpalett kan delvist lösas med en teknik kallat för gitter för att motverka Bandning. Bandning är ett fenomen i färg som förekommer när det inte finns nog med data för att skapa en viss färg (Protopopov, 2017). och kan ses nedanför på bilden i mitten. Om en bild försöks sparas men vars färgpalett inte räcker till för att visa en viss färg så kan Gitter användas för att generera ett form av brus som ersätter och efterliknar färgen. Bruset fungerar så att det använder färger som redan är inkluderade 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 inkluderad 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 av färg.

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, kan regleras för hur starkt det ska vara men har en tendens att skapa bandning.

Mönster skapar ett brus i stilen med ett halvton-mönster och fungerar ev 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 efterlikna bildens originala motiv så likt som möjligt. 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 istället kollar på stora områden av färg i användning och genererar en färgpalett utifrån det. 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 under tiden då 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 dock 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 från det originala motivet (helpx.adobe.com, 2017, 2). Adaptiv ger ett resultat som är mer kontrastfylld och varierad i jämförelse till 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 algoripten ä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 originala utseende.

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 istället främst bäst på bilder med stor färgvariation och kontrast eller på grafiska element då beva rande 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 på att du har fått 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”. Denna processen kommer jag dock inte gå igenom då det faller utanför ämnet. Därefter exporterade jag ut den färdiga animationen i en bildsekvens, öppnade den med Photoshop och skapade en gif. Det är nu denna preocessen 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 användas i Photoshop men det utgår alltid från samma regler.

2.
När du valt material behöver du ta in det i önskat videoredigeringsprogram (t.ex. Premiere). Här är det viktigt att har kolla på ditt materials FPS 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 minde mjuka. Jag rekommenderar att sänka FPS:en om ditt material har lite rörelse, t.ex. moln som rör sig långsamt filmat med en en statisk kamera. Om ditt material istället har mycket fartfylld rörelser så rekommenderar jag inte att sänka FPS:en. Det kan i så fall bli hackigt och otrevligt att kolla på. Standard FPS:en för det mesta rörligt material ligger runt 24, och den mista FPS:en som behövs för att upplevas som trovärdig rörelse ligger runt 16 (Taylor, 2017). Rör dig helst mellan dessa tal.

3.
I ditt redigeringsprogram bestämmer du också längden och hur innehållet i din GIF kommer bete 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 början och slutet av ditt material helst klippas för att ta lite tid. 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 längden på ditt material sammanlagt inte består av mer än 500 bildrutor (sammanlagd FPS av allt material), då Photoshop senare begränsar antalet bildrutor som kan sparas ut till en animerad GIF. T.ex. en 20,8 sekunders video i 24 FPS motsvarar sammanlagt 499,2 fps, och en 31,2 sekunders video i 16 fps motsvarar sammanagt 499.2 fps.

4.
Den sista viktiga delen du bör göra inom ditt redigeringsprogram är att justera upplösningen, då stor upplösning faller inte in inom GIF:ens specialitet. För stor upplösning kan orsaka långa laddningstider och självklart ökad filstorlek. Min GIF som kan ses ovan är t.ex. 300×300 pixlar. Din GIF bör vara optimerad för dess användningsområde, oftast webb, så en liten upplösning där man ändå tydligt fortfarande kan se innehållet är bäst. Jobba förslagsvist 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 skall inkluderas och för att PNG formatet inkluderar transparens (om du har använt dig av det) och ger en perfekt representation av original materialet medans det effektivt komprimerar. Du behöver inte heller oroa dig över vilket av de mängder videoformat som fungerar bäst, stöds av Photoshop och andra kvalitetsinställningar som kan behövas 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 att bilderna skall tolkas som en bildsekvens och vilken framerate du har 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å en 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 och bandning som gitter motverkar kan i vissa fall motverkas bättre genom att öka mängden färger. Detta beror på vad för bild du arbetar med, så testa 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ärger bör du nu också öka hand i hand med tillämpningen av gitter. Sträva mot ett resultat likt kvaliteten av ditt originalmaterial fast genom att använda så få färger som möjligt. Du kan öka och sänka mängden färger gradvist genom att markera färgernas antal och använda piltangenterna. Tänk också på att GIF:en kommer vara animerad, så vissa delar av GIF:en kan se fula ut statiska, men när den spelas kan de gå oupptäckta. Testa att förhandsvisa animationen och jämföra med bilens originalutseende i fliken längst upp till vänster i rutan.

Ett tips för när man sänker mängden färger kan vara 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 öka för att ta fram färgen igen, markera färgen i färgkartan och låsa 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 ok ut.

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

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

Glöm inte heller att ställa in hur din GIF ska loopa. Detta är en inställning som jag själv ofta glömmer, så gör inte samma misstag som mig nu precis innan export.

10.
Klicka spara och 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].