Cum animat GIF-uri de fapt de lucru

De ce există GIF

The Graphics Interchange Format was created by CompuServe in 1987 [CompuServe, 1987]. Acesta sprijină animație, transparență, și compresie fără pierderi. Este limitat la 256 de culori per cadru. Nu are sunet. Produce fişiere mari. Prin fiecare măsură tehnică, ar fi trebuit înlocuită cu decenii în urmă.

Și totuși: Discord, Slack, iMessage, Twitter, Reddit, și e-mail toate sprijinul GIFs nativ. GIPHY servește peste 10 miliarde de GIF pe zi [GIPHY, 2020]. Formatul persistă pentru că funcționează peste tot, nu necesită codec, și joacă automat. Niciun alt format nu are această combinație de suport universal și redare zero-fricție.

Înțelegerea modului de lucru GIFs este util dincolo de trivia .

Pasul 1: Capturarea cadrului

Un GIF animat este o secvență de imagini (frame) afișate în ordine cu o întârziere între fiecare. Pentru a crea una dintr-o animaţie de pânză, trebuie să captaţi starea pânzei la intervale regulate.

Într-un browser, acest lucru înseamnă citirea datelor pixel de la un element HTML <canvas> la fiecare interval de timp Animația este avansată la timpul țintă, pânza este redată, iar pixelii sunt capturați. Constrângerea cheie: trebuie să așteptați pentru ciclul de vopsea al browser-ului (requestAnimationFrame) înainte de a citi pixeli, altfel capturați un tampon vechi.

Un GIF tipic la 15 FPS timp de 3 secunde necesită 45 de capturi de cadru. La rezoluţia 1080×1080, fiecare cadru este de aproximativ 4,7 milioane pixeli.

Pasul 2: Cuantificarea culorilor

GIF suportă un maxim de 256 culori per cadru, stocate într-o masă de culoare (paletă). Un cadru tipic de pânză are mii de culori distincte. Reducerea la 256 fără degradare vizibilă este cea mai grea parte a codării GIF.

Abordarea standard este algoritmul median de tăiere [Heckbert, 1982]: sortați toți pixelii pe canalul lor roșu, împărțiți lista la mediana, repetați pentru verde și albastru, împărțind recursiv spațiul de culoare în 256 regiuni. Media fiecărei regiuni devine o intrare în paletă. Aceasta este ceea ce gif.js .

Cuantizarea culorilor este motivul pentru care GIF-urile manipulează bine grafica de culoare plată, dar se luptă cu fotografii și gradienți. Un gradient pe 1080 pixeli ar putea folosi 500+ culori distincte. Compresionarea la 256 produce benzi vizibile .

Ce poţi face în privinţa asta: Utilizați mai puține culori în design. Forme plate, umpluturi solide, și text cuantiza bine. Declivități netede și texturi fotografice nu. Dacă GIF-ul tău are bandă, simplifică paleta, nu rezoluţia.

Pasul 3: Compresie LZW

Indicii pixelilor fiecărui cadru (referințe în paleta de 256 de culori) sunt compresați folosind Lempel-Ziv-Welch (LZW) compresia [Welch, 1984]. LZW construieşte un dicţionar de secvenţe de byte repetate în timp ce scanează datele. Când întâlneşte o secvenţă pe care a mai văzut-o, iese din indexul dicţionarului în loc de octeţi.

Acest lucru înseamnă compresia GIF este cel mai eficient atunci când există zone mari de culoare repetată fundaluri solide, forme plate, text pe o suprafață uniformă. Textura complexa cu variatie de nivel pixel produce raporturi slabe de compresie deoarece dictionarul LZW gaseste cateva secvente repetate.

Implicaţie practică: Un 1080×1080 GIF de text alb pe un fundal negru ar putea comprima la 200KB. Aceeaşi rezoluţie GIF a unei fotografii complexe ar putea fi 8MB. Mărimea fișierului depinde mai mult de complexitatea vizuală decât de rezoluția sau numărul de cadre.

Etapa 4: Eliminarea și optimizarea cadrului

Ramele GIF pot specifica o metodă disposal: dacă pentru a șterge panza înainte de a desena următorul cadru, lăsați rama anterioară vizibilă, sau restabiliți la fundal. Codorii inteligenti GIF folosesc frame differendence .

În cazul în care animația are un fundal static cu un element mic în mișcare, un GIF optimizat codifică fundalul o singură dată și numai actualizează regiunea în care elementul mutat. Acest lucru reduce dramatic dimensiunea fișierului. Codorul PinePaper folosește gif.js care aplică această optimizare automat.

Numerele

Pentru o animație tipică PinePaper (1080×1080, 15 FPS, 3 secunde, fundal întunecat cu text animat):

Componentă	Dimensiune
Rame brute (45 × 4.7M pixeli × 3 octeți)	~634 MB
După cuantizare (256 culori, 1 byte/pixel)	~211 MB
După compresie LZW	~2-4 MB
Cu cadru diferit	~1-2 MB

Raportul de compresie de la brut la final este de aproximativ 300:1 la 600:1. Cele mai multe dintre acestea provin din cuantizarea culorilor (3:1) și LZW (50:1 până la 100:1).

Când să utilizați GIF vs alte formaturi

Format	Cel mai bun pentru	Limitare
GIF	Suport universal, joc automat, aplicații de mesagerie	256 culori, fișiere mari, fără audio
WebM (VP9)	Cea mai bună calitate, fișiere mai mici, web	Suport limitat în Safari, iMessage
MP4 (H.264)	Social media, video playere	Necesită codec, fără transparență
APNG	Animație color completă cu transparență	Suport limitat în browserele mai vechi

GIF este alegerea potrivită atunci când aveți nevoie de compatibilitate universală și auto-play. Pentru calitate sau dimensiunea fișierului, WebM sau MP4 sunt mai bune.

Încearcă

Deschide PinePaper Studio, creează un design și exportă ca GIF. Observați cum se modifică dimensiunea fișierului ca tine:

• Creșterea numărului de cadre (mai multe cadre = fișier mai mare, proporțional)
• Adaugă gradienti (cuantizare slabă = fișier mai mare)
• Utilizați culori solide (cuantizare bună = fișier mai mic)
• Măreşte dimensiunea pânzei (mai mulţi pixeli pe cadru = fişier mai mare)

Fiecare schimbare este o măsurătoare a conductei de compresie. Nu faci doar un GIF .

Referințe

• CompuServe (1987). Graphics Interchange Format Specification, Version 87a.
• GIPHY (2020). Raportul anual GIPHY: 10 Miliarde de Daily Serves.
• Heckbert, P. (1982). Color Image Quantization for Frame Buffer Display. *Computer Graphics (SIGGRAPH) *, 16(3), 297-307.
• Rubaxa. gif.js github.com/jnordberg/gif.js.
• Welch, T.A. (1984). A Technique for High-Performance Data Computer. IEEE Computer, 17(6), 8-19.

---

PinePaper lui GIF export este gratuit Deschide paper.studio/editor și exportă prima animație.