How Animated GIFs actually Work - From Canvas Frames to LZW Compression

لماذا GIFs لا تزال موجودة

The Graphics Interchange Format was created by CompuServe in 1987 [CompuServe, 1987]. وهي تدعم التصويب والشفافية والضغوط الخاسرة. وهي مقصورة على 256 لون لكل إطار. ليس له صوت إنها تنتج ملفات كبيرة وبكل تدبير تقني، كان ينبغي استبداله قبل عقود.

ومع ذلك: خلاف، سلاك، إيمسيج، تويتر، ريديت، والبريد الإلكتروني جميع دعم GIFs محلية. وتخدم المبادرة ما يزيد على 10 بلايين من أطر الاستثمار العالمية في اليوم [GIPHY, 2020]. ويستمر الشكل لأنه يعمل في كل مكان، ولا يتطلب رمزا، ويلعب تلقائيا. ولا يوجد في أي شكل آخر هذا الجمع بين الدعم العالمي والعبوة الصفرية.

فهم كيفية عمل النظم العالمية للنظم العالمية للنظم العالمية للنظم العالمية مفيداً إلى ما وراء تريفيا - وهو يفسر سبب كون تصنيفك المصدّر هو 4MB، لماذا تبدو التدرجات متشابكة، وما يمكنك فعله حيال ذلك.

الخطوة 1:

A animated GIF is a sequence of images (frames) displayed in order with a delay between each. لخلق واحد من مُحاكاة التفاح، عليك أن تقبض على ولاية (كانفاس) على فترات منتظمة.

وهذا يعني، في مصفح، قراءة بيانات بيكسيل من عنصر HTML <canvas> في كل فترة إطارية - عادة عن طريق canvas.toDataURL() أو ctx.getImageData(). The animation is advanced to the target time, the canvas is rendered, and the pixels are captured. القيد الرئيسي يجب أن تنتظر دورة الطلاء للمصفوفين قبل قراءة البيكسلزات وإلا ستلتقط حاجزاً.

A typical GIF at 15 FPS for 3 seconds requires 45 frame captures. وفي القرار 1080x1080، يبلغ كل إطار نحو 4.7 مليون بيكسل.

الخطوة 2: تحديد كمية العقيدات

GIF يدعم 256 لون كحد أقصى للإطار، مخزنة في طاولة لون (باليت). إطاراً نموذجياً للتغطية يحتوي على آلاف الألوان المميزة والخفض إلى 256 دون تدهور واضح هو الجزء الأصعب من تشفير PGIF.

والنهج المعياري هو خوارزمية القطع الوسيط** [هيكبرت، 1982]: فرز جميع البكسات بقنابلها الحمراء، وقسم القائمة في الوسط، وكرّر لحيز لون أخضر وأزرق، وتقسيمه إلى 256 منطقة. متوسط كل منطقة يصبح دخولاً شاحباً وهذا هو ما يستخدمه الجاذبية - المكتبة التي تستخدمها شركة PinePaper - وهي تنفذ في عمال الشبكة لتوازيها [روباكسا، غيف.ي].

تحديد كمية الألوان هو السبب في أن GIFs التعامل مع الرسوم البيانية المسطحة جيدا ولكن الكفاح مع الصور والتدرجات. التدرج عبر 1080 بيكسل قد يستخدم 500 زائد ألوان مميزة فالضغط على ٢٥٦ ينتج ضمادات واضحة - خطوات منفصلة ينبغي أن يكون فيها التدرج سلسا.

ماذا يمكنك أن تفعل بشأن ذلك استخدمي ألوان أقل في تصميمك الأشكال المشتعلة، والملء الصلب، والنص كمي جيدا. التدرجات الجلدية والمنسوجات الفوتوغرافية لا. إذا كان لديك GIF الضم، تبسيط الشلاء، وليس القرار.

الخطوة 3: الضغط على الزاويات

كل الأرقام القياسية للإطار (الإشارات إلى لوحة الـ 256- كولون) مُضغطة باستخدام ضغط الـ LZW builds a dictionary of repeated byte sequences as it scans the data. عندما يصادف تسلسل رأيته من قبل، يُخرج الرقم القياسي للقاموس بدلاً من النوافذ الخام.

