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

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

טוענים רק את הגודל של מפת הביטים שצריך

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

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

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

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

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

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

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

כשמשתמשים ב-ImageBitmap, מתקשרים אל prepareToDraw לפני שמציירים

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

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

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

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

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

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

}

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

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

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

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