כיצד GIF האנימציה באמת עובד - מ- Canvas מסגרות ל-LZW Compression

מדוע עדיין קיימות

פורמט חילוף החומרים נוצר על ידי Compu Servee בשנת 1987 [Compu Servee, 1987]. היא תומכת באנימציה, שקיפות ודחיסה חסרת אובדן. הוא מוגבל ל-256 צבעים למסגרת. אין לו אודיו. הוא מייצר קבצים גדולים. בכל מדד טכני היה צריך להחליף אותו לפני עשרות שנים.

ובכל זאת: דיסקרד, Slack, iMesssage, Twitter, Reddit ו-Mail all Support GIFs. GIPHY משרתת מעל 10 מיליארד קובצי GIF ליום (GIPHY, 2020). הפורמט נמשך כי הוא עובד בכל מקום, אינו דורש קודאק ומנגן באופן אוטומטי. לאף פורמט אחר אין שילוב זה של תמיכה אוניברסלית ו- Zero-friction.

הבנת האופן שבו GIF עובד הוא שימושי מעבר לטריוויאלי – זה מסביר מדוע ה- GIF המייצא שלך הוא 4MB, מדוע gradients נראים מצופים, ומה אתה יכול לעשות על זה.

שלב 1: לכידת

GIF הוא רצף של תמונות (מסגרות) המוצגות על מנת לעכב בין כל אחד. כדי ליצור אחד מאנימציה בד, אתה צריך לתפוס את מצב הבד במרווחים קבועים.

בדפדפן, זה אומר לקרוא נתונים פיקסל של רכיב HTML <canvas> בכל מסגרת זמן - בדרך כלל באמצעות canvas.toDataURL() או ctx.getImageData(). האנימציה מתקדמת לזמן היעד, את הבד ניתן, ואת הפיקסלים נלכדים. מנעול המפתח: עליך לחכות למחזור הצבעים של הדפדפן (requestAnimationFrame) לפני קריאת פיקסלים, אחרת אתה לוכד חיץ.

GIF טיפוסי ב-15 FPS למשך 3 שניות דורש 45 לכידת מסגרת. ברזולוציה של 1080×1080, כל מסגרת היא כ-4.7 מיליון פיקסלים.

שלב 2: צבע Quantization

GIF תומך מקסימום של 256 צבעים למסגרת, מאוחסנים בטבלה צבעונית (palette). מסגרת בד טיפוסית יש אלפי צבעים נפרדים. הפחתת 256 ללא השפלה גלויה היא החלק הקשה ביותר של GIF encoding.

הגישה הסטנדרטית היא אלגוריתם החיתוך ** [Heckbert, 1982]: הקלד את כל הפיקסלים על ידי הערוץ האדום ביותר שלהם, פיצול הרשימה בתיווך, חזור על שטח ירוק וכחול, המחלק מחדש את חלל הצבעים לתוך 256 אזורים. הממוצע של כל אזור הופך לכניסת צבעים. זה מה ש-gif.js - הספרייה PinePaper משתמשת - הטמיעו ב- Web Workers for Parallelism (Rubaxa, gif.js).

קוונטית צבע היא למה GIFs להתמודד עם גרפיקה בצבע שטוח היטב אבל להיאבק עם תמונות וgradients. gradient על פני 1080 פיקסלים עשוי להשתמש 500 צבעים שונים. 256 גרם ל-256 לייצר להקות גלויות - שלבים דיסקרטיים שבהם צריך להיות חלק.

מה אתה יכול לעשות על זה: השתמש בפחות צבעים בעיצוב שלך. צורות שטוחות, מלאות מוצקות וטקסט לכמת היטב. Smooth gradients וטקסטורות צילום לא. אם ה- GIF שלך מגרד, לפשט את הצבעים, לא את ההחלטה.

שלב 3: LZW Compression

כל פיקסלים של מסגרת (הדברים לתוך 256 צבעים) דחוסים באמצעות Lempel-Ziv-Welch (LZW) דחיסה (Welch, 1984). LZW בונה מילון של רצפים חוזרים ונשנים כפי שהוא לסרוק את הנתונים. כאשר הוא נתקל ברצף שהוא ראה לפני כן, הוא מפיץ את מדד המילון במקום את העשבים הגולמיים.

