कैसे एनिमेटेड GIFs वास्तव में काम - कैनवास फ्रेम्स से LZW संपीड़न तक

क्यों GIFs अभी भी अस्तित्ववादी

ग्राफिक्स इंटरचेंज प्रारूप 1987 में CompuServe द्वारा बनाया गया था [CompuServe, 1987]। यह एनीमेशन, पारदर्शिता और लॉसलेस संपीड़न का समर्थन करता है। यह प्रति फ्रेम 256 रंगों तक सीमित है। इसमें कोई ऑडियो नहीं है। यह बड़ी फ़ाइलों का उत्पादन करता है। प्रत्येक तकनीकी माप के अनुसार इसे दशकों पहले प्रतिस्थापित किया जाना चाहिए।.

अभी तक: डिस्कार्ड, स्लैक, iMessage, ट्विटर, रेडिट, और सभी समर्थन GIFs को देशी रूप से ईमेल करें। GIPHY प्रतिदिन 10 बिलियन से अधिक GIFs का कार्य करता है। प्रारूप जारी रहता है क्योंकि यह हर जगह काम करता है, उसे कोई कोडेक की आवश्यकता नहीं होती है और स्वचालित रूप से खेलता है। कोई अन्य प्रारूप सार्वभौमिक समर्थन और शून्य घर्षण प्लेबैक के इस संयोजन है।.

यह समझने के लिए कि कैसे जीआईएफ काम ट्रिविया से परे उपयोगी है - यह बताता है कि आपका निर्यात पीपीजी 0 एक्स 4 एमबी क्यों है, ग्रेडिएंट बैंड क्यों दिखते हैं, और आप इसके बारे में क्या कर सकते हैं।.

चरण 1: फ़्रेम कैप्चर

एक एनिमेटेड GIF प्रत्येक के बीच देरी के क्रम में प्रदर्शित छवियों (फ्रेम) का एक अनुक्रम है। एक कैनवास एनीमेशन से एक बनाने के लिए, आपको नियमित अंतराल पर कैनवास स्टेट पर कब्जा करने की आवश्यकता है।.

ब्राउज़र में, इसका मतलब प्रत्येक फ्रेम समय पर HTML <canvas> तत्व से पिक्सेल डेटा पढ़ने का मतलब है - आम तौर पर canvas.toDataURL() या ctx.getImageData() के माध्यम से। एनीमेशन लक्ष्य समय के लिए उन्नत है, कैनवास प्रस्तुत किया जाता है, और पिक्सल पर कब्जा कर लिया जाता है। कुंजी बाधा: आपको पिक्सल पढ़ने से पहले ब्राउज़र के पेंट चक्र (requestAnimationFrame) की प्रतीक्षा करनी चाहिए, अन्यथा आप एक कहानी बफर पर कब्जा कर लेते हैं।.

3 सेकंड के लिए 15 FPS पर एक विशिष्ट GIF को 45 फ्रेम कैप्चर की आवश्यकता होती है। 1080 × 1080 रिज़ॉल्यूशन पर, प्रत्येक फ्रेम लगभग 4.7 मिलियन पिक्सेल है।.

चरण 2: रंग Quantization

GIF प्रति फ्रेम अधिकतम 256 रंगों का समर्थन करता है, जो एक रंग तालिका (पैलेट) में संग्रहीत होता है। एक ठेठ कैनवास फ्रेम अलग रंग के हजारों है। दृश्यमान गिरावट के बिना 256 को कम करना पीपीजी 1 एक्स एन्कोडिंग का सबसे कठिन हिस्सा है।.

मानक दृष्टिकोण **मीडियाई कट एल्गोरिदम * * [हॉकबर्ट, 1982] है: अपने सबसे पुराने चैनल द्वारा सभी पिक्सल को सॉर्ट करें, मध्य में सूची को विभाजित करें, हरे और नीले रंग के लिए दोहराएं, 256 क्षेत्रों में रंग अंतरिक्ष को फिर से विभाजित करें। प्रत्येक क्षेत्र का औसत एक पैलेट प्रविष्टि बन जाता है। यह क्या gif.js है - पुस्तकालय PinePaper समानांतरवाद [Rubaxa, gif.js] के लिए वेब वर्कर्स में लागू होता है।.

