إنشاء مكوِّن صور فعّال

يضم مكوّن الصورة أفضل ممارسات الأداء ويوفّر حلاً مبتكرًا لتحسين الصور.

تُعدّ الصور مصدرًا شائعًا للتأثيرات السلبية في أداء تطبيقات الويب، كما تشكّل مجال تركيز رئيسي للتحسين. تساهم الصور غير المحسّنة في زيادة حجم الصفحة، وتمثل حاليًا أكثر من 70% من إجمالي وزن الصفحة بالبايت عند نسبة ^90%. تتطلّب الطرق المتعدّدة لتحسين الصور توفّر "مكوِّن صور" ذكي مع حلول الأداء المدمجة كإعداد تلقائي.

تعاون فريق Aurora مع Next.js لإنشاء أحد هذه المكوّنات. وكان الهدف من ذلك إنشاء نموذج صور محسَّن يمكن لمطوّري الويب تخصيصه بصورة أكبر. يعمل المكوِّن كنموذج جيد ويضع معيارًا لإنشاء مكونات الصور في أُطر العمل الأخرى وأنظمة إدارة المحتوى (CMS) وحِزم التكنولوجيا. لقد تعاونّا على مكوِّن مشابه لـ Nuxt.js، ونعمل مع Angular على تحسين الصور في الإصدارات المستقبلية. تناقش هذه المشاركة كيف صممنا مكون صورة Next.js والدروس التي تعلمناها طوال العملية.

المشاكل وفرص تحسين الصور

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

الصور التي لا يمكن تغيير حجمها تؤثر سلبًا في CLS

إنّ الصور التي يتم عرضها بدون تحديد حجمها يمكن أن تتسبب في عدم استقرار التنسيق وتساهم في زيادة معدّل متغيّرات التصميم التراكمية (CLS). يمكن أن يساعد ضبط السمتَين width وheight على عناصر img على منع متغيّرات التصميم. مثال:

<img src="flower.jpg" width="360" height="240">

يجب ضبط العرض والارتفاع بحيث تكون نسبة العرض إلى الارتفاع للصورة المعروضة قريبة من نسبة العرض إلى الارتفاع الطبيعية. قد يؤدي اختلاف كبير في نسبة العرض إلى الارتفاع إلى تشويه الصورة. يمكن أن تساعد السمة الجديدة نسبيًا التي تتيح لك تحديد نسبة العرض إلى الارتفاع في CSS في تحديد حجم الصور بشكل متجاوب مع منع متغيّرات التصميم التراكمية (CLS) في الوقت نفسه.

يمكن أن تضر الصور الكبيرة سرعة LCP

كلما زاد حجم ملف الصورة، استغرقت عملية التنزيل وقتًا أطول. قد تكون الصورة الكبيرة هي صورة "الجزء الرئيسي" للصفحة أو العنصر الأكثر أهمية في إطار العرض المسؤول عن عرض "سرعة عرض أكبر محتوى مرئي" (LCP). تؤدي الصورة التي تشكل جزءًا من المحتوى المُهم ويستغرق تنزيلها وقتًا طويلاً إلى تأخير سرعة LCP.

في كثير من الحالات، يمكن للمطوّرين تقليل أحجام الصور من خلال تحسين عملية الضغط واستخدام الصور المتجاوبة. تساعد السمتان srcset وsizes للعنصر <img> على توفير ملفات صور بأحجام مختلفة. بعد ذلك يمكن للمتصفح اختيار المتصفح المناسب بناءً على حجم الشاشة ودرجة الدقة.

يمكن أن يؤدي ضغط الصورة السيء إلى التأثير سلبًا في سرعة LCP

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

يؤدي تحميل الصور غير الضرورية إلى التأثير سلبًا في سرعة LCP

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

تحديات التحسين

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

