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

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

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

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

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

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

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

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

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

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

عند استخدام 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 لضمان عدم وضع حزمة أكبر من ملفات الصور المطلوبة. يمكنك تقليل الأحجام أو التفكير في وضع الصور على خادم وتنزيلها عند الحاجة فقط.

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