कलर क्वांटाइज़ेशन क्यों GIFs फ्लैट रंग ग्राफिक्स को अच्छी तरह से संभालती है लेकिन तस्वीरों और ढाल के साथ संघर्ष करती है। 1080 पिक्सल में एक ढाल 500+ विशिष्ट रंगों का उपयोग कर सकती है। 256 के लिए संपीड़न दृश्य बैंडिंग - असत कदम जहां ढाल चिकनी होना चाहिए पैदा करता है।.

*क्या आप इसके बारे में क्या कर सकते हैं? अपने डिजाइन में कम रंग का प्रयोग करें। फ्लैट आकार, ठोस भरण, और पाठ अच्छी तरह से मात्रा में। चिकना ढाल और फोटोग्राफिक बनावट नहीं है। यदि आपके GIF में बैंडिंग है, तो पैलेट को सरल बनाएं, रिज़ॉल्यूशन नहीं।.

चरण 3: LZW संपीड़न

प्रत्येक फ्रेम के पिक्सेल इंडेक्स (256-रंग पैलेट में परिधीयता) को *Lempel-Ziv-Welch(LZW) कम्प्रेशन [Welch, 1984] का उपयोग करके संकुचित किया जाता है। LZW दोहराया बाइट अनुक्रमों की एक शब्दकोश बनाता है क्योंकि यह डेटा को स्कैन करता है। जब यह पहले देखा गया एक अनुक्रम का सामना करता है, तो यह कच्चे बाइट्स के बजाय शब्दकोश सूचकांक को आउटपुट करता है।.

इसका मतलब यह है कि GIF संपीड़न सबसे प्रभावी है जब बार-बार रंग के बड़े क्षेत्र होते हैं - ठोस पृष्ठभूमि, सपाट आकार, एक समान सतह पर पाठ। पिक्सेल-स्तर भिन्नता के साथ जटिल बनावट खराब संपीड़न अनुपात का उत्पादन करती है क्योंकि LZW शब्दकोश को कुछ बार अनुक्रम मिलते हैं।.

** एक काले पृष्ठभूमि पर सफेद पाठ का 1080 × 1080 पीपीजी0एक्स 200KB को संपीड़ित कर सकता है। एक जटिल तस्वीर के समान रिज़ॉल्यूशन GIF 8MB हो सकता है। फ़ाइल का आकार रिज़ॉल्यूशन या फ्रेम गिनती की तुलना में दृश्य जटिलता पर निर्भर करता है।.

चरण 4: फ़्रेम डिस्पोजल और ऑप्टिमाइज़ेशन

GIF फ्रेम एक ** डिस्पोजल विधि * निर्दिष्ट कर सकते हैं: क्या अगले फ्रेम को खींचने से पहले कैनवास को साफ़ करना है, पिछले फ्रेम को दिखाई देते हैं, या फिर वापस लौटते हैं। पृष्ठभूमि स्मार्ट GIF एन्कोडर्स फ्रेम अलग-अलग का उपयोग करते हैं - केवल उन पिक्सेल को एन्कोड करना जो फ्रेम के बीच बदल जाते हैं, पूरी फ्रेम नहीं।.

यदि आपके एनिमेशन में एक छोटी चलती तत्व के साथ एक स्थैतिक पृष्ठभूमि है, तो एक अनुकूलित GIF एक बार पृष्ठभूमि को एन्कोड करता है और केवल उस क्षेत्र को अपडेट करता है जहां तत्व चल रहा है। यह नाटकीय रूप से फ़ाइल आकार को कम करता है। PinePaper का एनकोडर gif.js का उपयोग करता है जो इस अनुकूलन को स्वचालित रूप से लागू करता है।.

