نقاط توقف الصور المتجاوبة: دليل عملي لـ WebP

آخر تحديث: June 28, 2026

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

يغطي هذا الدليل الحل العملي الوسط: قم بقياس مساحة التخطيط (layout slot)، وقم بإنشاء متدرج WebP قصير، واكتب srcset و sizes، ثم تحقق من أن المتصفح يختار الملف الصحيح من CDN.

إجابة سريعة: ما هي نقاط التوقف للصور المتجاوبة التي يجب استخدامها؟

استخدم نقاط توقف تتطابق مع مساحة الصورة المعروضة فعليًا، ثم أضف هامش كثافة للشاشات الشبكية (retina screens). بالنسبة لمعظم صور المقالات، يعد متدرج WebP مفيدًا هو 480w, 720w, 960w, 1200w, و 1440w. أما لصور البطل (hero images) ذات العرض الكامل، فقم بإضافة 1920w إذا كان التصميم قادرًا بالفعل على عرض هذا العرض.

لا تقم بنسخ نقاط توقف CSS بشكل أعمى. قد يحتوي الصفحة على نقطة توقف تخطيط تبلغ 1280px بينما يتم عرض الصورة نفسها داخل عمود مقالة يبلغ 720px. في هذه الحالة، قد تغطي صورة 1440w بالفعل شاشة بمضاعف 2x، وقد يكون تنوع 1920w ضائعًا.

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

ما هي نقاط التوقف للصور المتجاوبة؟

نقاط التوقف للصور المتجاوبة هي عرضات ملفات مُولَّدة، وليست بالضرورة نقاط توقف تصميمية (design breakpoints). تقوم نقاط توقف CSS بتغيير التخطيط. أما نقاط توقف الصور فتمنح المتصفح قائمة من الملفات، مثل 480w و 720w و 960w و 1440w.

يشرح دليل الصور المتجاوبة الخاص بـ MDN المشكلة الأساسية: يحتاج المتصفح إلى معلومات كافية لاختيار صورة ذات حجم مناسب قبل اكتمال التخطيط. تسرد صفة srcset المرشحين، بينما تصف sizes المساحة التي سيحتلها الصورة.

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

بالنسبة لاختيارات التنسيق، قم بإقران نقاط التوقف بتنسيق ويب حديث. يعد WebP افتراضي آمنًا لدعم واسع النطاق، ويمكن أن يكون AVIF جديرًا بالإضافة للمكتبات الفوتوغرافية الكبيرة. يتم تغطية المفاضلة بين التنسيقات في مقارنة AVIF مقابل WebP.

كيف تختار عرضات نقاط التوقف؟

ابدأ من المساحة المعروضة، وليس من ملف المصدر. لا تحتاج صورة منتج بدقة 4000px إلى نسخة ويب بدقة 4000px إذا كانت أكبر مساحة مرئية هي 760px. إنها بحاجة إلى ما يكفي من البكسلات لتبدو حادة في تلك المساحة على الشاشات التي تهتم بها.

استخدم هذا الترتيب:

1. افتح الصفحة بأضيق تخطيط للهاتف المحمول، وعرض لوحي شائع، وعرض الكمبيوتر المحمول، وأعرض سطح المكتب الواسع.
2. قم بقياس مساحة الصورة المعروضة بالبكسلات CSS.
3. اضرب كل مساحة في 1x و 2x إذا كنت تريد دعم كثافة عالية.
4. قم بالتقريب إلى متدرج صغير مثل 480، 720، 960، 1200، 1440، و 1920.
5. أزل العروض التي تقل عن حوالي 15 بالمائة عن بعضها البعض.
6. توقف عند أكبر عرض يمكن للتصميم استخدامه.

لقد قمت بترميز الرسوم البيانية الأربعة في هذا المقال محليًا بدقة 1400 × 788 بتنسيق WebP. كل ملف مقاس يقل عن 35 KB لأن الأصول هي رسوم بيانية تعليمية مسطحة. عادةً ما تكون صورة الكاميرا بنفس الأبعاد أكبر بكثير، لذا قم بقياس مخرجاتك الخاصة قبل تحديد الميزانيات.

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

كيف يجب أن تبدو srcset و sizes؟

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

<img
  src="https://cdn.example.com/blog/photo-960.webp"
  srcset="
    https://cdn.example.com/blog/photo-480.webp 480w,
    https://cdn.example.com/blog/photo-720.webp 720w,
    https://cdn.example.com/blog/photo-960.webp 960w,
    https://cdn.example.com/blog/photo-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  width="1440"
  height="810"
  alt="صورة منتج معروضة في تخطيط مقالة متجاوب">

تذكر قيمة sizes تقول: عندما يكون عرض منطقة العرض 900px على الأقل، تكون مساحة الصورة 720px؛ وإلا، فإن المساحة هي 92 بالمائة من منطقة العرض. يمكن لهاتف عرضه 390px اختيار ملف قريب من 720w لعرض بمضاعف 2x بدلاً من تنزيل ملف 1440w.

يظهر دليل web.dev حول الصور المتجاوبة نفس مبدأ اختيار المتصفح: امنح المتصفح مرشحات ومعلومات تخطيط دقيقة حتى يتمكن من الاختيار قبل إجراء طلب الصورة.

استخدم عنصر <picture> عندما يتغير القص أو التنسيق، وليس لكل تغيير حجم عادي. على سبيل المثال، قد تحتاج صور البطل الموجهة فنيًا (art-directed) إلى قص محمول مربع وقطع سطح مكتب عريض. عادةً ما تكون تغييرات العرض البسيطة أبسط باستخدام img واحد و srcset جيد.