משמעות הדבר היא דחיסת GIF יעילה ביותר כאשר ישנם אזורים גדולים של צבע חוזר - רקע מוצק, צורות שטוחות, טקסט על משטח אחיד. מרקמים מורכבים עם וריאציות ברמת פיקסל מייצרים יחסי דחיסה גרועים כי מילון LZW מוצא כמה רצפים חוזרים.

השלכות מעשיות: 1080×1080 GIF של טקסט לבן על רקע שחור עשוי לדחוס עד 200KB. אותו פתרון GIF של תמונה מורכבת עשוי להיות 8MB. גודל הקובץ תלוי יותר המורכבות החזותית מאשר ברזולוציה או ספירת המסגרת.

שלב 4: פער ואופטימיזציה

מסגרות GIF יכולות לציין שיטה disposal: בין אם לנקות את הבד לפני לצייר את המסגרת הבאה, לעזוב את המסגרת הקודמת גלויה, או לשחזר את המסגרת הקודמת. רקע. Smart GIF encoders להשתמש מסגרת שונה encing - רק את הפיקסלים ששינו בין מסגרות, לא את המסגרת כולה.

אם לאנימציה שלך יש רקע סטטי עם אלמנט קטן ומרגש, GIF מאמת את הרקע פעם ורק מעדכן את האזור שבו עבר האלמנט. זה מפחית באופן דרמטי את גודל הקובץ. הקודר של PinePaper משתמש ב-gif.js אשר חל על אופטימיזציה זו באופן אוטומטי.

המספרים

עבור אנימציה טיפוסית PinePaper (1080×1080, 15 FPS, 3 שניות, רקע כהה עם טקסט אנימציה):

המונחים	גודל
רול מסגרות (45 × 4.7M פיקסלים × 3 Bytes)	~634 MB
לאחר הקוונטים (256 צבעים, 1 te / pixel)	~211 MB
עקבו אחרי LZW	~2-4 MB
עם מסגרת שונה	~1-2 MB

יחס הדחיסה של הגלם לגמר הוא בערך 300:1 ל-600:1. רוב זה מגיע מקוטב צבעים (3:1) ו- LZW (50:1 עד 100:1).

מתי להשתמש GIF לעומת פורמטים אחרים

פורמט	הטוב ביותר	הגבלת
GIF	Universal Support, Auto-play, Applications	256 צבעים, קבצים גדולים, לא אודיו
WebM (VP9)	האיכות הטובה ביותר, הקבצים הקטנים ביותר, האינטרנט	תמיכה מוגבלת ב- Safari, iMesage
MP4 (H.264)	מדיה חברתית, שחקני וידאו	דורש קודק, אין שקיפות
APNG	אנימציה צבעונית מלאה עם שקיפות	תמיכה מוגבלת בדפדפנים מבוגרים

GIF הוא הבחירה הנכונה כאשר אתה צריך תאימות אוניברסלית משחק אוטומטי. עבור איכות או גודל קובץ, WebM או MP4 טובים יותר.

נסה את זה

פתח PinePaper Studio יוצר עיצוב, וייצוא כ- GIF. ראה כיצד גודל הקובץ משתנה כפי שאתה:

• הגדלת ספירת המסגרת (יותר מסגרות = קובץ גדול יותר, באופן יחסי)
• הוסף gradients (poor קוונטיזציה = קובץ גדול יותר)
• השתמש בצבעים מוצקים (קובץ טוב = קובץ קטן יותר)
• הגדלת גודל הבד (יותר פיקסלים למסגרת = קובץ גדול יותר)

כל שינוי הוא מדידה של צינור הדחיסה. אתה לא רק עושה GIF - אתה צופה איך תיאוריית מידע חלה על העיצוב שלך.

הפניות

• קומו עבד (1987) גרפיקה Interchange Format, גרסה 87a.
• GIPHY (2020) דו"ח שנתי GIPHY: 10 מיליארד מגישים.
• Heckbert, P. (1982) Color Image Quantization for Frame Display. *Computer Graphics (SIGGRAPH) 16(3), 297-307.
• Rubaxa. gif.js - JavaScript GIF קודר באמצעות עובדי אינטרנט. Github.com/jnordberg/gif.js.
• Welch, T.A. (1984) טכניקה לדירוג נתונים גבוה. IEEE Computer, 17(6), 8-19.

---

יצוא GIF של PinePaper הוא חינם - ללא סימן מים, אין סימן מים. פתח pinepaper.סטודיו/editor וייצא את האנימציה הראשונה שלך.