Jinsi GIF zilizoongezwa Kweli Zinafanya Kazi - Kutoka kwa Mipangilio ya Canvas hadi Compression ya LZW

Kwa nini GIF bado zipo

Graphics Interchange Format iliundwa na CompuServe katika 1987 [CompuServe, 1987]. Inasaidia uhuishaji, uwazi, na compression ya kupoteza. Ni mdogo kwa 256 rangi kwa kila sura. Hakuna sauti. Inazalisha faili kubwa. Kwa kila hatua ya kiufundi, inapaswa kubadilishwa miongo kadhaa iliyopita.

Na bado: Discord, Slack, iMessage, Twitter, Reddit, na barua pepe zote msaada GIF asili. GIPHY hutoa zawadi zaidi ya bilioni 10 kwa siku (GIPHY, 2020). Muundo unaendelea kwa sababu inafanya kazi kila mahali, hauhitaji msimbo, na inacheza moja kwa moja. Hakuna muundo mwingine una mchanganyiko huu wa msaada wa ulimwengu wote na uchezaji wa zero-friction.

Kuelewa jinsi GIF hufanya kazi zaidi ya trivia - inaelezea kwa nini GIF yako nje ni 4MB, kwa nini gradients kuangalia banded, na nini unaweza kufanya kuhusu hilo.

Hatua ya 1: Ufungaji wa Frame

GIF animated ni mlolongo wa picha (frames) kuonyeshwa ili kwa kuchelewa kati ya kila mmoja. Ili kuunda moja kutoka kwa uhuishaji wa canvas, unahitaji kukamata hali ya canvas kwa vipindi vya kawaida.

Katika kivinjari, hii inamaanisha kusoma data ya pixel kutoka kwa kipengele cha HTML <canvas> kwa kila wakati wa sura - kwa kawaida kupitia canvas.toDataURL() au ctx.getImageData(). Uhuishaji ni juu ya wakati lengo, turuba ni alifanya, na saizi ni kukamatwa. Kizuizi muhimu: unapaswa kusubiri mzunguko wa rangi ya kivinjari (requestAnimationFrame) kabla ya kusoma saizi, vinginevyo unakamata buffer ya stale.

Kawaida GIF katika 15 FPS kwa sekunde 3 inahitaji kukamata sura ya 45. Katika azimio la 1080×1080, kila sura ni saizi milioni 4.7.

Hatua ya 2: Kiwango cha rangi

GIF inasaidia kiwango cha juu cha rangi 256 kwa sura, kuhifadhiwa katika meza ya rangi (palette). Rangi ya kawaida ya kuku ina maelfu ya rangi tofauti. Kupunguza hadi 256 bila uharibifu unaoonekana ni sehemu ngumu zaidi ya encoding ya GIF.

Njia ya kawaida ni median cut algorithm [Heckbert, 1982]: teua saizi zote kwa kituo chao cha reddest, gawanya orodha kwenye median, rudia nafasi ya rangi ya kijani na bluu, kugawanya tena katika mikoa ya 256. Wastani wa kila eneo la eneo inakuwa kuingia kwa palette. Hii ndio maana ya JF – matumizi ya PinePaper - tumia katika Wafanyakazi wa Mtandao kwa usawa [Rubaxa, gif.js].

Rangi quantization ni kwa nini GIFs kushughulikia graphics gorofa-rangi vizuri lakini mapambano na picha na gradients. Gradient katika saizi za 1080 inaweza kutumia rangi tofauti za 500 +. Kwa mujibu wa takwimu za 256, kuna uwezekano wa hatua za kubagua ambapo gradient inapaswa kuwa laini.

Nini unaweza kufanya kuhusu hilo: Tumia rangi chache katika kubuni yako. Vipande vya gorofa, fills imara, na maandishi quantize vizuri. Rangi ya rangi na maandishi ya picha sio. Kama GIF yako ina banding, kurahisisha palette, si azimio.

Hatua ya 3: Compression ya LZW

Picha zote na Wizara ya Mambo ya Ndani ya Nchi. .................................................................... LZW hujenga kamusi ya mfululizo wa mara kwa mara kama inavyosindika data. Wakati inakabiliwa na mlolongo ambao umeona hapo awali, inazalisha index ya kamusi badala ya bytes ghafi.

Hii inamaanisha compression ya GIF ni bora zaidi wakati kuna maeneo makubwa ya rangi ya mara kwa mara - background imara, maumbo gorofa, maandiko juu ya uso sare. Maandishi magumu na tofauti ya kiwango cha pixel hutoa uwiano duni wa compression kwa sababu kamusi ya LZW inapata mlolongo wa mara kwa mara.

