Animerade GIF-filer: små, mjuka och i ditt varumärke

En bra animerad GIF är liten eftersom den är planerad efter formatets gränser: en måttlig pixelstorlek, 10 till 15 bilder per sekund, en färgpalett byggd från själva animationen och så lite som möjligt som ändras i bilden. GIF lagrar högst 256 färger per bildruta och komprimerar mycket sämre än video, så samma loop som är en lätt MP4 kan bli en tung GIF. Använd den där den är enda alternativet, främst i mejl och vissa chatt- och dokumentverktyg, och gör den med omsorg.

Vad en GIF kan och inte kan

Webbläsare behandlar dessutom extremt korta fördröjningar mellan rutor som långsammare än begärt, så att pressa en GIF mot höga bildfrekvenser ger ofta en större fil som inte ens spelas snabbare. Varför bildfrekvens spelar roll från första början förklaras i bildfrekvens förklarad.

Så håller du en animerad GIF liten

Filstorleken avgörs mest innan du exporterar. Här är spakarna i den ordning de brukar spela störst roll.

1. 1

   Gör den i den storlek den visas

   En mejlrubrik som visas 600 px bred behöver inte vara 1200 px bred som GIF om vikten betyder mer än skärpan på täta skärmar. Att halvera bredden ger ungefär en fjärdedel av pixlarna.

2. 2

   Korta ner loopen

   Två eller tre sekunder som loopar rent slår tio sekunder som inte gör det. Varje bildruta ger extra vikt.

3. 3

   Sänk bildfrekvensen

   10 till 15 bilder per sekund är mjukt nog för svävande färg och text. Långsam rörelse behöver färre rutor än snabb rörelse.

4. 4

   Rör mindre av bilden

   GIF-kodare kan lagra bara de pixlar som ändras. Stillastående text över ett långsamt rörligt område är mycket lättare än en hel bildruta i rörelse.

5. 5

   Begränsa färgerna

   Om designen bara använder 64 färger är en palett med 64 färger mindre och ser likadan ut.

Paletter, dithering och bandning

När en bildruta har fler än 256 färger måste kodaren välja. Den kan avrunda varje pixel till närmaste palettfärg, vilket får gradienter att stegas upp i synliga band, eller så kan den ditha, alltså strö ut pixlar i angränsande färger för att fejka mellanlägena. Dithering ser mjukare ut på avstånd och kornigt på nära håll, och den gör filer större eftersom mönstret ändras från ruta till ruta.

• Bygg paletten från animationen. En palett som genereras från dina egna bildrutor lägger sina 256 platser på färger du faktiskt använder, inte på en generisk uppsättning.
• Använd ordnad dithering för animation. Ett fast mönster som Bayer ligger kvar mellan rutorna, så det skimrar mindre och komprimeras bättre än felspridning.
• Föredra djärvare, kortare gradienter. En gradient mellan två närliggande färger över en stor yta är värsta fallet. Mer kontrast över en mindre yta ger mindre bandning.
• Lägg till korn med avsikt. Lite textur i designen döljer stegen, men ger mer vikt. Testa båda.

Samma problem i stillbilder, och hur du löser det vid källan, finns i gradientbandning.

Exportinställningar som fungerar

Om du har en video och behöver en GIF ger FFmpegs palettmetod i två steg mycket bättre färg än ett enda pass. Det första kommandot bygger en palett från ditt klipp, det andra använder den. Därefter kan Gifsicle skala bort mer vikt.

# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif

Håll en GIF i ditt varumärke

Eftersom paletten är så liten är GIF ovanligt bra på att avslöja om dina varumärkesfärger är valda med omsorg. Färger som ligger nära varandra i nyans smälter ihop, och en bakgrund som bygger på subtila skiftningar kan falla samman i platta steg. Varumärken som ser bäst ut som GIF-filer lutar sig mot en tydlig grundfärg, en eller två starka accenter och text som är stor nog att överleva en liten palett.

Gradiently exporterar GIF i Pro vid sidan av MP4 och WebM, så att du kan designa en gång och sedan ge GIF-filen till ditt mejlverktyg och videon till sociala medier. Eftersom den rörliga bakgrunden är en Mark som tillhör dig ser GIF-filen i någons inkorg ut som ditt varumärke i stället för en stockloop. För just mejl, läs animerade mejlrubriker om reservreglerna.

Om du väljer mellan format i stället för att putsa en GIF, börja med GIF mot MP4 och MP4 mot WebM.