• الأولويات: يميل مطوِّرو البرامج على الويب عادةً إلى التركيز على تحسين البيانات البرمجية وJavaScript وتحسين البيانات. ومن هذا المنطلق، قد لا يكونون على دراية بالمشاكل المتعلّقة بالصور أو كيفية تحسينها. قد لا تكون الصور التي ينشئها المصممون أو يحمّلها المستخدمون عالية في قائمة الأولويات.
• حلّ فريد: حتى إذا كان المطوّرون على دراية بالفروقات الدقيقة في تحسين الصور، قد يكون عدم توفّر حلّ شامل وفريد لإطار العمل أو حزمة التكنولوجيا الخاصة بهم عائقًا أمامهم.
• الصور الديناميكية: بالإضافة إلى الصور الثابتة التي تشكّل جزءًا من التطبيق، يتم تحميل الصور الديناميكية من قِبل المستخدمين أو يتم الحصول عليها من قواعد بيانات خارجية أو من نظام إدارة المحتوى (CMS). وقد يكون من الصعب تحديد حجم هذه الصور حيث يكون مصدر الصورة ديناميكيًا.
• التحميل الزائد على الترميز: تتطلّب حلول تضمين حجم الصورة أو srcset للأحجام المختلفة ترميزًا إضافيًا لكل صورة، وهو ما قد يكون مملاً. تمّ تقديم السمة srcset في عام 2014، ولكنّها تستخدمها 26.5%فقط من المواقع الإلكترونية حاليًا. عند استخدام "srcset"، على المطوّرين إنشاء صور بأحجام مختلفة. يمكن أن تساعد أدوات مثل just-gimme-an-img، ولكن يجب استخدامها يدويًا لكل صورة.
• توافق المتصفّح: تنشئ تنسيقات الصور الحديثة، مثل AVIF وWebP، ملفات صور أصغر حجمًا، ولكنّها تحتاج إلى معالجة خاصة على المتصفّحات التي لا تتوافق معها. وعلى المطوّرين استخدام استراتيجيات مثل التفاوض على المحتوى أو العنصر <picture> لعرض الصور على جميع المتصفّحات.
• مشاكل التحميل الكسول: تتوفّر عدّة أساليب ومكتبات لتنفيذ التحميل الكسول للصور في الجزء السفلي غير المرئي من الصفحة. قد يكون اختيار أفضل صورة تحديًا كبيرًا. قد لا يعرف المطوّرون أيضًا أفضل مسافة من "الجزء المرئي" لتحميل الصور المؤجلة. ويمكن أن تؤدي أحجام إطارات العرض المختلفة على الأجهزة إلى تعقيد هذا الأمر.
• تغيير المشهد: عندما تبدأ المتصفّحات في إتاحة ميزات HTML أو CSS الجديدة لتحسين الأداء، قد يكون من الصعب على المطوّرين تقييم كلّ منها. على سبيل المثال، يقدِّم Chrome ميزة أولوية الجلب باعتبارها نسخة تجريبية أصلية. ويمكن استخدامها لتعزيز أولوية صور معيّنة على الصفحة. بشكل عام، سيجد المطوّرون أنّه من الأسهل إذا تم تقييم هذه التحسينات وتنفيذها على مستوى المكوّنات.

مكوّن الصورة كحلّ

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

على مدار العام الماضي، عملنا باستخدام إطار عمل Next.js لتصميم وimplement مكوِّن الصور. يمكن استخدامه كبديل لعناصر <img> الحالية في تطبيقات Next.js على النحو التالي.

// Before with <img> element:
function Logo() {
  return <img src="/logo.jpg" alt="logo" height="200" width="100" />
}

// After with image component:
import Image from 'next/image'

function Logo() {
  return <Image src="/logo.jpg" alt="logo" height="200" width="100" />
}

يحاول المكوِّن معالجة المشكلات المتعلقة بالصور بشكل عام من خلال مجموعة كبيرة من الميزات والمبادئ. وتتضمّن أيضًا خيارات تتيح للمطوّرين تخصيصه وفقًا لمتطلبات مختلفة خاصة بالصور.

الحماية من متغيّرات التصميم

كما ناقشنا سابقًا، تتسبّب الصور التي لا يتعدّى حجمها في إحداث تغيُّرات في التصميم وتساهم في متغيّرات التصميم التراكمية (CLS). عند استخدام مكوّن صورة Next.js، على المطوّرين توفير حجم صورة باستخدام السمتَين width وheight لمنع أي تغييرات في التصميم. وإذا كان الحجم غير معروف، على المطوّرين تحديد layout=fill لعرض صورة بدون حجم تظهر داخل حاوية بحجم. وبدلاً من ذلك، يمكنك استخدام عمليات استيراد الصور الثابتة لاسترداد حجم الصورة الفعلية على محرك الأقراص الثابتة في وقت الإنشاء وتضمينها في الصورة.

// Image component with width and height specified
<Image src="/logo.jpg" alt="logo" height="200" width="100" />

// Image component with layout specified
<Image src="/hero.jpg" layout="fill" objectFit="cover" alt="hero" />

// Image component with image import
import Image from 'next/image'
import logo from './logo.png'

function Logo() {
  return <Image src={logo} alt="logo" />
}

ولأنّه لا يمكن للمطوّرين استخدام مكوِّن الصورة بدون حجمه، يضمن التصميم أنّهم سيستغرقون الوقت الكافي لدراسة حجم الصور ومنع تغيُّرات التصميم.

تسهيل الاستجابة

