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

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

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

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

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

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

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

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

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

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

כשמשתמשים בפונקציה ImageBitmap, צריך להתקשר למספר prepareToDraw לפני השרטוט

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

אני רוצה להעביר Int DrawableRes או כתובת URL כפרמטרים לתוכן הקומפוזבילי במקום Painter

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

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

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

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

}

לא כדאי לשמור מפת סיביות בזיכרון יותר זמן מהדרוש

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

אין לארוז תמונות גדולות בקובץ ה-AAB או ה-APK

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