Jak animované GIFky skutečně fungují - od Canvas frames do LZW komprese

Proč GIF stále existují

Grafický formát byl vytvořen CompuServe v roce 1987 [CompuServe, 1987]. Podporuje animaci, transparentnost a bezztrátovou kompresi. Je omezen na 256 barev na rám. Nemá to zvuk. Produkuje velké soubory. Každé technické opatření mělo být nahrazeno před desítkami let.

A přesto: Discord, Slack, iMessage, Twitter, Reddit, a emailem všechny podpory GIF nativně. GIPHY slouží více než 10 miliard GIFů denně [GIPHY, 2020]. Formát přetrvává, protože funguje všude, nevyžaduje kodek a hraje automaticky. Žádný jiný formát nemá tuto kombinaci univerzální podpory a nulového tření přehrávání.

Pochopení toho, jak funguje GIF, je užitečné i mimo kvízu - vysvětluje to, proč je váš exportovaný GIF 4MB, proč gradienty vypadají spoutané a co s tím můžete udělat.

Krok 1: Zachycení rámce

Animovaný GIF je posloupnost obrázků (snímků) zobrazených v pořadí se zpožděním mezi jednotlivými. Chcete-li vytvořit jednu z animace plátna, musíte zachytit stav plátna v pravidelných intervalech.

V prohlížeči to znamená čtení pixelů z prvku HTML <canvas> v každém časovém rámci - obvykle přes canvas.toDataURL() nebo ctx.getImageData(). Animace je pokročilá do cílového času, plátno je vykresleno a pixely jsou zachyceny. Klíčové omezení: musíte počkat na cyklus laku prohlížeče (requestAnimationFrame) před čtením pixelů, jinak zachytíte zatuchlý buffer.

Typický GIF na 15 FPS po dobu 3 sekund vyžaduje 45 snímků. Při rozlišení 1080 × 1080 je každý snímek přibližně 4,7 milionu pixelů.

Krok 2: Vyčíslení barev

GIF podporuje maximálně 256 barev na rám, uloženo v barevné tabulce (paleta). Typický plátěný rám má tisíce různých barev. Nejtěžší součástí kódování GIF je snížení na 256 bez viditelného rozkladu.

Standardní přístup je * * medián řezu algoritmus * * [Heckbert, 1982]: třídit všechny pixely podle jejich nejčervenější kanál, rozdělit seznam na medián, opakujte pro zelené a modré, rekurzivně dělení barevného prostoru do 256 oblastí. Průměr každé oblasti se stává palety. To je to, co gif.js - knihovna PinePaper používá - implementuje do webových pracovníků pro paralelismus [Rubaxa, gif.js].

Kvantifikace barev je důvod, proč GIFs manipulovat flat- color grafika dobře, ale boj s fotografiemi a sklony. Gradient přes 1080 pixelů může použít 500 + odlišné barvy. Komprese na 256 vytváří viditelné páskování - jednotlivé kroky, kde by gradient měl být hladký.

• • Co s tím můžeš udělat: * * Používejte méně barev ve vašem návrhu. Ploché tvary, pevné výplně, a text kvantifikovat dobře. Hladké sklony a fotografické textury ne. Pokud vaše GIF má vázání, zjednodušit paletu, ne rozlišení.

Krok 3: Komprese LZW

Indikátory pixelů každého rámu (odkazy do 256- barevné palety) jsou komprimovány pomocí * * Lempel- Ziv- Welch * * (LZW) komprese [Welch, 1984]. LZW staví slovník opakovaných sekvencí byte při skenování dat. Když se setká se sekvencí, kterou již dříve viděl, vystupuje z indexu slovníku místo ze syrových bytů.

To znamená, že komprese GIF je nejúčinnější, když existují velké plochy opakovaných barev - pevné pozadí, ploché tvary, text na jednotném povrchu. Komplexní textury s variací pixel- level produkují špatné kompresní poměry, protože LZW slovník najde několik opakovaných sekvencí.

• • Praktický dopad: * * A 1080 × 1080 GIF bílého textu na černém pozadí může stlačit do 200KB. Stejné rozlišení GIF komplexní fotografie může být 8MB. Velikost souboru závisí více na vizuální složitosti než na rozlišení nebo počtu snímků.

Krok 4: Odstranění a optimalizace rámu

Rámy GIF mohou specifikovat * * metodu odstraňování * *: zda před nakreslením dalšího rámu vyčistit plátno, nechat předchozí rámeček viditelný, nebo obnovit pozadí. Smart GIF enkodéry používají * * frame differencing * * - kódování pouze pixelů, které se změnily mezi rámy, ne celý rámec.

Pokud má vaše animace statické pozadí s malým pohyblivým prvkem, optimalizovaný GIF kóduje pozadí pouze jednou a pouze aktualizuje region, kde se prvek přesunul. To dramaticky snižuje velikost souboru. Záznamník PinePaper používá gif.js, které tuto optimalizaci aplikují automaticky.

Čísla

Pro typickou animaci PinePaper (1080 × 1080, 15 FPS, 3 sekundy, tmavé pozadí s animovaným textem):

Součást	Velikost
Surové rámy (45 × 4,7M pixelů × 3 bajty)	~634 MB
Po kvantifikaci (256 barev, 1 byte / pixel)	~211 MB
Po kompresi LZW	~2-4 MB
S rozdílným rámcem	~1-2 MB

Kompresní poměr od surového do konečného stavu je přibližně 300: 1 do 600: 1. Většina pochází z kvantifikace barev (3: 1) a LZW (50: 1 až 100: 1).

Kdy použít GIF vs Ostatní formáty

Formát	Nejlepší pro	Omezení
GIF	Univerzální podpora, automatické přehrávání, odesílání zpráv	256 barev, velké soubory, bez zvuku
WebM (VP9)	Nejlepší kvalita, nejmenší soubory, web	Omezená podpora v Safari, iMessage
MP4 (H.264)	Sociální média, videopřehrávače	Vyžaduje kodek, bez transparentnosti
APNG	Kompletní barevná animace s průhledností	Omezená podpora ve starších prohlížečích

GIF je správná volba, když potřebujete univerzální kompatibilitu a autoplay. Pro kvalitu nebo velikost souborů jsou WebM nebo MP4 lepší.

Zkus to

Otevřít [PinePaper Studio] (/editor), vytvořit návrh a export jako GIF. Sledujte, jak se mění velikost souboru:

• Zvýšit počet snímků (více snímků = větší soubor, úměrně)
• Přidat gradienty (špatná kvantifikace = větší soubor)
• Použijte pevné barvy (dobrá kvantifikace = menší soubor)
• Zvyšte velikost plátna (více pixelů na snímek = větší soubor)

Každá změna je měření kompresního potrubí. Neděláte jen GIF - sledujete, jak se teorie informací vztahuje na váš design.

Odkazy

• CompuServe (1987). Grafika Interchange Format Specifikace, Verze 87a.
• GIPHY (2020). Výroční zpráva GIPHY: 10 miliard denních služeb.
• Heckbert, P. (1982). Barevná kvantifikace obrazu pro zobrazení tlumiče rámu. * Počítačová grafika (SIGGRASH) *, 16 (3), 297-307.
• Rubaxa. gif.js - JavaScript GIF enkodér pomocí Web Workers. github.com / jnordberg / gif.js.
• Welch, T.A. (1984). Technika pro vysokovýkonnostní datový komprese. * IEEE Computer *, 17 (6), 8-19.

---

Vývoz PinePaper je zdarma - bez vodoznaku, bez signalizace. Otevřít [pinepaper.studio / editor] (/editor) a exportovat svou první animaci.