لجعل الصور متجاوبة مع مختلف الأجهزة، على المطوّرين ضبط السمتَين srcset وsizes في العنصر <img>. أردنا تقليل هذا الجهد باستخدام مكوِّن الصور. لقد صممنا عنصر صورة Next.js لتعيين قيم السمات مرة واحدة فقط لكل تطبيق. ونطبقها على جميع مثيلات مكون الصورة بناءً على وضع التخطيط. توصّلنا إلى حل من ثلاثة أجزاء:

1. السمة deviceSizes: يمكن استخدام هذه السمة لضبط نقاط الإيقاف لمرة واحدة استنادًا إلى الأجهزة المشترَكة بين قاعدة مستخدمي التطبيق. يتم تضمين القيم التلقائية لنقاط الإيقاف في ملف الإعداد.
2. السمة imageSizes: إنّها أيضًا سمة قابلة للضبط وتُستخدَم للحصول على أحجام الصور المقابلة للنقاط الفاصلة لحجم الجهاز.
3. السمة layout في كل صورة: تُستخدَم هذه السمة للإشارة إلى كيفية استخدام السمتَين deviceSizes وimageSizes لكل صورة. القيم المسموح بها لوضع التنسيق هي fixed وfill وintrinsic وresponsive.

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

توضح المقارنة التالية كيف يمكن استخدام وضع التخطيط للتحكم في حجم الصورة على شاشات مختلفة. لقد استخدمنا صورة تجريبية تمت مشاركتها في مستندات Next.js، ويتم عرضها على هاتف وكمبيوتر محمول عادي.

توفير ميزة التحميل الكسول المدمجة

يوفّر مكوِّن الصورة حلاً مضمّنًا وفعّالاً للتحميل الكسول كإعداد تلقائي. عند استخدام العنصر <img>، تتوفّر بعض الخيارات الأصلية للتحميل الكسول، ولكن لها جميعًا عيوب تجعل استخدامها صعبًا. يمكن أن يتبنّى المطوّر أحد طُرق "التحميل الكسول" التالية:

• تحديد السمة loading: هذه السمة سهلة التنفيذ ولكنّها غير متوافقة حاليًا على بعض المتصفّحات.
• استخدام Intersection Monitorer API: إنّ إنشاء حل مخصّص للتحميل الكسول يتطلّب جهدًا وتصميمًا وتنفيذًا مدروسًا. قد لا يكون لدى المطوّرين الوقت الكافي لذلك في بعض الأحيان.
• استيراد مكتبة تابعة لجهة خارجية من أجل استخدام طريقة التحميل الكسول للصور: قد يتطلّب الأمر جهدًا إضافيًا لتقييم ودمج مكتبة خارجية مناسبة لتحميلها باستخدام طريقة \"التحميل الكسول\".

في مكوِّن صورة Next.js، يتم ضبط التحميل على "lazy" تلقائيًا. يتم تنفيذ "التحميل الكسول" باستخدام أداة Intersection Monitorer، وهي متوفّرة على معظم المتصفّحات الحديثة. وليس على المطوّرين اتّخاذ أي إجراء إضافي لتفعيلها، ولكن يمكنهم إيقافها عند الحاجة.

تحميل الصور المهمة مسبقًا

في أغلب الأحيان، تكون عناصر LCP عبارة عن صور، ويمكن أن تؤدي الصور الكبيرة إلى تأخير سرعة LCP. من الأفضل تحميل الصور المهمة مسبقًا ليتمكّن المتصفِّح من اكتشاف تلك الصورة في وقت أقرب. عند استخدام عنصر <img>، قد يتم تضمين تلميح للتحميل المُسبق في عنوان HTML على النحو التالي.

<link rel="preload" as="image" href="important.png">

يجب أن يوفر مكون الصورة المصمم جيدًا طريقة لتعديل تسلسل تحميل الصور، بغض النظر عن إطار العمل المستخدم. في حال استخدام سمة صورة Next.js، يمكن للمطوّرين تحديد صورة مناسبة للتحميل المُسبق باستخدام السمة priority الخاصة بمكوّن الصور.

<Image src="/hero.jpg" alt="hero" height="400" width="200" priority />

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

التشجيع على استضافة الصور ذات الأداء العالي

ويُنصَح باستخدام شبكات عرض المحتوى (CDN) للصور لتفعيل تحسين الصور بشكل تلقائي، كما أنّها تتوافق أيضًا مع تنسيقات الصور الحديثة، مثل WebP وAVIF. يستخدم مكوِّن صورة Next.js شبكة توصيل محتوى (CDN) بشكل تلقائي باستخدام بنية أداة التحميل. يوضّح المثال التالي أنّ أداة التحميل تسمح بضبط شبكة توصيل المحتوى (CDN) في ملف الإعداد Next.js.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://ImgApp/imgix.net',
  },
}

