אופטימיזציה של ביצועי התמונות

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

טעינה של גודל הבייטמאפ הנדרש בלבד

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

כדי לנהל את גדלי התמונות:

• צריך להקטין את קובצי התמונה כך שיהיו קטנים ככל האפשר (בלי להשפיע על הפלט של התמונה).
• כדאי להמיר את התמונות לפורמט WEBP במקום לפורמטים JPEG או PNG.
• לספק תמונות קטנות יותר לרזולוציות מסך שונות (ראו טיפ מס' 3),
• להשתמש בספריית טעינה של תמונות, שמקטינה את התמונה כך שתתאים לגודל התצוגה במסך. הפעולה הזו יכולה לשפר את ביצועי הטעינה של המסך.

מומלץ להשתמש בתמונות וקטוריות במקום בתמונות בפורמט bitmap כאשר הדבר אפשרי.

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

לספק משאבים חלופיים לגדלים שונים של מסכים

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

כשמשתמשים ב-ImageBitmap, צריך להפעיל את prepareToDraw לפני שמתחילים לצייר

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

מומלץ להעביר Int DrawableRes או כתובת URL כפרמטרים ל-composable במקום Painter

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

לכן, עדיף להעביר כפרמטרים לכלים המשולבים כתובת URL או מזהה של משאב drawable, במקום להעביר Painter כפרמטר.

// Prefer this:
@Composable
fun MyImage(url: String) {

}
// Over this:
@Composable
fun MyImage(painter: Painter) {

}

לא לאחסן בזיכרון קובץ bitmap למשך זמן ארוך יותר מהנדרש

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

אסור לארוז תמונות גדולות באמצעות קובץ AAB או APK

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