Animerede GIF'er: gør dem små, flydende og på brand

En god animeret GIF er lille, fordi den er planlagt efter formatets grænser: en beskeden pixelstørrelse, 10 til 15 billeder i sekundet, en farvepalette bygget ud fra selve animationen og så lidt ændring i billedet som muligt. GIF gemmer højst 256 farver pr. billede og komprimerer langt dårligere end video, så den samme løkke, der er en let MP4, kan blive en tung GIF. Brug den, hvor den er det eneste valg, mest i mails og nogle chat- og dokumentværktøjer, og lav den omhyggeligt.

Hvad en GIF kan og ikke kan

Browsere behandler desuden ekstremt korte billedforsinkelser som langsommere end bedt om, så presser du en GIF mod høje billedhastigheder, får du ofte en større fil, der ikke engang afspilles hurtigere. Hvorfor billedhastighed overhovedet har betydning, kan du læse om i billedhastighed forklaret.

Sådan holder du en animeret GIF lille

Filstørrelsen afgøres mest, før du eksporterer. Her er håndtagene i rækkefølge efter, hvor meget de som regel betyder.

1. 1

   Gør den lige så stor, som den skal vises

   En mailheader, der vises i 600 px bredde, behøver ikke være 1200 px bred som GIF, hvis vægt betyder mere end skarphed på skærme med høj tæthed. Halverer du bredden, bliver pixelantallet cirka en fjerdedel.

2. 2

   Gør løkken kortere

   To eller tre sekunder, der løber rent rundt, slår ti sekunder, der ikke gør. Hvert billede lægger vægt til.

3. 3

   Sænk billedhastigheden

   10 til 15 fps er flydende nok til drivende farver og skrift. Langsom bevægelse behøver færre billeder end hurtig.

4. 4

   Flyt mindre af billedet

   GIF-indkodere kan gemme kun de pixels, der ændrer sig. Stillestående tekst over et langsomt bevægeligt område er langt lettere end et helt billede i bevægelse.

5. 5

   Begræns farverne

   Bruger designet kun 64 farver, er en palette på 64 farver mindre og ser ens ud.

Paletter, dithering og bånddannelse

Når et billede har mere end 256 farver, må indkoderen vælge. Den kan runde hver pixel af til den nærmeste palettefarve, så gradienter trapper i synlige bånd, eller den kan dithere, hvor den spreder pixels i nabofarver for at efterligne mellemtonerne. Dithering ser blødere ud på afstand og kornet på tæt hold, og det gør filerne større, fordi mønsteret ændrer sig fra billede til billede.

• Byg paletten ud fra animationen. En palette genereret ud fra dine egne billeder bruger de 256 pladser på farver, du faktisk bruger, ikke på et generisk sæt.
• Brug ordnet dithering til animation. Et fast mønster som Bayer bliver på plads fra billede til billede, så det flimrer mindre og komprimerer bedre end fejlspredning.
• Vælg dristigere, kortere gradienter. En gradient mellem to nære farver henover et stort område er det værste tilfælde. Mere kontrast over et mindre område giver mindre bånddannelse.
• Tilføj korn med vilje. Lidt tekstur i designet skjuler trinene, men lægger vægt til. Prøv begge dele.

Det samme problem i stillbilleder og hvordan du løser det ved kilden, står i bånddannelse i gradienter.

Eksportindstillinger, der virker

Har du en video og skal bruge en GIF, giver FFmpegs palettemetode i to trin langt bedre farver end ét gennemløb. Den første kommando bygger en palette ud fra dit klip, den anden bruger den. Bagefter kan Gifsicle barbere mere vægt af.

# 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

Hold en GIF på brand

Fordi paletten er så lille, er GIF usædvanlig god til at afsløre, om dine brandfarver er valgt med omhu. Farver, der ligger tæt på hinanden i nuance, smelter sammen, og en baggrund, der bygger på subtile skift, kan falde sammen i flade trin. De brands, der ser bedst ud som GIF'er, læner sig op ad en tydelig grundfarve, en eller to kraftige accenter og skrift, der er stor nok til at overleve en lille palette.

Gradiently eksporterer GIF på Pro ved siden af MP4 og WebM, så du kan designe én gang og give GIF'en til dit mailværktøj og videoen til de sociale medier. Fordi den bevægelige baggrund er en Mark, der tilhører dig, ligner GIF'en i en andens indbakke dit brand og ikke en lagerløkke. Til mails i særdeleshed kan du læse animerede mailheadere om reglerne for reserveløsninger.

Vælger du mellem formater i stedet for at pudse en GIF af, så start med GIF eller MP4 og MP4 eller WebM.