باستخدام هذه الإعدادات، يمكن للمطوّرين استخدام عناوين URL نسبية في مصدر الصورة، وسينشئ إطار العمل تسلسلاً لعنوان URL النسبي مع مسار شبكة توصيل المحتوى (CDN) لإنشاء عنوان URL الكامل. ويمكن استخدام شبكات توصيل المحتوى (CDN) الرائجة للصور، مثل Imgix وCloudinary وAkamai. تدعم البنية استخدام مقدّم خدمات سحابة إلكترونية مخصّص من خلال تنفيذ وظيفة loader مخصّصة للتطبيق.

دعم الصور المستضافة ذاتيًا

في بعض الحالات، قد لا تتمكّن المواقع الإلكترونية من استخدام شبكات توصيل المحتوى (CDN) الخاصة بالصور. وفي هذه الحالات، يجب أن يتوافق مكوّن الصورة مع الصور التي تتم استضافتها ذاتيًا. يستخدم مكوِّن صورة Next.js مُحسّن الصورة باعتباره خادم صور مدمَجًا يوفّر واجهة برمجة تطبيقات تشبه شبكة توصيل المحتوى (CDN). يستخدم محسِّن خدمة Sharp لتحويلات صور الإنتاج إذا كان مثبّتًا على الخادم. تُعدّ هذه المكتبة اختيارًا جيدًا لأي شخص يتطلع إلى إنشاء مسار تحسين الصور الخاص به.

دعم التحميل التدريجي

التحميل التدريجي هو أسلوب يُستخدَم للحفاظ على اهتمام المستخدمين من خلال عرض صورة نائبة عادةً ما تكون ذات جودة أقل بكثير أثناء تحميل الصورة الفعلية. يحسن الأداء الملحوظ ويعزز تجربة المستخدم. ويمكن استخدامها مع التحميل الكسول للصور في الجزء السفلي غير المرئي من الصفحة أو للصور في الجزء المرئي من الصفحة.

يتيح مكوِّن صورة Next.js التحميل التدريجي للصورة من خلال الخاصية placeholder. ويمكن استخدام هذه السمة كعنصر LQIP (عنصر نائب للصورة المنخفضة الجودة) لعرض صورة منخفضة الجودة أو مموّهة أثناء تحميل الصورة الفعلية.

التأثير

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

عندما نقلت شركة Leboncoin واجهة JavaScript الأمامية القديمة إلى Next.js، عملت أيضًا على ترقية مسار الصور لاستخدام مكوّن صورة Next.js. في صفحة تم نقلها من <img> إلى الصفحة التالية/الصورة، انخفضت سرعة عرض أكبر محتوى مرئي (LCP) من 2.4 ثانية إلى 1.7 ثانية. بلغ إجمالي وحدات بايت الصورة التي تم تنزيلها للصفحة من 663 كيلوبايت إلى 326 كيلوبايت (مع حوالي 100 كيلوبايت من وحدات بايت الصور التحميل الكسول).

الدروس المستفادة

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

يمكن أن تسبب صمامات الأمان ضررًا أكثر مما تنفع

في إصدار مبكر من مكوّن صورة Next.js، قدّمنا سمة unsized التي سمحت للمطوّرين بتجاوز متطلبات الحجم واستخدام صور بأبعاد غير محدّدة. ونعتقد أنّ هذا الإجراء سيكون ضروريًا في الحالات التي لا يمكن فيها معرفة ارتفاع الصورة أو عرضها مسبقًا. ومع ذلك، لاحظنا أنّ المستخدمين يوصون بسمة unsized في مشاكل GitHub كحلّ شامل للمشاكل المتعلّقة بمتطلبات الحجم، حتى في الحالات التي يمكنهم فيها حلّ المشكلة بطرق لا تؤدي إلى تفاقم متغيّرات التصميم التراكمية (CLS). وبعد ذلك، تم إيقاف السمة unsized نهائيًا وإزالتها.

فصل الاحتكاك المفيد عن الإزعاج الذي لا معنى له

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

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

تحقيق التوازن بين ميزات الراحة وتحسينات الأداء

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

وضع خارطة طريق للميزات لتعزيز الاستخدام

من الصعب جدًا إنشاء حل يعمل بشكل مثالي لكل المواقف. قد يكون من المغري تصميم شيء يعمل بشكل جيد لنسبة 75٪ من الأشخاص ثم إخبار الـ 25٪ الآخرين أنه "في هذه الحالات، هذا المكون ليس مناسبًا لك".

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

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

الخلاصة

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

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

نجح مكوِّن صورة Next.js في تحسين نتائج الأداء في تطبيقات Next.js، وبالتالي تحسين تجربة المستخدم. ونعتقد أنّ هذا النموذج نموذج رائع سينجح في المنظومة المتكاملة ذات النطاق الأوسع، ونودّ تلقّي ملاحظات من المطوّرين الذين يريدون استخدام هذا النموذج في مشاريعهم.