אנחנו ב-Google מחפשים כל הזמן דרכים להאיץ את טעינת דפי האינטרנט. אחת הדרכים לעשות זאת היא להקטין את התמונות באינטרנט. תמונות מהוות עד 60%-65% מהבייטים ברוב דפי האינטרנט, וגודל הדף הוא גורם משמעותי בזמן הנדרש לעיבוד הכולל. גודל הדף חשוב במיוחד במכשירים ניידים, שבהם תמונות קטנות חוסכות ברוחב הפס ובחיי הסוללה.
WebP הוא פורמט תמונה חדש שפותח על ידי Google ונתמך ב-Chrome, ב-Opera וב-Android. הפורמט הזה עבר אופטימיזציה כדי לאפשר להציג תמונות קטנות ומהירות יותר באינטרנט. הגודל של תמונות WebP קטן ב-30% ביחס לתמונות בפורמט PNG ו-JPEG באיכות חזותית דומה. בנוסף, לפורמט התמונה WebP יש מאפיינים זהים לפורמטים אחרים. הוא תומך באפשרויות הבאות:
דחיסת נתונים עם אובדן נתונים: דחיסת הנתונים עם אובדן נתונים מבוססת על קידוד של פריימים מרכזיים ב-VP8. VP8 הוא פורמט דחיסת וידאו שנוצר על ידי On2 Technologies כממשיך של הפורמטים VP6 ו-VP7.
דחיסת lossless: פורמט הדחיסה ללא אובדן נתונים פותח על ידי צוות WebP.
שקיפות: ערוץ אלפא של 8 ביט שימושי לתמונות גרפיות. אפשר להשתמש בערוץ האלפא יחד עם RGB עם אובדן נתונים, תכונה שלא זמינה כרגע בשום פורמט אחר.
אנימציה: יש תמיכה בתמונות מונפשות בצבעים אמיתיים.
מטא-נתונים: יכול להיות שהם מכילים מטא-נתונים של EXIF ו-XMP (למשל, מטא-נתונים שמשמשים מצלמות).
פרופיל צבע: יכול להיות שיש לו פרופיל ICC מוטמע.
בגלל הדחיסה המשופרת של התמונות והתמיכה בכל התכונות האלה, WebP יכול לשמש כתחליף מצוין לרוב הפורמטים של התמונות: PNG, JPEG או GIF. יתרה מכך, ידעתם שפורמט WebP מאפשר הזדמנויות חדשות לאופטימיזציה של תמונות, כמו תמיכה בתמונות lossy עם שקיפות? כן! WebP הוא פורמט התמונות הכי שימושי.
אז איך זה קורה? עכשיו נתכופף ונסתכל מתחת למכסה המנוע.
WebP עם אובדן נתונים
בדחיסה עם אובדן של WebP נעשה שימוש באותה מתודולוגיה כמו ב-VP8 לחיזוי פריימים (וידאו). פורמט VP8 מבוסס על חיזוי בלוקים, וכמו כל קודק שמבוסס על בלוקים, הוא מחלק את המסגרת לקטעים קטנים יותר שנקראים מאקרו-בלוקים.
בכל מקרופלקס, המקודד יכול לחזות מידע משולש על תנועה ועל צבעים על סמך בלוקים שעברו עיבוד בעבר. מסגרת התמונה היא 'מפתח' במובן הזה שהיא משתמשת רק בפיקסלים שכבר פוענחו בסביבה המרחבית המיידית של כל אחד מהמקרו-בלוקים, ומנסה למלא את החלק הלא ידוע שלהם. התהליך הזה נקרא קידוד חזוי (ראו קידוד בתוך הפריים של וידאו VP8).
לאחר מכן אפשר לנכות מהבלוק את הנתונים העודפים, וכך לקבל דחיסה יעילה יותר. נשאר רק הבדל קטן, שנקרא 'שאריות', שצריך לשדר בצורה דחוסה.
אחרי שהם עוברים טרנספורמציה מתמטית שניתן להפוך אותה (ה-DCT המפורסם, ראשי תיבות של Discrete Cosine Transform), בדרך כלל בערכים הנותרים יש הרבה ערכים אפס, שאפשר לדחוס בצורה הרבה יותר יעילה. לאחר מכן, התוצאה עוברת קידוד קוונטי ואנטרופיה. באופן משעשע, שלב הקידוד הוא השלב היחיד שבו ביטים מושמטים באופן איכותי (חפשו את החלוקה ב-QPj בתרשים שבהמשך). כל שאר השלבים הם הפיכים ללא אובדן נתונים.
בתרשים הבא מוצגים השלבים של דחיסת WebP עם אובדן נתונים. התכונות המבדילות בהשוואה ל-JPEG מסומנות בעיגול אדום.
ב-WebP נעשה שימוש בקידוד בלוקים והקצאה דינמית של ביטים לפלחים שונים של התמונה: פחות ביטים לפלחים עם אנטרופיה נמוכה ויותר ביטים לפלחים עם אנטרופיה גבוהה. ב-WebP נעשה שימוש בקידוד אנטרופיה אריתמטית, שמאפשר דחיסה טובה יותר בהשוואה לקידוד Huffman שנעשה בו שימוש ב-JPEG.
מצבי חיזוי פנימי ב-VP8
שיטות החיזוי הפנימי של VP8 משמשות עם שלושה סוגים של 'מקרו-בלוקים':
- 4x4 luma
- luma בגודל 16x16
- כרומה 8x8
המאקרו-בלוקים האלה משתפים ארבעה מצבי חיזוי פנימי נפוצים:
H_PRED (תחזית אופקית). מילוי כל עמודה בבלוק בעותק של העמודה השמאלית, L.
V_PRED (תחזית אנכית). מילוי כל שורה בבלוק באמצעות עותק של השורה שלמעלה, A.
DC_PRED (חיזוי DC). מילוי הבלוק בערך יחיד באמצעות הממוצע של הפיקסלים בשורה שמעל A ובעמודה שמשמאל ל-L.
TM_PRED (חיזוי TrueMotion). מצב ששמו נגזר משיטת דחיסה שפותחה על ידי On2 Technologies. בנוסף לשורה A ולעמודה L, הפונקציה TM_PRED משתמשת בפיקסל P שמעל ועל יד הבלוק. ההבדלים האופקיים בין הפיקסלים ב-A (החל מ-P) מועברים באמצעות הפיקסלים מ-L כדי להתחיל כל שורה.
בדיאגרמה הבאה מוצגים מצבי החיזוי השונים שבהם נעשה שימוש ב-WebP לחיבור עם אובדן נתונים.
בבלוקי לומינה בגודל 4x4 יש שישה מצבי intra נוספים שדומים ל-V_PRED ול-H_PRED, אבל הם תואמים לחיזוי פיקסלים בכיוונים שונים. פרטים נוספים על המצבים האלה זמינים במדריך ל-VP8 Bitstream.
Adaptive Block Quantization
כדי לשפר את איכות התמונה, היא מחולקת לאזורים שיש להם מאפיינים דומים באופן חזותי. לכל אחד מהפלחים האלה, פרמטרים של דחיסת הנתונים (שלבי קונטיינציה, עוצמת סינון וכו') מותאמים בנפרד. כך מתקבלת דחיסה יעילה על ידי חלוקה מחדש של הביטים למקומות שבהם הם הכי שימושיים. ב-VP8 אפשר להשתמש בעד ארבעה קטעים (מגבלה של מקור הביטים של VP8).
למה WebP (עם אובדן נתונים) טוב יותר מ-JPEG
קידוד חיזוי הוא אחת הסיבות העיקריות לכך ש-WebP עדיף על JPEG. גם לקונטיינציה אדפטיבית של בלוקים יש השפעה משמעותית. סינון עוזר בקצבי נתונים בינוניים או נמוכים. קידוד אריתמטי בוליאני מספק שיפור של 5% עד 10% בדחיסה בהשוואה לקידוד Huffman.
WebP ללא אובדן נתונים
הקידוד ללא אובדן נתונים ב-WebP מבוסס על טרנספורמציה של התמונה באמצעות כמה שיטות שונות. לאחר מכן, מתבצעת קידוד אנטרופייה בפרמטרים של הטרנספורמציה ובנתוני התמונה שעברו טרנספורמציה. הטרנספורמציות שחלות על התמונה כוללות חיזוי מרחבי של פיקסלים, טרנספורמציה של מרחב צבעים, שימוש בלוחות צבעים שמתפתחים באופן מקומי, אריזה של כמה פיקסלים בפיקסל אחד והחלפת אלפא. בקידוד האנטרופיה אנחנו משתמשים בגרסה של קידוד LZ77-Huffman, שמשתמש בקידוד דו-מימדי של ערכי מרחק וערכים דלילים וקומפקטים.
טרנספורמציה חזוי (מרחבי)
כדי לצמצם את האנטרופיה, נעשה שימוש בתחזית מרחבית על סמך העובדה שלרוב יש קורלציה בין פיקסלים שכנים. בטרנספורמציה של החזוי, ערך הפיקסל הנוכחי משוער מהפיקסלים שכבר פוענחו (בסדר של שורת הסריקה), ורק הערך השיורי (הערך בפועל פחות הערך החזוי) מקודד. מצב החיזוי קובע את סוג החיזוי שבו נעשה שימוש. התמונה מחולקת למספר אזורים ריבועיים, וכל הפיקסלים בריבועים משתמשים באותו מצב חיזוי.
יש 13 מצבי חיזוי שונים. הפיקסלים הנפוצים ביותר הם פיקסלים שמאליים, עליונים, שמאליים עליונים וימניים עליונים. שאר האפשרויות הן שילובים (ממוצעים) של 'שמאל', 'למעלה', 'שמאל למעלה' ו'פינה ימנית עליונה'.
טרנספורמציה של צבע (ביטול התאמה)
מטרת טרנספורמציית הצבע היא לבטל את הקורלציה בין ערכי ה-R, G ו-B של כל פיקסל. בטרנספורמציית צבע, הערך הירוק (G) נשאר כפי שהוא, הערך האדום (R) עובר טרנספורמציה על סמך הערך הירוק, והערך הכחול (B) עובר טרנספורמציה על סמך הערך הירוק ואז על סמך הערך האדום.
כמו בטרנספורמציה של החזוי, קודם התמונה מחולקת לבלוקים, ואז נעשה שימוש באותו מצב טרנספורמציה לכל הפיקסלים בבלוק. לכל בלוק יש שלושה סוגים של רכיבי טרנספורמציה של צבע: green_to_red, green_to_blue ו-red_to_blue.
טרנספורמציה של חיסור ירוק
ב'טרנספורמציה של חיסור ירוק', הערכים הירוקים מוחרגים מהערכים האדומים והכחולים של כל פיקסל. כשהטרנספורמציה הזו קיימת, המפענח צריך להוסיף את הערך הירוק גם לאדום וגם לכחול. זהו מקרה מיוחד של טרנספורמציית ביטול המתאם הכללית של הצבע שצוינה למעלה, שמופיע בתדירות גבוהה מספיק כדי להצדיק חיתוך.
טרנספורמציה של הוספת אינדקס צבעים (לוחות צבעים)
אם יש מעט ערכי פיקסלים ייחודיים, ייתכן שיהיה יעיל יותר ליצור מערך של מדדי צבעים ולהחליף את ערכי הפיקסלים במדדים של המערך. הטרנספורמציה של הוספת צבעים לאינדקס מאפשרת לעשות זאת. הטרנספורמציה של הוספת צבע לאינדקס בודקת את מספר הערכים הייחודיים של ARGB בתמונה. אם המספר הזה נמוך מסף מסוים (256), נוצרת מערך של ערכי ה-ARGB האלה, שמשמשים לאחר מכן להחלפת ערכי הפיקסלים באינדקס המתאים.
קידוד של מטמון צבע
בדחיסת WebP ללא אובדן נתונים נעשה שימוש בקטעי תמונה שכבר נראו כדי לשחזר פיקסלים חדשים. אם לא נמצאה התאמה מעניינת, המערכת יכולה להשתמש גם בצבעים מקומיים. לוח הצבעים הזה מתעדכן באופן קבוע כדי שניתן יהיה לעשות שימוש חוזר בצבעים האחרונים. בתמונה הבאה אפשר לראות את המטמון המקומי של הצבעים בפעולה, כשהוא מתעדכן בהדרגה עם 32 הצבעים שבהם נעשה שימוש לאחרונה, ככל שהסריקה מתקדמת למטה.
הפניה לאחור של LZ77
הפניות לאחור הן קבוצות של אורך וקוד מרחק. האורך מציין כמה פיקסלים צריך להעתיק לפי סדר שורת הסריקה. קוד המרחק הוא מספר שמציין את המיקום של פיקסל שצולם בעבר, שממנו צריך להעתיק את הפיקסלים. ערכי האורך והמרחק מאוחסנים באמצעות קידוד קידומת LZ77.
קידוד קידומות של LZ77 מחלק ערכים שלמים גדולים לשני חלקים: קוד הקידומת והביטים הנוספים. קוד הקידומת מאוחסן באמצעות קוד אנטרופיה, והביטים הנוספים מאוחסנים כפי שהם (ללא קוד אנטרופיה).
בתרשים הבא מוצגת LZ77 (גרסה דו-ממדית) עם התאמת מילים (במקום פיקסלים).
WebP עם אובדן נתונים ואלפא
בנוסף ל-WebP עם אובדן נתונים (צבעי RGB) ול-WebP ללא אובדן נתונים (RGB ללא אובדן נתונים עם ערוץ אלפא), יש עוד מצב WebP שמאפשר קידוד עם אובדן נתונים לערוצי RGB וקידוד ללא אובדן נתונים לערוץ האלפא. אפשרות כזו (RGB עם אובדן נתונים ואלפא ללא אובדן נתונים) לא זמינה היום באף אחד מפורמטים הקיימים של תמונות. כיום, מנהלי אתרים שזקוקים לשקיפות צריכים לקודד תמונות בפורמט PNG ללא אובדן נתונים, מה שמוביל לעלייה משמעותית בגודל הקובץ. WebP alpha מקודד תמונות עם כמות קטנה של ביטים לכל פיקסל, ומספק דרך יעילה לצמצום הגודל של תמונות כאלה. דחיסת ערוץ האלפא ללא אובדן נתונים מוסיפה רק 22% בייטים בהשוואה לקידוד WebP עם אובדן נתונים (איכות 90).
באופן כללי, החלפת קובץ PNG שקוף בקובץ WebP עם אובדן נתונים ואלפא מאפשרת לחסוך 60-70% בגודל הקובץ בממוצע. הוכח שזו תכונה מושכת במיוחד לאתרים לנייד שמכילים הרבה סמלים (למשל, everything.me).
