Kung Paano Talagang Gumagana ang mga Animadong GIF — Mula sa mga Frame ng Canvas Tungo sa LZW Compression

Kung Bakit Umiiral Pa Rin ang mga GIF

Ang Graphics Interchange Format ay nilikha ng Compu Assert noong 1987 [Compu Provity, 1987]. Sinusuportahan nito ang animation, transparency, at ang di - nauubos na compression. Ito ay limitado sa 256 na kulay sa bawat balangkas. Wala itong audio. Gumagawa ito ng malalaking talaksan. Sa bawat teknikal na hakbang, dapat sana'y ilang dekada na itong pinalitan.

Gayunman: Ang Discord, Slack, iMessage, Twitter, Reddit, at email ay pawang sumusuporta sa GIF nang katutubo. Ang GIPHY ay nagsisilbi ng mahigit 10 bilyong GIF bawat araw [GIPHY, 2020]. Ang format ay nagpapatuloy dahil gumagana ito kahit saan, hindi nangangailangan ng codec, at awtomatikong naglalaro. Walang ibang format ang may ganitong kombinasyon ng unibersal na suporta at sero-friction playback.

Ang pag - unawa kung paano gumagana ang GIFs ay kapaki - pakinabang nang higit pa sa trivia — ipinaliliwanag nito kung bakit ang iyong iniluluwas na GIF ay 4MB, kung bakit ang mga ziggurat ay may guhit, at kung ano ang magagawa mo tungkol dito.

Hakbang 1: Frame Capture

Ang isang masiglang GIF ay isang pagkakasunud-sunod ng mga imahe (frames) na itinatanghal ayon sa isang pagkaantala sa pagitan ng bawat isa. Upang makabuo ng isa nito mula sa isang cavas animation, kailangan mong sakupin ang estadong canvas nang regular.

Sa isang browser, nangangahulugan ito ng pagbabasa ng data ng pixel mula sa isang elemento ng HTML ZqZ sa bawat oras ng frame — karaniwan nang sa pamamagitan ng canvas.toDataURL() o ctx.getImageData(). Ang animasyon ay pinasulong sa pinupuntiryang panahon, ang kanbas ay isinasalin, at ang mga pixel ay hinuhuli. Ang susing pagbabawal: dapat mong hintayin ang siklo ng pintura ng browser (requestAnimationFrame) bago magbasa ng mga pixel, kung hindi ikaw ay kumukuha ng isang lumang panlaban.

Ang isang tipikal na GIF sa 15 FPS sa loob ng 3 segundo ay nangangailangan ng 45 kuwadrong paghuli. Sa 1080×1080 resolusyon, ang bawat balangkas ay humigit-kumulang 4.7 milyong pixel.

Hakbang 2: Pagiging Makulay

Ang GIF ay sumusuporta sa sukdulang 256 na kulay sa bawat balangkas, na nakaimbak sa isang mesang may kulay (palette). Ang isang karaniwang balangkas na canvas ay may libu - libong iba't ibang kulay. Ang pagpapaliit sa 256 nang hindi nakikita ang pagkasira ang pinakamahirap na bahagi ng GIF anunciation.

Ang pamantayang pamamaraan ay ang median cut algorithm [Heckbert, 1982]: uriin ang lahat ng mga pixel sa pamamagitan ng kanilang pinapulang lagusan, hatiin ang talaan sa median, ulitin para sa berde at asul, muling hatiin ang espasyo ng kulay sa 256 rehiyon. Ang katamtamang pagpasok ng bawat rehiyon ay nagiging isang maliit na bahagi. Ito ang mga gif.j — gamit ng aklatan ng PinePaper — mga kasangkapan sa Web Workers para sa parallelism [Rubaxa, gif.js].

Ang color quanization ang dahilan kung bakit ang GIFs ay mahusay humawak ng flat-color graphics ngunit nakikipagpunyagi sa mga litrato at quarters. Maaaring gumamit ng 500+ iba't ibang kulay ang isang spiral sa 1080 pixel. Ang paggamit ng 256 ay gumagawa ng nakikitang paglalagay ng singsing — gumawa ng mga hakbang kung saan dapat na makinis ang dalisdis.

Kung ano ang magagawa mo tungkol dito:* Gumamit ng mas kaunting kulay sa iyong disenyo. Ang mga hugis ng flat, solidong mga bolyum, at teksto ay mahusay na nasusukat. Ang mga smooth streets at grapic striks ay hindi. Kung ang iyong GIF ay nagkatali, gawing simple ang paleta, hindi ang resolusyon.

Hakbang 3: Kokontrolin ang LZW

Ang mga pixel indice ng bawat balangkas (references to the 256-color paleta) ay siniksik gamit ang Lempel-Ziv-Welch (LZW) compression [Welch, 1984]. Ang LZW ay gumagawa ng isang diksiyonaryo ng paulit-ulit na byte sequences habang sinusuri nito ang data. Kapag nakasagupa nito ang isang pagkakasunud-sunod na nakita nito bago nito, ito ay naglalabas ng indiseng diksiyonaryo sa halip na mga hilaw na byte.