وهذا يعني أن ضغط بي جي - اكس أكثر فعالية عندما تكون هناك مناطق كبيرة من اللون المتكرر - خلفيات صلبة، أشكال مسطحة، نص على سطح موحد. وتنتج النسيجات المعقدة التي تنطوي على تفاوت على مستوى البكسل نسب ضغط ضعيفة لأن القاموس في المنطقة المحلية يجد بعض التسلسلات المتكررة.

الآثار العملية: A 1080 ×1080 GIF of white text on a black background might compress to 200KB. وقد يكون القرار نفسه GIF للصورة المعقدة هو 8MB. ويتوقف حجم الملف على التعقيد البصري أكثر من الاعتماد على القرار أو الإطار.

الخطوة 4: التخلص من الغش وتحقيق الاستخدام الأمثل

يمكن أن تحدد الأطر التي وضعها الفريق العامل المعني بالاختبارات المتعددة الأطراف طريقة غير واضحة**: ما إذا كان ينبغي إزالة الغطاء النباتي قبل رسم الإطار التالي، أو ترك الإطار السابق مرئيا، أو العودة إلى الوراء خلفية ويستخدم جهاز تشفير الذكية Smart GIF** frame differentencing** - لا يرمز إلا إلى البيكسات التي تغيرت بين الأطر، وليس الإطار بأكمله.

وإذا كان لمحاكاتكم خلفية ثابتة ذات عنصر متحرك صغير، فإن المعلومات الأساسية المثلى من نوع PGIF تحدد مرة واحدة فقط وتستكمل المنطقة التي انتقل فيها العنصر. وهذا يقلل كثيرا من حجم الملفات. PinePaper encoder يستعمل الجاف.js الذي يطبّق هذا الاستخدام الأمثل تلقائيا.

الأرقام

For a typical PinePaper animation (1080 x 1080, 15 FPS, 3 seconds, dark background with animated text):

العنصر	الحجم
الإطارات المتحركة (45 x 4.7M pixels × 3 bytes)	~634 MB
بعد التحديد الكمي (256 لوناً، وثانية واحدة/بيكسل)	~211 MB
بعد ضغط LZW	~2-4 MB
مع اختلاف الإطار	~1-2 MB

وتبلغ نسبة الضغط من الخام إلى النهائي نحو 300:1 إلى 600:1. Most of this comes from color quantization (3:1) and LZW (50:1 to 100:1).

When to Use GIF vs Other Formats

الشكل	الأفضل	التقادم
GIF	الدعم العالمي واللعب الآلي والتراسل	256 لون، ملفات كبيرة، لا صوت
WebM (VP9)	أفضل نوعية، أصغر الملفات، شبكة الإنترنت	دعم محدود في سافاري
MP4 (H.264)	وسائل الإعلام الاجتماعية وأجهزة الفيديو	قواعد السلوك (ج)، لا شفافية
APNG	تقييم كامل لللون مع الشفافية	محدودية الدعم المقدم إلى كبار السن

GIF هو الخيار الصحيح عندما تحتاج إلى التوافق العالمي واللعب الآلي. For quality or file size, WebM or MP4 are better.

حاول

Open PinePaper Studio, create a design, and export as GIF. ملاحظة كيف تغير حجم الملفات كما كنت:

• زيادة عدد الإطارات (أطر أخرى = ملف أكبر، تناسبيا)
• يضاف التدرجات (التقدير الكمي للفقراء = الملف الأكبر)
• Use solid colors (good quantization = smaller file)
• زيادة حجم الأغطية (مزيد من الفطائر لكل إطار = ملف أكبر)

كل تغيير هو قياس خط الضغط. أنتِ لا تقومين بـ (بي بي جي) فحسب أنتِ تراقبين كيف تنطبق نظرية المعلومات على تصميمك.

المراجع

• CompuServe (1987). Graphics Interchange Format Specification, Version 87a.
• GIPHY (2020). GIPHY Annual Report: 10 Billion Daily Serves.
• Heckbert, P. (1982). Color Image Quantization for Frame Buffer Display. Computer Graphics (SIGGRAPH), 16(3), 297-307.
• Rubaxa. gif.js — JavaScript GIF encoder using Web Workers. github.com/jnordberg/gif.js.
• Welch, T.A. (1984). A Technique for High-Performance Data Compression. IEE Computer, 17(6), 8-19.

---

تصدير (بي جي إكس) مجاناً لا علامة ماء ولا إشارة افتحي [الورقة الإستوديو/المحرر] (/editor) وتصدرين أول تقدير لك.