Mahitaji ya kisheria A 1080×1080 GIF ya maandishi nyeupe juu ya background nyeusi inaweza compress kwa 200KB. Uamuzi huo wa GIF wa picha ngumu inaweza kuwa 8MB. Ukubwa wa faili unategemea utata wa kuona kuliko kwenye azimio au hesabu ya sura.

Hatua ya 4: Kutenganisha na Optimization

Vipande vya GIF vinaweza kutaja njia ya yadisposal: ikiwa kufuta turubai kabla ya kuchora sura inayofuata, ondoka sura ya awali inayoonekana, au kurejesha nyuma. Smart GIF encodes kutumia frame tofauti inaunganisha tu saizi zilizobadilika kati ya sura, sio sura nzima.

Ikiwa uhuishaji wako una historia ya tuli na kipengele kidogo cha kusonga, encodes ya GIF iliyoboreshwa mara moja na inasasisha tu eneo ambalo kipengele kilihamia. Hii hupunguza ukubwa wa faili. Encoder ya PinePaper hutumia gif.js ambayo hutumia ufanisi huu moja kwa moja.

Idadi ya

Kwa uhuishaji wa kawaida wa PinePaper (1080 x 1080, 15 FPS, sekunde 3, background ya giza na maandishi ya uhuishaji):

Kuwa makini	Ukubwa wa ukubwa
Vipande vya Raw (45 × 4.7M saizi × 3 bytes)	~634 MB
Baada ya quantization (256 rangi, 1 kwate / pikseli)	~211 MB
Baada ya compression ya LZW	~2-4 MB
Tofauti ya Rangi	~1-2 MB

Uwiano wa compression kutoka ghafi hadi mwisho ni karibu 300: 1 hadi 600: 1. Wengi wa haya hutoka kwa quantization ya rangi (3:1) na LZW (50:1 hadi 100:1).

Bonyeza kupitia hatua nne. Rangi ya bluu ni juu ya ukubwa mmoja kwa mfano, katika hatua mbili za mwisho, mbegu ni mbegu hii sio moja ya kwa mfano, hii ni nini 300: 1.

Jinsi ya kutumia GIF vs Fomu nyingine

Fomu ya Format Format	Bora ya	Upungufu wa
WA	Msaada wa Universal, Autoplay, programu za ujumbe	256 rangi, faili kubwa, hakuna sauti
WA WA WA WA WA WA WA WA WA WA WA WA	Ubora bora, faili ndogo, mtandao	Msaada mdogo wa Safari, iMessage
MP4 (H.264)	Vyombo vya habari vya kijamii, wachezaji wa video	Inahitaji codec, hakuna uwazi
AP YA	Full rangi uhuishaji na uwazi	Msaada mdogo katika browsers za zamani

GIF ni chaguo sahihi wakati unahitaji utangamano wote na auto-play. Kwa ubora au ukubwa wa faili, WebM au MP4 ni bora.

Jaribu kuwa

Fungua [PinePaper Studio] (/editor), kuunda kubuni, na kuuza nje kama GIF. Angalia jinsi ukubwa wa faili unavyobadilika:

• Kuongeza hesabu ya sura (zaidi ya sura = faili kubwa, proportionally)
• Ongeza gradients (poor quantization = faili kubwa)
• Tumia rangi imara (faili nzuri = faili ndogo)
• Kuongeza ukubwa wa canvas (pixel zaidi kwa sura = faili kubwa)

Kila mabadiliko ni kipimo cha bomba la compression. Sio tu kufanya kazi ya GIF - unachunguza jinsi nadharia ya habari inatumika kwa kubuni yako.

Marejeo ya

• Vita vya Kagera (1987). Graphics Interchange Format Specification, Toleo la 87a.
• PICHA ZOTE NA WIZARA YA MAMBO YA NDANI YA NCHI (2020). Ripoti ya kila mwaka ya GIPHY: bilioni 10 huhudumia kila siku.
• Kwa hisani ya RaiaMwema, P. ya mwaka 1982. Ukubwa wa picha kwa Display ya Frame Buffer. Picha za Kompyuta (SIGRAPH) *, 16(3), 297-307.
• Ya Rubaxa. wa wa wa wa wa wa wa JavaScript GIF encoder kwa kutumia Wafanyakazi wa Mtandao. github.com/jnordberg/gif.js.
• Kwa upande wake, Dk. ya mwaka 1984. Mbinu ya compression ya data ya juu. * Kompyuta ya EEE *, 17 (6 (6), 8-19.

---

Usafirishaji wa PinePaper ni bure - hakuna alama ya maji, hakuna ishara. Fungua [pinepaper.studio/editor] (/editor) na uhamishe uhuishaji wako wa kwanza.