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

Barry Pollard

Yoav Weiss

تاريخ النشر: 30 سبتمبر 2019، تاريخ آخر تعديل: 10 يوليو 2026

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

يمكنك تحميل الصور المتجاوبة مسبقًا، ما يتيح تحميل صورك بشكل أسرع من خلال مساعدة المتصفّح في تحديد الصورة الصحيحة من srcset قبل عرض علامة img.

نظرة عامة على الصور المتجاوبة

Browser Support

• 73
• 79
• 78
• 17.2

Source

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

الصور المتجاوبة تتيح للمتصفحات جلب موارد صور مختلفة للأجهزة المختلفة. إذا لم تكن تستخدم شبكة توصيل محتوى (CDN) للصور، احفظ أبعادًا متعددة لكل صورة وحدِّدها في السمة srcset. تخبر قيمة w المتصفح بعرض كل إصدار، حتى يتمكن من اختيار الإصدار المناسب لأي جهاز:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

نظرة عامة على التحميل المُسبَق

Browser Support

• 50
• 79
• 85
• 11.1

Source

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

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

ملاحظة مهمة: من المفترض أن تكون الصور التي يتم تحميلها مسبقًا ذات أولوية عالية، لذا يجب أن تتضمّن السمة fetchpriority="high"، وإلا سيحصل التحميل المُسبق على الأولوية التلقائية للسمة as. بالنسبة إلى الصور، تكون هذه القيمة low تلقائيًا لكي يتمكّن المتصفّح من منح الأولوية للمحتوى الذي يحظر العرض على الصور. لمزيد من التفاصيل، يمكنك الاطّلاع على المقالة تحسين تحميل الموارد باستخدام واجهة برمجة التطبيقات Fetch Priority API.

imagesrcset وimagesizes

يستخدم العنصر <link> السمتَين imagesrcset وimagesizes لتحميل الصور المتجاوبة مع مختلف الأجهزة بشكل مسبق. استخدِمها مع <link rel="preload">، مع استخدام بنية srcset وsizes في العنصر <img>.

على سبيل المثال، إذا أردت تحميل صورة متجاوبة مسبقًا محدّدة باستخدام:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

ويمكنك إجراء ذلك من خلال إضافة ما يلي إلى <head> في ملف HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

يؤدي ذلك إلى بدء طلب باستخدام منطق اختيار الموارد نفسه الذي تستخدمه السمتان srcset وsizes.

تحذير: قد لا تكون الصور المتجاوبة متوافقة مع عمليات التحميل المُسبق لعناوين HTTP لأنّه لا يتم تحديد إطار العرض إلا عند إنشاء المستند. وهذا يعني أيضًا أنّه لا يمكن استخدامها للتحميل المُسبق المبكر في 103 Early Hints.

تعالج بعض المتصفّحات، مثل Chrome، عمليات التحميل المُسبق باستخدام هذه السمات بعد تحديد المستند وبعد معالجة الجزء الأول من ملف HTML. تم اقتراح هذه السمة لمعيار HTML. ومع ذلك، قد يظل هذا الإجراء محفوفًا بالمخاطر إذا تمت إعادة تحديد إطار العرض لاحقًا في المستند (على سبيل المثال، عنصر <meta name="viewport"> متأخر)، لأنّه قد يكون قد بدأ تحميل الصور المتجاوبة غير الصحيحة.

لتجنُّب أي مشاكل، ننصح باستخدام عناصر <link rel="preload" href="..."> للصور المتجاوبة مع مختلف الأجهزة بدلاً من عناوين استجابة HTTP التي تتضمّن Link: <...>; rel="preload".

حالات الاستخدام

في ما يلي بعض حالات الاستخدام للتحميل المُسبق للصور المتجاوبة مع مختلف الأجهزة.

التحميل المُسبق للصور المتجاوبة التي يتم إدخالها ديناميكيًا

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

يمكنك فحص هذه المشكلة على موقع إلكتروني يتضمّن معرض صور يتم تحميله ديناميكيًا:

