הקטנת הגודל של תמונות להורדה

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

מידע על פורמטים של תמונות

בדרך כלל, אפליקציות ל-Android משתמשות בתמונות באחד או יותר מהפורמטים הבאים של קבצים: AVIF, ‏ PNG, ‏ JPG ו-WebP. לכל אחד מהפורמטים האלה יש שלבים שאפשר לבצע כדי להקטין את גודל התמונות.

AVIF

מערכות Android בגרסה 12 (API ברמה 31) ומעלה תומכות בתמונות בפורמט AV1 Image File Format‏ (AVIF). ‫AVIF הוא פורמט קונטיינר לתמונות ולרצפים של תמונות שמקודדים באמצעות AV1. פורמט AVIF מנצל את התוכן המקודד בתוך הפריים לדחיסת סרטונים. הפורמט הזה משפר באופן משמעותי את איכות התמונה באותו גודל קובץ בהשוואה לפורמטים ישנים יותר של תמונות, כמו JPEG. למידע נוסף על היתרונות של הפורמט הזה, אפשר לקרוא את הפוסט הזה בבלוג של ג'ייק ארצ'יבלד.

PNG

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

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

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

יש שתי גישות שימושיות במיוחד: שימוש בפורמטים עם אינדקס ושימוש בכימות וקטורי.

כדאי להשתמש בפורמטים שניתן לאנדקס

כל ניסיון להפחתת הצבעים צריך להתחיל באופטימיזציה של הצבעים, כדי שתוכלו להשתמש בפורמט INDEXED כשאתם מייצאים את התמונה כ-PNG. מצב הצבעים INDEXED פועל על ידי בחירת 256 הצבעים הטובים ביותר לשימוש, והחלפת כל ערכי הפיקסלים באינדקסים בלוח הצבעים הזה. התוצאה היא צמצום מ-16 מיליון צבעים (פוטנציאליים) ל-256 צבעים בלבד: מ-3 (ללא שקיפות) או 4 (עם שקיפות) בייטים לכל פיקסל ל-1 בייט לכל פיקסל. השינוי הזה הוא צעד ראשון משמעותי להקטנת גודל הקובץ.

איור 1 מציג תמונה וגרסה שלה שעברה אינדוקס.

איור 1. תמונה לפני ואחרי המרה לפורמט INDEXED.

איור 2 מציג את לוח הצבעים של התמונה באיור 1:

איור 2. לוח הצבעים של התמונה באיור 1.

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

ברור שלא כל תמונה יכולה להיות מיוצגת בצורה מדויקת עם 256 צבעים בלבד. לדוגמה, יכול להיות שיהיו תמונות שיידרשו 257, 310, 512 או 912 צבעים כדי להציג אותן בצורה נכונה. במקרים כאלה, יכול להיות שיהיה שימושי להשתמש בכימות וקטורי.

קוונטיזציה וקטורית

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

איור 3. החלת קוונטיזציה של וקטורים על הצבעים בתמונה.

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

הטכניקה הזו מאפשרת גם להגדיר את המספר המקסימלי של צבעים ייחודיים בתמונה. לדוגמה, באיור 4 מוצגת תמונה של ראש תוכי ב-16.7 מיליון צבעים (24 ביטים לכל פיקסל, או bpp) לצד גרסה שמאפשרת שימוש רק ב-16 צבעים ייחודיים (3 bpp).

איור 4. תמונה לפני ואחרי החלת וקטור כימות.

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

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

JPG

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

• יצירת קובץ קטן יותר באמצעות שיטות קידוד שונות (בלי לפגוע באיכות).
• האיכות משתנה מעט כדי להשיג דחיסה טובה יותר.

יישום האסטרטגיות האלה יכול להקטין את גודל הקובץ בשיעור של עד 25%.

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

WebP

‫WebP הוא פורמט תמונה חדש יותר שנתמך מ-Android 4.2.1 (רמת API‏ 17). הפורמט הזה מספק דחיסת נתונים איכותית יותר מסוג lossless ו-lossy עבור תמונות באינטרנט. השימוש ב-WebP מאפשר למפתחים ליצור תמונות קטנות ועשירות יותר. בממוצע, קובצי תמונות WebP ללא אובדן נתונים קטנים ב-26% מקובצי PNG. קבצי התמונות האלה תומכים גם בשקיפות (שנקראת גם ערוץ אלפא) בעלות של 22% יותר בייטים בלבד.

הגודל של תמונות WebP עם אובדן נתונים קטן ב- 25-34% ביחס לתמונות JPG דומות באינדקסים המתאימים של ציוני איכות SSIM. במקרים שבהם דחיסת RGB עם אובדן נתונים היא סבירה, גם WebP עם אובדן נתונים תומך בשקיפות, ובדרך כלל יוצר קבצים בגודל קטן פי 3 מ-PNG.

מידע נוסף על WebP זמין באתר WebP.

אפשר להמיר תמונות קיימות בפורמט BMP, ‏ JPG, ‏ PNG או GIF סטטי לפורמט WebP באמצעות Android Studio. מידע נוסף זמין במאמר בנושא יצירת תמונות WebP באמצעות Android Studio.

בחירת פורמט

פורמטים שונים של תמונות מתאימים לסוגים שונים של תמונות. תהליכי הדחיסה של JPG ו-PNG שונים מאוד, והם מניבים תוצאות שונות למדי.

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

איור 5. מקרים שבהם כדאי להשתמש ב-JPG לעומת PNG

פורמט WebP תומך במצבי דחיסה עם אובדן נתונים וגם ללא אובדן נתונים, ולכן הוא מהווה תחליף אידיאלי לפורמטים PNG ו-JPG. הדבר היחיד שצריך לזכור הוא שהתמיכה המובנית קיימת רק במכשירים עם Android מגרסה 4.2.1 (רמת API‏ 17) ואילך. למזלנו, רוב המכשירים עומדים בדרישה הזו.

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

איור 6. בחירת תוכנית דחיסה

קביעת ערכי האיכות האופטימליים

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

ערכים סקלריים (רק JPG ו-WebP)

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

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

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

Butteraugli

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

‫Butteraugli מאפשר להגדיר יעד לאיכות חזותית, ואז להפעיל דחיסה של PNG,‏ JPG,‏ WebP עם אובדן נתונים ו-WebP ללא אובדן נתונים. אחר כך תוכלו לבחור את התמונה שבה יש את האיזון הכי טוב בין גודל הקובץ לרמת Butteraugli. באיור 7 מוצגת דוגמה לאופן השימוש ב-Butteraugli כדי למצוא את רמת האיכות המינימלית של קובץ JPG לפני שהעיוות החזותי היה גבוה מספיק כדי שמשתמש יוכל לזהות בעיה. התוצאה היא צמצום של כ-65% בגודל הקובץ.

איור 7. תמונה לפני ואחרי השימוש בטכנולוגיית Butteraugli.

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

גודלי מנות

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

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

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

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