يمكنك تحميل الصور المتجاوبة مع مختلف الأجهزة مسبقًا، ما يتيح تحميل صورك بشكل أسرع بكثير من خلال مساعدة المتصفّح في التعرّف على الصورة الصحيحة
من علامة srcset
قبل عرض العلامة img
.
نظرة عامة على الصور المتجاوبة
توافق المتصفّح
لنفترض أنّك تتصفّح الويب على شاشة بعرض 300 بكسل، وتطلب الصفحة صورة بعرض 1500 بكسل. لقد أهدرت هذه الصفحة الكثير من بيانات الأجهزة الجوّالة لأنّ شاشتك لا يمكنها الاستفادة من كل هذه الدقة الإضافية. من المفترض أن يعرض المتصفّح نسخة من الصورة تكون أوسع بقليل من حجم الشاشة، مثلاً 325 بكسل. يضمن ذلك عرض صورة عالية الدقة بدون إهدار البيانات، ويسمح بتحميل الصورة بشكل أسرع.
الصور المتجاوبة:
تسمح للمتصفّحات بجلب مصادر صور مختلفة للأجهزة المختلفة. إذا لم تكن تستخدم
شبكة توصيل المحتوى (CDN) للصور، احفظ سمات أبعاد متعددة لكل
صورة وحدِّدها في سمة srcset
. تُعلم قيمة w
المتصفّح بعرض كل إصدار، حتى يتمكّن من اختيار الإصدار المناسب
لأي جهاز:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
نظرة عامة على ميزة "التحميل المُسبَق"
تتيح لك ميزة التحميل المُسبق إعلام المتصفّح بالموارد المهمة التي تريد تحميلها في أقرب وقت ممكن، قبل أن يتم اكتشافها في HTML. ويُعدّ هذا الإجراء مفيدًا بشكل خاص للموارد التي يصعب اكتشافها، مثل الخطوط المضمّنة في أوراق الأنماط أو صور الخلفية أو الموارد المحمَّلة من نص برمجي.
<link rel="preload" as="image" href="important.png">
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">
يؤدي ذلك إلى بدء طلب باستخدام منطق اختيار الموارد نفسه الذي يستخدمه
srcset
وsizes
.
حالات الاستخدام
في ما يلي بعض حالات الاستخدام لتحميل الصور المتوافقة مع الأجهزة الجوّالة مسبقًا.
تحميل الصور المتجاوبة التي يتمّ إدراجها ديناميكيًا مسبقًا
تخيل أنك تحمِّل الصور الرئيسية ديناميكيًا كجزء من عرض الشرائح، وتعرف أي صورة سيتم عرضها أولاً. في هذه الحالة، من المحتمل أن تريد عرض هذه الصورة في أقرب وقت ممكن، وعدم الانتظار إلى أن يتم تحميل نص عرض الشرائح.
يمكنك فحص هذه المشكلة على موقع إلكتروني يتضمّن معرض صور يتم تحميله ديناميكيًا:
- افتح العرض التقديمي التجريبي هذا في علامة تبويب جديدة.
- اضغط على
Control+Shift+J
(أوCommand+Option+J
في نظام التشغيل Mac) لفتح DevTools. - انقر على علامة التبويب الشبكة.
- في القائمة المنسدلة Throttling، اختَر Fast 3G.
- أزِل العلامة من مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
- إعادة تحميل الصفحة
يتيح استخدام preload
هنا بدء تحميل الصورة مسبقًا، حتى يمكن أن تكون
جاهزة للعرض عندما يحتاج المتصفّح إلى عرضها.
لمعرفة الفرق الذي يحدثه التحميل المُسبَق، راجِع معرض الصور نفسه الذي يتم تحميله ديناميكيًا، ولكن مع تحميل الصورة الأولى مُسبَقًا، باتّباع الخطوات الواردة في المثال الأول.
تحميل صور الخلفية مسبقًا باستخدام مجموعة الصور
إذا كانت لديك صور خلفية مختلفة لكثافة شاشة مختلفة، يمكنك
تحديدها في CSS باستخدام بنية image-set
. ويمكن للمتصفّح بعد ذلك
اختيار الدقة التي سيتم عرضها استنادًا إلى
DPR الشاشة.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
تكمن المشكلة في صور خلفية CSS في أنّ المتصفّح لا يكتشفها
إلا بعد تنزيل جميع ملفات CSS ومعالجتها في <head>
الصفحة.
يمكنك فحص هذه المشكلة على مثال لموقع إلكتروني يتضمّن صورة خلفية متجاوبة.
يتيح لك التحميل المُسبَق للصور المتجاوبة تحميل هذه الصور بشكل أسرع.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
يتيح لك حذف سمة href
التأكّد من أنّ المتصفّحات التي لا تسمح باستخدام imagesrcset
في عنصر <link>
، ولكنّها تسمح باستخدام image-set
في CSS، يمكنها تنزيل المصدر الصحيح. ومع ذلك، لن يستفيدوا من التحميل المُسبَق في
هذه الحالة.
يمكنك فحص أداء المثال السابق باستخدام صورة background متجاوبة مُحمَّلة مسبقًا في العرض التجريبي لتحميل الخلفية المتجاوبة مسبقًا.
التأثيرات العملية لتحميل الصور المتجاوبة مسبقًا
يمكن أن يؤدي تحميل الصور المتجاوبة مسبقًا إلى تسريعها نظريًا، ولكن ما هو أثره عمليًا؟
للإجابة عن هذا السؤال، أنشأت نسختَين من متجر تجريبي لتطبيق متوافق مع الويب: نسخة لا تحمّل الصور مسبقًا، ونسخة تحمّل بعض الصور مسبقًا. بما أنّ الموقع الإلكتروني يُحمِّل الصور في وضعٍ خامل باستخدام JavaScript، من المرجّح أن يستفيد من تحميل الصور التي تظهر في إطار العرض الأوّلي مسبقًا.
أدّى ذلك إلى ظهور النتائج التالية لحالة عدم التحميل المُسبَق والتحميل المُسبَق للصور:
- بقيت بدء التقديم كما هي.
- تحسّن مقياس السرعة بمقدار بسيط (273 ملي ثانية، لأنّ الصور تصل بشكل أسرع ولا تشغل مساحة كبيرة من مساحة البكسل).
- تحسّنت سرعة تحميل Last Painted Hero بشكل ملحوظ، بمقدار 1.2 ثانية.
التحميل المُسبق و<picture>
تناقش مجموعة عمل أداء الويب إضافة عنصر تحميل مُسبَق مكافئ لعلامتَي HTML
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)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
التحميل المُسبَق وtype
يتيح لك العنصر <picture>
أيضًا مطابقة أول type
، ما يتيح لك
تقديم تنسيقات صور مختلفة ليتمكّن المتصفّح من اختيار أول تنسيق صور
يتوافق معه. لا تتوافق حالة الاستخدام هذه مع ميزة "التحميل المُسبق".
بالنسبة إلى المواقع الإلكترونية التي تستخدم مطابقة الأنواع، ننصحك بتجنُّب التحميل المُسبَق، وبدلاً من ذلك السماح لأداة فحص التحميل المُسبَق باختيار الصور من عناصر
<picture>
و<source>
بدلاً من ذلك. وهذه من أفضل الممارسات على أي حال، خاصةً عند استخدام أولوية الجلب للمساعدة في تحديد أولويات الصورة المناسبة.
التأثيرات على مقياس "سرعة عرض أكبر محتوى مرئي" (LCP)
بما أنّ الصور يمكن أن تكون مرشحة لسرعة عرض أكبر محتوى مرئي (LCP)، يمكن أن يؤدي تحميلها مسبقًا إلى تحسين مقياس LCP لموقعك الإلكتروني.
بغض النظر عمّا إذا كانت الصورة التي يتم تحميلها مسبقًا متجاوبة، تعمل عمليات التحميل المُسبَق بشكلٍ أفضل عندما لا يكون مصدر الصورة قابلاً للاكتشاف في الحمولة الأولية للترميز. ستلاحظ أيضًا تحسُّنًا أكبر في مقياس LCP على المواقع الإلكترونية التي تعرِض الترميز على جانب العميل مقارنةً بالمواقع الإلكترونية التي تُرسِل ترميزًا كاملاً من الخادم.