1. افتح العرض التوضيحي للشرائح في علامة تبويب جديدة.
2. اضغط على Control+Shift+J (أو Command+Option+J على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
3. انقر على علامة التبويب الشبكة.
4. في القائمة المنسدلة Throttling (التقييد)، اختَر Fast 3G (شبكة الجيل الثالث السريعة).
5. أوقِف مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
6. إعادة تحميل الصفحة

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

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

يتيح التحميل المُسبق للصورة الأولى بدء تحميلها في الوقت نفسه الذي يتم فيه تحميل النص البرمجي.

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

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

التحميل المُسبق لصور الخلفية باستخدام image-set

إذا كانت لديك صور خلفية مختلفة لكثافات شاشة مختلفة، يمكنك تحديدها في CSS باستخدام البنية image-set. ويمكن للمتصفّح بعد ذلك اختيار الصورة التي يريد عرضها استنادًا إلى DPR للشاشة.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

ملاحظة: تتجاهل هذه الصيغة حاجة هذه الميزة إلى بادئات المورّدين في كل من المتصفّحات المستندة إلى Chromium وWebKit. إذا كنت تخطط لاستخدام هذه الميزة، ننصحك باستخدام Autoprefixer (متوفر كأداة على الإنترنت) لمعالجة ذلك تلقائيًا.

تكمن المشكلة في صور الخلفية في CSS في أنّ المتصفّح لا يكتشفها إلا بعد تنزيل ومعالجة كل ملفات CSS في <head> الصفحة.

يمكنك فحص هذه المشكلة على موقع إلكتروني تجريبي يتضمّن صورة خلفية متجاوبة.

في هذا المثال، لا يبدأ تنزيل الصورة إلا بعد تنزيل ملف CSS بالكامل، ما يؤدي إلى تأخير غير ضروري في عرض الصورة.

ويتيح لك التحميل المُسبق للصور المتجاوبة تحميل هذه الصور بشكل أسرع.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

يضمن لك حذف السمة href أن تنزّل المتصفحات التي لا تتيح استخدام imagesrcset في العنصر <link> ولكن تتيح استخدام image-set في CSS المصدر الصحيح. ومع ذلك، لن يستفيدوا من التحميل المُسبق في هذه الحالة.

يمكنك فحص سلوك المثال السابق مع صورة خلفية متجاوبة تم تحميلها مسبقًا في العرض التوضيحي للتحميل المُسبق للخلفية المتجاوبة.

في هذه الحالة، يبدأ تنزيل الصورة وملف CSS في الوقت نفسه، ما يتيح تحميل الصورة بشكل أسرع.

التأثيرات العملية للتحميل المُسبَق للصور المتجاوبة

يمكن أن يؤدي التحميل المُسبق للصور المتجاوبة إلى تسريعها من الناحية النظرية، ولكن ما الذي يفعله من الناحية العملية؟

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

أدّى ذلك إلى النتائج التالية بدون تحميل مسبق ومع تحميل مسبق للصورة:

• لم يتغيّر وقت بدء العرض.
• مؤشر السرعة تحسّن قليلاً (273 ملي ثانية، لأنّ الصور تصل بشكل أسرع ولا تشغل جزءًا كبيرًا من مساحة البكسل).
• تحسّن مقياس Last Painted Hero بشكل كبير بمقدار 1.2 ثانية.

يتم تحميل الصور بشكل أسرع بكثير عند تحميلها مسبقًا، ما يحسّن تجربة المستخدم بشكل كبير.

التحميل المُسبق و<picture>

تناقش مجموعة عمل أداء الويب إضافة مكافئ تحميل مسبق لـ srcset وsizes، ولكن ليس لعنصر <picture> الذي يتعامل مع حالة استخدام "التوجيه الفني".

لا يزال هناك عدد من المشاكل الفنية التي يجب حلّها في ما يتعلّق بالتحميل المُسبق لـ <picture>، ولكن في الوقت الحالي، هناك حلول بديلة:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

يراجع منطق اختيار مصدر الصورة للعنصر <picture> سمات media للعناصر <source> بالترتيب، ويعثر على أول سمة مطابقة، ويستخدم المورد المرفق.

بما أنّ التحميل المُسبق المتجاوب لا يتضمّن مفهوم "الترتيب" أو "المطابقة الأولى"، عليك ترجمة نقاط التوقف إلى ما يلي:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

التحميل المُسبق وtype

يتيح العنصر <picture> أيضًا المطابقة في أول type، ما يتيح لك تقديم تنسيقات صور مختلفة ليتمكّن المتصفّح من اختيار أول تنسيق صورة متوافق.

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

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

ومع ذلك، على عكس <picture>، لن يتوقف عند أول نوع متوافق. لذلك، إذا تم تضمين عدة عمليات تحميل مسبق لأنواع متعددة، سيتم تحميل جميع الصور مسبقًا:

لا تفعل ذلك - التحميل المُسبق لأنواع متعددة:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

بدلاً من ذلك، يمكنك إجراء ما يلي: تحميل النوع الأكثر تفضيلاً مسبقًا:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

يُعدّ التحميل المُسبق لأحدث تنسيق (AVIF في هذه الحالة) بمثابة تحسين تدريجي، حيث ستستفيد المتصفّحات التي تتيح هذا النوع من التحميل المُسبق، ولن تستفيد المتصفّحات الأخرى منه.

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

التأثيرات في سرعة عرض أكبر محتوى مرئي (LCP)

بما أنّ الصور يمكن أن تكون مرشحة لتكون أكبر محتوى مرئي، يمكن أن يؤدي تحميلها مسبقًا إلى تحسين سرعة عرض أكبر محتوى مرئي على موقعك الإلكتروني.

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