تحسين أداء الصور

يمكن أن يؤدي استخدام الصور إلى حدوث مشاكل في الأداء بسرعة إذا لم تكن حذيفًا. يمكنك بسهولة العثور على OutOfMemoryError عند العمل باستخدام ملفات بترميز ثنائي كبير. اتّبِع أفضل الممارسات التالية لضمان تحقيق تطبيقك أفضل أداء ممكن.

تحميل حجم الصورة النقطية الذي تحتاجه فقط

تحتوي معظم الهواتف الذكية على كاميرات عالية الدقة تُنشئ ملفات صور كبيرة. إذا كنت تعرض صورة على الشاشة، يجب تقليل درجة دقة الصورة أو تحميل الصورة فقط حتى حجم حاوية الصورة. إنّ loadingتحميل الصور بشكلٍ مستمر أكبر من اللازم يمكن أن يؤدي إلى استنفاد ذاكرة التخزين المؤقت لوحدة معالجة الرسومات، ما يؤدي إلى معالجة واجهة المستخدم بشكلٍ أقل فعالية.

لإدارة أحجام الصور:

  • قلِّل حجم ملفات الصور إلى أصغر حجم ممكن (بدون التأثير في الصورة الناتجة).
  • ننصحك بتحويل صورك إلى تنسيق WEBP بدلاً من تنسيقات JPEG أو PNG.
  • تقديم صور أصغر لدرجات دقة شاشة مختلفة (راجِع الملاحظة 3)
  • استخدِم مكتبة لتحميل الصور، والتي تقلّل حجم صورتك لتلائم حجم العرض على الشاشة. يمكن أن يساعد ذلك في تحسين أداء تحميل الشاشة.

استخدِم الرسومات المتجهّة بدلاً من الصور المخصّصة للطباعة كلما أمكن.

عند تمثيل شيء ما بشكل مرئي على الشاشة، عليك تحديد ما إذا كان يمكن تمثيله كعنصر متّجه أم لا. استخدِم صور المتجه بدلاً من الصور الممسوحة ضوئيًا، لأنّها لا تصبح مجزّأة عند تغيير حجمها إلى أحجام مختلفة. ومع ذلك، لا يمكن تمثيل كل شيء كعنصر مرئي، إذ لا يمكن تحويل الصور الملتقطة بالكاميرا إلى عنصر مرئي.

توفير موارد بديلة لأحجام الشاشات المختلفة

إذا كنت بصدد شحن صور مع تطبيقك، ننصحك بتوفير مواد عرض مختلفة المقاسات لدرجات دقة مختلفة للأجهزة. يمكن أن يساعد ذلك في تقليل حجم تنزيل تطبيقك على الأجهزة وتحسين الأداء، لأنّه سيحمّل صورة بدقة أقل على جهاز بدقة أقل. لمزيد من المعلومات حول توفير bitmaps بديلة لمختلف أحجام الأجهزة، يمكنك الاطّلاع على مستندات bitmaps البديلة.

عند استخدام ImageBitmap، اتصل بـ prepareToDraw قبل الرسم.

عند استخدام ImageBitmap، لبدء عملية تحميل النسيج إلى وحدة معالجة الرسومات، استخدِم ImageBitmap#prepareToDraw() قبل رسمه فعليًا. يساعد ذلك GPU في إعداد النسيج وتحسين أداء عرض المرئيات على الشاشة. تُجري معظم مكتبات تحميل الصور هذا التحسين، ولكن إذا كنت تعمل مع فئة ImageBitmap بنفسك، عليك أخذ ذلك في الاعتبار.

يُفضَّل تمرير Int DrawableRes أو عنوان URL كمَعلمات في العنصر القابل للتجميع بدلاً من Painter.

بسبب تعقيدات التعامل مع الصور (على سبيل المثال، سيكون من الصعب حسابيًا كتابة دالة تساوي لـ Bitmaps)، لم يتم وضع علامة على واجهة برمجة التطبيقات Painter بشكل صريح على أنّها فئة مستقرة. يمكن أن تؤدي الفئات غير المستقرة إلى عمليات إعادة تركيب غير ضرورية لأنّ المُجمِّع لا يمكنه استنتاج ما إذا كانت البيانات قد تغيّرت بسهولة.

لذلك، من الأفضل تمرير عنوان URL أو معرّف مورد قابل للرسم كمَعلمات إلى العنصر القابل للتجميع، بدلاً من تمرير Painter كمَعلمة.

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

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

}

لا تخزِّن صورة نقطية في الذاكرة لفترة أطول من المدة التي تحتاجها.

وكلما زاد عدد ملفات الأشكال الممسوحة ضوئيًا التي تحمّلها إلى الذاكرة، زادت احتمالية نفاد الذاكرة على الجهاز. على سبيل المثال، في حال تحميل قائمة كبيرة من عناصر تركيب الصور على الشاشة، استخدِم LazyColumn أو LazyRow لضمان شغّل الذاكرة عند الانتقال إلى قائمة كبيرة.

عدم حزم صور كبيرة مع ملف AAB/APK

إنّ أحد أهم أسباب حجم تنزيل التطبيق الكبير هو الرسومات التي يتم تجميعها داخل حِزمة AAB أو ملف APK. استخدِم أداة محلل APK للتأكّد من عدم حزم ملفات صور أكبر من الحجم المطلوب. يمكنك تقليل الأحجام أو التفكير في وضع الصور على خادم وتنزيلها عند الحاجة فقط.

السابق
طلاء مخصّص