تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

Leena Sohoni

Kara Erickson

Alex Castle

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

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

عنصر الصورة كإضافة للصور

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

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

تضرّ الصور غير المحدَّدة الحجم بمتغيّر التصميم التراكمية (CLS).

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

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

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

يمكن أن تؤثر الصور الكبيرة سلبًا في مقياس سرعة عرض أكبر محتوى مرئي (LCP).

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

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

يمكن أن يؤثّر ضغط الصور السيئ في LCP

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

تحميل الصور غير الضرورية يؤثر سلبًا في سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)

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

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

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

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

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

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

على مدار العام الماضي، عملنا مع إطار عمل Next.js لتصميم مكوّن الصورة وتنفيذه. ويمكن استخدامه كبديل لعناصر <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). عند استخدام مكوّن Image في 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>. أردنا تقليل هذا الجهد باستخدام مكوّن "الصورة". لقد صمّمنا مكوّن Image في Next.js لضبط قيم السمات مرة واحدة فقط لكل تطبيق. ونطبقها على جميع مثيلات مكوِّن الصورة بناءً على وضع التخطيط. لقد توصّلنا إلى حلّ من ثلاثة أجزاء:

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

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

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

صور يتمّ عرضها بتنسيقات مختلفة
شاشة الكمبيوتر المحمول	شاشة الهاتف
التنسيق = Intrinsic: يتم تصغيره ليلائم عرض الحاوية في إطارات العرض الأصغر حجمًا. لا يتم تكبيرها إلى حجم أكبر من حجمها الأصلي في إطار عرض أكبر. يبلغ عرض الحاوية 100%.

التنسيق = ثابت: الصورة غير متجاوبة. يكون العرض والارتفاع ثابتَين مثل عنصر بغض النظر عن الجهاز الذي يتم عرض العنصر عليه.

التنسيق = متجاوب: تصغير أو تكبير المحتوى حسب عرض الحاوية في مساحات العرض المختلفة مع الحفاظ على نسبة العرض إلى الارتفاع

التخطيط = التعبئة: تم تمديد العرض والارتفاع لملء الحاوية الرئيسية. (تم ضبط عرض العنصر الرئيسي `<div>` على 300*500 في هذا المثال)

توفير ميزة "التحميل الكسول" المضمّنة

يقدّم مكوّن Image حلّاً مضمّنًا وفعّالاً لتحميل الصور ببطء بشكل تلقائي. عند استخدام العنصر <img>، تتوفّر بعض خيارات التحميل البطيء، ولكنّها جميعًا لها عيوب تجعل استخدامها صعبًا. قد يتّبع المطوّر أحد النهجَين التاليَين للتحميل المُتأخّر:

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

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

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

غالبًا ما تكون عناصر سرعة عرض أكبر محتوى مرئي (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 النسبي بمسار شبكة توصيل المحتوى لإنشاء عنوان URL المطلق. تتوفّر شبكات CDN الشائعة للصور، مثل Imgix وCloudinary وAkamai. تتيح البنية استخدام مقدّم خدمة سحابة إلكترونية مخصّص من خلال تنفيذ دالة loader مخصّصة للتطبيق.

إتاحة الصور المستضافة ذاتيًا

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

إتاحة التحميل التدريجي

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

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

التأثير

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

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

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

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

يمكن أن تتسبب صمامات الأمان في ضرر يفوق أي فائدة محتمَلة.

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

الفصل بين الإجراءات التي تتطلّب بذل جهد والإجراءات التي تسبب إزعاجًا غير ضروري

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

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

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

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

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

من الصعب جدًا إيجاد حل مناسب لجميع المواقف. قد يكون من المغري تصميم عنصر يناسب% 75 من المستخدمين ثم إخبار% 25 الآخرين بأنّ "هذا المكوّن غير مناسب لك في هذه الحالات".

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

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

الخاتمة

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

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

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