Hogyan animált GIF ténylegesen működik - A Canvas keret az LZW tömörítés

Miért GIFs még mindig létezik

A Graphics Interchange Format által létrehozott CompuServe 1987 [CompuServe, 1987]. Támogatja az animációt, az átláthatóságot és a veszteség nélküli tömörítést. Képenként 256 színre korlátozódik. Nincs rajta hang. Nagy fájlokat gyárt. Minden technikai intézkedéssel évtizedekkel ezelőtt kellett volna helyettesíteni.

És mégis: Discord, Slack, iMessage, Twitter, Reddit, és e-mail minden támogatást GIFs natively. A GIPHY több mint 10 milliárd GIF-et szolgál naponta [GIPHY, 2020]. A formátum azért marad fenn, mert mindenhol működik, nem igényel codec-et, és automatikusan játszik. Nincs más formátum az univerzális támogatás és a nulla súrlódási lejátszás kombinációjával.

Megérteni, hogy a GIF-ek hogyan működnek, túl a trivián - ez megmagyarázza, hogy az exportált GIF miért 4MB, miért gradiensek úgy néz ki, banded, és mit tehetünk ellene.

1. lépés: A keret rögzítése

Az animációs GIF képek sorozata (képkockák), amelyek az egyes képek közötti késéssel jelennek meg. Ahhoz, hogy egy vászon animáció, meg kell megragadni a vászon állapotát rendszeres időközönként.

A böngészőben ez a HTML <canvas> elem pixel adatainak olvasását jelenti minden képkockánál - jellemzően canvas.toDataURL() vagy ctx.getImageData() segítségével. Az animáció előre halad a célidőben, a vászon kirajzolva, és a pixelek rögzítve. A kulcs kényszer: meg kell várni a böngésző festékciklus (requestAnimationFrame) olvasása előtt pixel, különben megragad egy állott puffer.

Egy tipikus GIF 15 FPS 3 másodpercen át 45 képkockát igényel. 1080 × 1080 felbontásnál minden képkocka körülbelül 4,7 millió pixel.

Lépés: Színmennyiség

GIF támogatja a maximum 256 szín egy képkocka, tárolt színtábla (paletta). Egy tipikus vászon keret több ezer különböző színek. A GIF kódolás legnehezebb része, hogy látható lebomlás nélkül 256-ra csökken.

A standard megközelítés a * * medial cut algoritmus * * [Heckbert, 1982]: válogatja össze az összes pixelt a legvörösebb csatornával, ossza meg a listát a középértéken, ismételje meg a zöld és kék, rekurzívan osztva színteret 256 régióra. Minden régió átlagából palettás lesz. Ez az, amit gif.js - a könyvtár PinePaper használ - implements in Web Workers for parallelism [Rubaxa, gif.js].

A színes számszerűsítés az, amiért a GIFs-ek jól kezelik a síkszínes grafikát, de a fényképekkel és a gradiensekkel küzdenek. Egy 1080 pixeles gradiens 500 + különböző színt használhat. A 256-ra tömörítés látható kötéseket eredményez - különálló lépéseket, ahol a lejtőnek simának kell lennie.

• • What you can do about it: * * Használjon kevesebb színt a design. Lapos formák, tömör töltetek, és a szöveg jól számszerűsíthető. A sima gradiensek és a fényképészeti textúrák nem. Ha a GIF-ed zörög, a palettát egyszerűsítsd, ne a felbontást.

3. lépés: LZW kompresszió

Minden képkocka pixel indexe (hivatkozások a 256- színes palettához) tömörítve van * * Lemper - Ziv- Welch * * (LZW) tömörítéssel [Welch, 1984]. Az LZW az adatok letapogatása során az ismétlődő byte szekvenciák szótárát építi. Amikor találkozik egy olyan szekvenciával, amit korábban látott, a nyers bájtok helyett a szótár indexet adja ki.

Ez azt jelenti, GIF tömörítés a leghatékonyabb, ha vannak nagy területek ismétlődő szín - szilárd háttér, lapos formák, szöveg egy egységes felületen. Komplex textúrák pixelszintű variációval gyenge tömörítési arányokat eredményeznek, mert az LZW szótár néhány ismétlődő szekvenciát talál.

