Animerte GIF-er: små, jevne og i tråd med merkevaren

En god animert GIF er liten fordi den er planlagt rundt formatets begrensninger: en beskjeden pikselstørrelse, 10 til 15 bilder i sekundet, en fargepalett bygget ut fra selve animasjonen og så lite endring i bildet som mulig. GIF lagrer høyst 256 farger per bilde og komprimerer langt dårligere enn video, så den samme loopen som er en lett MP4, kan bli en tung GIF. Bruk formatet der det er eneste mulighet, først og fremst i e-post og enkelte chat- og dokumentverktøy, og lag det med omhu.

Hva en GIF kan og ikke kan

Nettlesere behandler dessuten ekstremt korte bildeforsinkelser som tregere enn ønsket, så hvis du presser en GIF mot høy bildefrekvens, får du ofte en større fil som ikke engang spilles raskere. Hvorfor bildefrekvens betyr noe i utgangspunktet, finner du i bildefrekvens forklart.

Slik holder du en animert GIF liten

Filstørrelsen avgjøres stort sett før du eksporterer. Dette er spakene, sortert etter hvor mye de vanligvis betyr.

1. 1

   Lag den i visningsstørrelsen

   Et e-posthode som vises 600 px bredt, trenger ikke være 1200 px bredt som GIF hvis vekt betyr mer enn skarphet på tette skjermer. Halverer du bredden, får du omtrent en fjerdedel av pikslene.

2. 2

   Gjør loopen kortere

   To eller tre sekunder som looper rent, slår ti sekunder som ikke gjør det. Hvert bilde legger til vekt.

3. 3

   Senk bildefrekvensen

   10 til 15 fps er jevnt nok for drivende farger og tekst. Langsom bevegelse trenger færre bilder enn rask bevegelse.

4. 4

   La mindre av bildet bevege seg

   GIF-kodere kan lagre bare pikslene som endres. Stillestående tekst over et område som beveger seg sakte, er langt lettere enn et helt bilde i bevegelse.

5. 5

   Begrens fargene

   Hvis designet bare bruker 64 farger, er en palett på 64 farger mindre og ser lik ut.

Paletter, dithering og striper

Når et bilde har mer enn 256 farger, må koderen velge. Den kan runde hver piksel av til nærmeste farge i paletten, slik at gradienter brytes opp i synlige striper, eller den kan bruke dithering og strø ut piksler i nabofarger for å etterligne mellomtonene. Dithering ser jevnere ut på avstand og kornete på nært hold, og det gjør filene større fordi mønsteret endrer seg fra bilde til bilde.

• Bygg paletten ut fra animasjonen. En palett laget av dine egne bilder bruker de 256 plassene på farger du faktisk bruker, ikke på et generisk sett.
• Bruk ordnet dithering til animasjon. Et fast mønster som Bayer ligger i ro mellom bildene, så det flimrer mindre og komprimeres bedre enn feildiffusjon.
• Velg kraftigere, kortere gradienter. En gradient mellom to nære farger over et stort område er det verste tilfellet. Mer kontrast over et mindre område gir færre striper.
• Legg til korn med vilje. Litt tekstur i designet skjuler trinnene, men det gir også mer vekt. Test begge deler.

Det samme problemet i stillbilder, og hvordan du løser det ved kilden, finner du i striper i gradienter.

Eksportinnstillinger som fungerer

Hvis du har en video og trenger en GIF, gir FFmpegs palettmetode i to trinn mye bedre farger enn én enkelt runde. Den første kommandoen bygger en palett av klippet ditt; den andre bruker den. Deretter kan Gifsicle skjære bort enda mer vekt.

# 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 i tråd med merkevaren

Fordi paletten er så liten, er GIF uvanlig flink til å avsløre om merkevarefargene dine er valgt med omhu. Farger med nær fargetone smelter sammen, og en bakgrunn som bygger på subtile skift, kan falle sammen til flate trinn. Merkevarer som ser best ut som GIF, lener seg på en tydelig bunnfarge, én eller to sterke aksenter og tekst som er stor nok til å overleve en liten palett.

Gradiently eksporterer GIF på Pro i tillegg til MP4 og WebM, så du kan designe én gang og gi GIF-en til e-postverktøyet og videoen til sosiale medier. Fordi den bevegelige bakgrunnen er en Mark som tilhører deg, ser GIF-en i noens innboks ut som merkevaren din og ikke som en arkivloop. Gjelder det e-post spesielt, kan du lese animerte e-posthoder for reglene om reserveløsninger.

Hvis du skal velge mellom formater i stedet for å finpusse en GIF, start med GIF eller MP4 og MP4 eller WebM.