كم عدد نقاط التوقف للصور التي تعتبر أكثر من اللازم؟

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

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

انتبه لهذه العلامات التي تشير إلى أن المتدرج كثيف جدًا:

• وجود 640w و 700w و 760w لجميع الصور نفسها.
• تُظهر سجلات CDN أن بعض التنوعات نادرًا ما يتم طلبها تقريبًا.
• ينمو وقت البناء لأن كل تحميل ينتج عشرة مشتقات أو أكثر.
• لا يستطيع المحررون تحديد أي ملف ينتمي إلى مقدمة المحتوى (frontmatter)، أو Open Graph، أو محتوى الجسم.
• يبدأ ضمان الجودة المرئي بالتحقق من أسماء الملفات بدلاً من الصفحات المعروضة.

انتبه لهذه العلامات التي تشير إلى أن المتدرج متناثر جدًا:

• يقوم الهواتف بتنزيل ملف 1440w أو 1920w لصور الجسم العادية.
• تبدو شاشات Retina المكتبية ناعمة لأن أكبر مرشح صغير جدًا.
• يختار المتصفح دائمًا src الاحتياطي نفسه.
• تضع PageSpeed أو Lighthouse علامات على الصور كبيرة الحجم على الهاتف المحمول.

توصي أفضل ممارسات SEO للصور من Google بروابط صور قابلة الزحف، ونص محيط مفيد، ونص بديل وصفي. يجب أن يحافظ التسليم المتجاوب على هذه الأساسيات. لا تخفِ الصور المهمة في خلفيات CSS إذا كانت تحتاج إلى فهرسة أو فهم كمحتوى للصفحة.

كيف تؤثر نقاط التوقف على Core Web Vitals؟

تؤثر نقاط التوقف المتجاوبة على الأداء لأن بايتات الصورة غالبًا ما تهيمن على الشاشة الأولى. إذا كانت صورة البطل هي أيضًا عنصر Largest Contentful Paint، يمكن لنقطة التوقف الخاطئة أن تجعل أهم عملية تلوين تنتظر ملفًا أكبر بمرتين مما هو مطلوب.

يوصي دليل web.dev حول تحسين Largest Contentful Paint بجعل صور LCP المحتملة قابلة للاكتشاف مبكرًا وتحديد أولويتها عند الاقتضاء. لا تحل نقاط التوقف محل هذا العمل. إنها تتأكد من أن الملف ذي الأولوية هو الحجم الصحيح.

بالنسبة للصور فوق الطية (above-the-fold):

1. تعيين width و height صريحين لتخصيص المساحة.
2. تجنب التحميل الكسول لصورة LCP المحتملة.
3. استخدام fetchpriority="high" فقط للصورة التي تحتاجها حقًا.
4. الحفاظ على دقة sizes للتخطيط الأولي.
5. التحقق من currentSrc المختار في DevTools.

بالنسبة للصور تحت الطية (below-the-fold):

1. قم بالتحميل الكسول لصور المعرض والمقالات العادية.
2. استخدم نفس متدرج نقاط التوقف ما لم يكن القص الأصغر كافيًا.
3. الضغط بعد تغيير الحجم، وليس قبله.
4. الحفاظ على نص بديل خاص بالصورة المرئية.
5. التحقق من شلالات شبكة الهاتف المحمول، وليس سطح المكتب فقط.

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

ما هي فحوصات CDN التي يجب تشغيلها قبل النشر؟

لا تكتمل نقاط التوقف إلا عندما تعمل عناوين URL النهائية. لا يزال مسودة Markdown نظيفة يمكن أن تفشل إذا كان مسار CDN خاطئًا، أو كان للكائن نوع محتوى خاطئ، أو أشارت الصفحة عن طريق الخطأ إلى ملف محلي /blog/....

قم بتشغيل فحص ما قبل النشر هذا:

في Chrome DevTools، افحص الصورة المعروضة وتحقق من currentSrc. ثم قم بتغيير منطقة العرض ونسبة بكسل الجهاز. يجب أن ينتقل عنوان URL المختار عبر المتدرج. إذا لم يتغير أبدًا، فقد يقوم الـ markup أو مكون الصورة الخاص بالإطار (framework) بالتجاوز على مرشحاتك.

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

قائمة مراجعة نقاط التوقف للصور المتجاوبة

استخدم هذا الإصدار القصير عند مراجعة طلب السحب (pull request):

• صورة المصدر أكبر من أقصى تنوع مُولَّد.
• تتطابق العروض المُولَّدة مع مساحات العرض الفعلية.
• لا يتم تجميع العروض في زيادات صغيرة وقليلة القيمة.
• يتم ضغط ملفات WebP بعد تغيير الحجم.
• يستخدم srcset واصفات عرض صحيحة.
• تتطابق sizes مع التخطيط، وليس قيمة مُخمَّنة مثل 100vw.
• لا يتم تحميل صورة LCP المحتملة بشكل كسول (lazy-loaded).
• يتم تحميل صور تحت الطية بشكل كسول.
• وجود العرض والارتفاع لتجنب تحول التخطيط (layout shift).
• تعود عناوين URL لـ CDN بالرمز HTTP 200 قبل النشر.
• تشير الروابط الداخلية إلى خطوات الضغط، والهاتف المحمول، والتحميل الكسول التالية للقراء.

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