• • Practical implication: * * Egy 1080 × 1080 GIF fehér szöveg fekete háttérrel összenyomódhat 200KB-ra. Ugyanaz a felbontása egy komplex fénykép GIF lehet 8MB. A fájl mérete jobban függ a vizuális komplexitástól, mint a felbontástól vagy a képkockáktól.

4. lépés: A keret ártalmatlanítása és optimalizálása

GIF képkockák megadhatják a * * ártalmatlanítási módszert * *: a vászon megtisztítása a következő keret rajza előtt, az előző keret látható, vagy a háttér. Smart GIF kódolók * * frame differencing * * - kódolás csak a pixelek, hogy változott a keretek, nem az egész keret.

Ha az animáció egy statikus háttér egy kis mozgó elem, egy optimalizált GIF kódolja a háttér egyszer, és csak frissíti a régióban, ahol az elem mozgott. Ez drámaian csökkenti a fájl méretét. A PinePaper kódolója gif.js-t használ, amely automatikusan alkalmazza ezt az optimalizálást.

A számok

Egy tipikus PinePaper animáció (1080 × 1080, 15 FPS, 3 másodperc, sötét háttér animációs szöveg):

Alkatrész	Méret
Nyerskeret (45 × 4.7M pixel × 3 bájt)	~634 MB
A számszerűsítés után (256 szín, 1 bájt / pixel)	~211 MB
LZW tömörítés után	~2-4 MB
A keret eltérítésével	~1-2 MB

A tömörítési arány a nyers és végleges között körülbelül 300: 1-600: 1. A legtöbb ebből származik színes számszerűsítés (3: 1) és LZW (50: 1 to 100: 1).

Mikor használjuk a GIF vs

Formátum	A legjobb	Korlátozás
GIF	Univerzális támogatás, auto-play, üzenetküldő alkalmazások	256 szín, nagy fájlok, nincs hang
WebM (VP9)	Legjobb minőségű, legkisebb fájlok, web	Korlátozott támogatás Szafariban, iMessage
MP4 (H.264)	Közösségi média, videólejátszó	Kodek szükséges, nincs átláthatóság
FÜGGELÉK	Teljes színanimáció átláthatósággal	Korlátozott támogatás régebbi böngészők

GIF a helyes választás, ha kell egyetemes kompatibilitás és auto-play. A minőség vagy a fájl mérete, WebM vagy MP4 jobb.

Próbáld ki

Nyitott [PinePaper Studio] (/editor), hozzon létre egy design, és export mint GIF. Figyelje meg, hogyan változik a fájl mérete:

• A keret számának növelése (több keret = nagyobb fájl, arányosan)
• Hozzáadás gradiensek (rossz számszerűsítés = nagyobb fájl)
• Szilárd színek használata (jó számszerűsítés = kisebb fájl)
• A vászon méretének növelése (képkockánként több pixel = nagyobb fájl)

Minden változás a kompressziós csővezeték mérése. Nem csak egy GIF-et készítesz, hanem megfigyeled, hogy az információelmélet hogyan alkalmazható a tervezésedre.

Hivatkozások

• CompuServe (1987). Graphics Interchange Format Specification, Version 87a.
• GIPHY (2020). GIPHY Éves jelentés: 10 milliárd napi szerva.
• Heckbert, P. (1982). Color Image Quantitization for Frame Buffer Display. * Computer Graphics (SIGGRAPH) *, 16 (3), 297- 307.
• Rubaxa. gif.js - JavaScript GIF kódoló webmunkások használatával. github.com / jnordberg / gif.js.
• Welch, T.A. (1984). A Technique for High- Performance Data Compression. * IEEE Computer *, 17 (6), 8- 19.

---

PinePaper GIF export ingyenes - nincs vízjel, nincs feljegyzés. Nyissa meg a [pinepaper.studio / szerkesztő] (/editor) és exportálja az első animációt.