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

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

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

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

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

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

استخدام الرسومات المتجهة بدلاً من الصور النقطية متى أمكن ذلك

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

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

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

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

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

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

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

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

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

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

}

عدم تخزين صورة نقطية في الذاكرة لمدة أطول من اللازم

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

عدم تضمين صور كبيرة في ملف AAB أو APK

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

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