פורמטים של תמונות: GIF

אף על פי שהגרפיקה לא שימושית במיוחד באינטרנט המודרני, GIF (Graphics Interchange Format) מספק מבוא מקיף למושגים הבסיסיים של קידוד תמונות.

אפשר לחשוב על GIF כרכיב wrapper של נתוני תמונה. יש לו אזור תצוגה, ממילא נקרא "מסך לוגי", שאליו מצוירות פריימים נפרדים של נתוני תמונה – קצת כמו שכבות במסמך של Photoshop. כך קובץ ה-GIF תומך באנימציה דמוית-ספרתם: פריים אחד משורטט למסך הלוגי, מחליף אותו בפריים אחר ולבסוף באחרת. כמובן, הבחנה זו אינה חשובה כאשר מדובר בקובץ GIF סטטי, שמורכב ממסגרת יחידה שמשורטטת למסך הלוגי.

קובץ GIF משתמש בשיטה לדחיסת נתונים ללא אובדן – וריאציה של האלגוריתם Lempel–Ziv–Welch, אם תרצו. הפרטים הקטנים על אופן הפעולה של האלגוריתם הזה לא מספיקים. עם זאת, זה עובד קצת כמו JavaScript "Uglling", שבו מחרוזות של תווים שחוזרות על עצמן בקובץ נשמרות כמעין מילון פנימי, כך שאפשר להפנות אליהן במקום לחזור עליהן בכל פעם שהן מופיעות.

תצוגה חזותית של ההפניה לקובץ GIF באמצעות רשת של ארבע על ארבע.

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

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

כל פריים שמשורטט למסך הלוגי של קובץ ה-GIF יכול להכיל עד 256 צבעים. ב-GIF יש תמיכה גם בערך 'index rates', שבו פיקסל שקוף יפנה לאינדקס של 'צבע' שקוף בטבלת הצבעים.

השיטה של צמצום טווח ערכים לקבוצה קטנה יותר של ערכי פלט נקראת quantization, מונח שמופיע לעיתים קרובות כשאתם לומדים על קידודי תמונות. בדרך כלל, התוצאות של קוונטיזציה של לוח צבעים ברורות מאליהן:

דוגמה לקובץ GIF סטטי

כדי להבין טוב יותר את התהליך, נסו לחשוב על משבצות התמונות של רשת הנקודות שהצלחתם ליצור מהתיאור שלי.

שלוש תיבות אופקיות בצבע כחול ואחריהן תיבה אדומה אחת

הפעם, כדאי להוסיף עוד קצת פרטים לתמונה המקורית: כמה פיקסלים נוספים, שאחד מהם הוא בגוון מעט יותר כהה:

תיבות אופקיות בצבע כחול עד אדומות בהגדרה של שניים על ארבע, כשאחת מהן כחולה כהה יותר מהאחרות.

אם חסר דחיסה כלשהי – אפשר לתאר את הרשת כך:

שורה ראשונה, עמודה ראשונה היא #0000FF. שורה ראשונה, עמודה שנייה היא #0000FF. שורה ראשונה, עמודה שלישית היא #0000FF. שורה ראשונה, עמודה ארבע היא #FF0000. שורה שנייה, עמודה ראשונה היא #0000FF. שורה שנייה, עמודה שנייה היא 000085#. שורה שנייה, עמודה שלישית היא #0000FF. שורה שנייה, עמודה ארבע היא #FF0000.

ניתן לתאר זאת כך:

א: #0000FF, B: #FF0000, C: #000085. שורה ראשונה, עמודות אחת עד שלוש הן A. שורה ראשונה, עמודה ארבע היא B. שורה שנייה, העמודה הראשונה היא A. בשורה השנייה, העמודה השנייה היא C. שורה שנייה, עמודה שלישית היא א. שורה שנייה, עמודה ארבע היא B.

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

תיבות אופקיות בצבע כחול עד אדום, עם פיקסל כהה אחד בגודל 2x2.

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

A: #0000FF, B: #FF0000. שורה ראשונה, עמודות אחת עד שלוש הן A. שורה ראשונה, עמודה ארבע היא B. שורה שנייה, עמודות אחת עד שלוש הן A. שורה שנייה, עמודה ארבע היא B.

התוצאה הסופית של הבייטים השמורים האלו היא שאיבדת את השלמות של הפיקסלים.

תיבות אופקיות בצבע כחול עד אדום.

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

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

כאשר מקודדים כקובץ GIF, הדרגה עדינה כמו צלליות הופכת ל מעוותת, כאשר פיקסלים בודדים יבלטו מהסביבה:

פרחים ורודים על רקע ירוק.

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

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