Ang ibig sabihin nito ay GIF compression ay pinakamabisa kapag may malalaking bahagi ng paulit - ulit na kulay — matigas na mga background, patag na mga hugis, mga teksto na pare - pareho ang ibabaw. Ang mga komplikadong straktura na may pixel-level variation ay lumilikha ng hindi magandang mga ratio ng compression dahil ang diksiyonaryong LZW ay nakatagpo ng ilang mga paulit ulit na pagkakasunud-sunod.

Praktikong implikasyon: Ang 1080×1080 GIF ng puting teksto sa isang itim na background ay maaaring umipit sa 200KB. Ang gayunding resolusyon ng GIF ng isang masalimuot na larawan ay maaaring 8MB. Ang sukat ng talaksan ay higit na nakasalalay sa kompleksidad ng paningin kaysa sa resolusyon o pagtatantiya ng bilang.

Hakbang 4: Frame Pagtatapon at Optimisasyon

Ang mga balangkas ng GIF ay maaaring magtakda ng isang disposal na paraan: kung maglilinis ng kanbas bago gumuhit ng susunod na balangkas, iwang nakikita ang naunang balangkas, o ibalik sa likuran. Ang mga Smart GIF regulator ay gumagamit ng *frame variting — ikabit lamang ang mga pixel na nagbago sa pagitan ng mga balangkas, hindi ang buong balangkas.

Kung ang iyong animation ay may static background na may maliit na gumagalaw na elemento, ang isang optimisadong GIF ay minsang nagrere - update lamang sa rehiyon kung saan kumikilos ang elemento. Lubhang binabawasan nito ang laki ng talaksan. Ang gniver ng PinePaper ay gumagamit ng gif.js na awtomatikong nagkakapit ng optimisasyong ito.

Mga Numero

Para sa karaniwang PinePaper animation (1080×1080, 15 FPS, 3 segundo, madilim na background na may masiglang teksto):

Nakikipagtulungan	Laki
Raw frames (45 × 4.7M pixels × 3 byte)	~634 MB
Pagkatapos ng quanisasyon (256 na kulay, 1 byte/pixel)	~211 MB
Pagkatapos ng compression ng LZW	~2-4 MB
Sa pagkakaiba ng balangkas	~1-2 MB

Ang proporsiyon ng compression mula sa hilaw hanggang sa pangwakas ay humigit - kumulang 300:1 hanggang 600:1. Karamihan dito ay nagmula sa color quanization (3:1) at LZW (50:1 hanggang 100:1).

Pumasok sa apat na yugto. Ang bara ay hinihila sa pagitan ng likas na laki sa isa " linear scale, " kaya sa huling dalawang yugto ito ay isang tali — hindi iyan isang nagbibigay ng pagkakamali, iyan ang hitsura ng 300:1.

Kailan Gagamitin ang GIF vs Iba Pang mga Formato

Kamag - anak	Pinakamabuti para sa	Hangganan
GIF	Pansansinukob na suporta, auto-play, mga app	256 na kulay, malalaking file, walang audio
WebM (VP9)	Pinakamahusay na kalidad, pinakamaliit na talaksan, web	Limitadong suporta sa Safari, iMesage
MP4 (H.264)	Social media, mga naglalaro ng video	Hinihiling ang codec, walang transparency
APNG	Kumpletong kulay na may transparensiya	Limitadong suporta sa mas matatandang browser

Ang GIF ay ang tamang pagpili kapag kailangan mo ang universal commpatity at auto-play. Para sa kalidad o laki ng talaksan, mas mainam ang WebM o MP4.

Subukin Ito

Ang open PPinePaper Studio, ay lumilikha ng disenyo, at iniluluwas bilang GIF. Pansinin kung paano nagbabago ang laki ng talaksan habang ikaw ay:

• Dumaraming bilang ng frame (mas marami pang balangkas = mas malaking salansan, ayon sa proporsiyon)
• Idagdag ang mga quanization (hindi maganda ang quanization = mas malaking talaksan)
• Gumamit ng solidong mga kulay (mabuting quanisasyon = mas maliit na talaksan)
• Mas malaki ang canvas (mas marami pang pixels bawat balangkas = mas malaking talaksan)

Ang bawat pagbabago ay isang sukat ng tubong compression. Hindi ka lang gumagawa ng GIF — inoobserbahan mo kung paano kumakapit ang teoriya ng impormasyon sa iyong disenyo.

Mga reperensiya

• Compu Provity (1987). Graphics Interchange Format speciation, Version 87a.
• GIPHY (20). GIPHY Annual Report: 10 Bilyon Araw-araw ang Naglilingkod.
• Heckbert, P. (1982). Color Image Quantization for Frame Buffer display. Computer Graphics (SIGRAPH), 16(3), 297-307.
• Rubaxa. mga gif.j — JavaScript GIF regulator gamit ang Web Workers. github.com/jnordberg/gif.js.
• Welch, T.A. (1984). Isang Pamamaraan para sa Mataas-Perpormance Data Compression. IEE Computer, 17(6), 8-19.

---

Ang PinePaper na pagluluwas ng GIF ay libre — walang watermark, walang signup. Buksan ang pinepaper.studio/editor at iluwas ang iyong unang animation.