संख्या

एक ठेठ PinePaper एनिमेशन (1080 × 1080, 15 FPS, 3 सेकंड, एनिमेटेड पाठ के साथ अंधेरे पृष्ठभूमि) के लिए:

घटक	आकार
रॉ फ्रेम (45 × 4.7M पिक्सेल × 3 बाइट्स)	~634 MB
Quantization के बाद (256 रंग, 1 बाइट / पिक्सेल)	~211 MB
LZW संपीड़न के बाद	~2-4 MB
फ्रेम भिन्नता के साथ	~1-2 MB

कच्चे से अंतिम तक संपीड़न अनुपात लगभग 300:1 से 600:1 है। इसमें से अधिकांश रंग मात्राकरण (3:1) और LZW (50:1 से 100:1) से आता है।.

GIF बनाम अन्य प्रारूपों का उपयोग कब करें

प्रारूप	सर्वश्रेष्ठ	सीमा
GIF	यूनिवर्सल सपोर्ट, ऑटो-प्ले, मैसेजिंग ऐप	256 रंग, बड़ी फाइलें, कोई ऑडियो नहीं
WebM (VP9)	सर्वश्रेष्ठ गुणवत्ता, छोटी फ़ाइलों, वेब	सफारी, iMessage में सीमित समर्थन
MP4 (H.264)	वीडियो प्लेयर	कोडेक की आवश्यकता है, कोई पारदर्शिता नहीं है
एपीएनजी	पारदर्शिता के साथ पूर्ण रंग एनीमेशन	पुराने ब्राउज़रों में सीमित समर्थन

जब आपको सार्वभौमिक संगतता और ऑटो-प्ले की आवश्यकता होती है तो GIF सही विकल्प है। गुणवत्ता या फ़ाइल आकार के लिए, WebM या MP4 बेहतर हैं।.

इसे आज़माएं

ओपन [PinePaper Studio] (/editor), एक डिजाइन बनाती है, और GIF के रूप में निर्यात करती है। आप के रूप में फ़ाइल आकार में परिवर्तन का निरीक्षण करें:

• फ्रेम गिनती बढ़ाएं (अधिक फ्रेम = बड़ी फ़ाइल, समान रूप से)
• Gradients (poor quantization = बड़ा फ़ाइल) जोड़ें
• ठोस रंगों का उपयोग करें (अच्छा मात्रा = छोटी फ़ाइल)
• कैनवास का आकार बढ़ाएं (अधिकतम पिक्सेल प्रति फ्रेम = बड़ी फ़ाइल)

प्रत्येक परिवर्तन संपीड़न पाइपलाइन का माप है। आप सिर्फ GIF नहीं बना रहे हैं - आप देख रहे हैं कि कैसे सूचना सिद्धांत आपके डिजाइन पर लागू होता है।.

संदर्भ

• CompuServe (1987)। ग्राफिक्स इंटरचेंज प्रारूप विनिर्देश, संस्करण 87a।.
• GIPHY (2020). GIPHY वार्षिक रिपोर्ट: 10 अरब दैनिक सेवा।.
• Heckbert, P. (1982)। फ्रेम बफर डिस्प्ले के लिए रंग छवि क्वांटाइज़ेशन। * कंप्यूटर ग्राफिक्स (SIGGRAPH) *, 16 (3), 297-307।.
• Rubaxa. gif.js - जावास्क्रिप्ट GIF एनकोडर वेब वर्कर्स का उपयोग कर। github.com/jnordberg/gif.js.
• वेल्च, टीए (1984)। उच्च प्रदर्शन डेटा संपीड़न के लिए एक तकनीक। * आईईई कंप्यूटर *, 17 (6), 8-19।.

---

PinePaper का GIF निर्यात मुफ्त है - कोई वॉटरमार्क नहीं, कोई साइनअप नहीं। ओपन [pinepaper.studio/editor] (/editor) और अपना पहला एनीमेशन निर्यात करें।.