الصور المتجاوبة (srcset)

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

ما الصور المتجاوبة؟

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

توجد طريقتان لذلك، ومن المهم التمييز بينهما:

• srcset + sizes على <img> — وهي الشائعة: الصورة نفسها بأحجام مختلفة. تسرد المتاح ويختار المتصفح، ويسمى ذلك تبديل الدقة.
• العنصر <picture> — عندما تريد صورة مختلفة فعلاً باختلاف الحجم، مثل قص أفقي لسطح المكتب وقص رأسي ضيق للهاتف، أو تنسيق حديث مع بديل احتياطي. يسمى ذلك التوجيه الفني، ولا تحتاج إليه معظم المواقع.

النسخة الأساسية

هكذا يبدو تبديل الدقة:

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

• src هو البديل الاحتياطي المعتاد والدائم؛ أبقه.
• يسرد srcset النسخ المتاحة وعرض كل منها (تعني 1000w عرضاً قدره 1000 بكسل).
• تخبر sizes المتصفح بالحجم الذي ستظهر به الصورة فعلياً كي يختار الملف الصحيح قبل تحميل أي شيء.
• تحجز width وheight المساحة حتى لا تقفز الصفحة أثناء التحميل.
• alt هو الوصف المعتاد نفسه؛ اجعله متطابقاً في جميع النسخ.

لماذا تفعل ذلك؟ الإجابة الصريحة

لا تمنحك الصور المتجاوبة «دفعة» في الترتيب. لكنها تسرّع تحميل الصفحات وتمنع تغيّر التخطيط، وهذان مما تقيسه Google ضمن تجربة الصفحة. فإذا كانت Lighthouse أو PageSpeed Insights تطالبك «بتحجيم الصور بصورة صحيحة»، فإن srcset/sizes هما الإصلاح المقصود.

ولا يغيّر ذلك ما يظهر في صور Google. تفهرس Google الصورة الواردة في سمة src، أما النسخ المتجاوبة فهي آلية تسليم فقط. لذلك حافظ على نص alt واسم الملف وعنوان URL الرئيسي للصورة بصرف النظر عن النسخة التي يحملها المتصفح.

للتفاصيل الدقيقة عن واصفي w وx، ومتى تحتاج فعلاً إلى <picture>، وآليات LCP وتغيّر التخطيط، وقواعد فهرسة الجوال، انتقل إلى تبويب المتقدم.

الخلاصة — مهمتان ضمن عائلة صياغة واحدة. يعني srcset/sizes على <img> تبديل الدقة، أي الصورة نفسها والمتصفح يختار الأنسب بوصفه اقتراحاً. ويعني <picture> التوجيه الفني أو تبديل التنسيق، حيث يفرض المؤلف القص أو التنسيق بوصفه أمراً. تحتاج معظم المواقع إلى الأول فقط. الصور المتجاوبة ليست إشارة ترتيب مباشرة ولا تغير ما تفهرسه Google؛ فهي تفهرس عنوان src، لذا ثبّت نص alt وأسماء الملفات وعناوين الصور عبر نقاط التوقف. المكسب الحقيقي هو مؤشرات أداء الويب الأساسية: تحجيم الصور هو إصلاح تدقيق Lighthouse «تحجيم الصور بصورة صحيحة» الذي يفشل عند فارق 4KiB، وتحجز width/height أو aspect-ratio المساحة لمنع CLS، لا srcset. لا تستخدم التحميل الكسول لصورة LCP. وأعيد هنا النمط نفسه من مقالتي عن CLS في Ahrefs.

مهمتان مختلفتان وعائلة صياغة واحدة

ينحصر الموضوع في آليتين، وينشأ كثير من الالتباس من الخلط بينهما:

1. تبديل الدقة — الصورة نفسها بأحجام أو كثافات بكسل مختلفة. تقدم للمتصفح قائمة عبر srcset وsizes على <img>، ويقرر المتصفح الملف الذي يجلبه وفق منفذ العرض وكثافة الشاشة. وهذه الحالة الشائعة.
2. التوجيه الفني — صورة مختلفة فعلاً لكل شرط: قص عريض لسطح المكتب، أو قص رأسي محكم للهاتف، أو تنسيق ملف مختلف كلياً. وهنا تفرض أنت الاختيار بواسطة <picture>.

يصوغ درس الصور المتجاوبة في web.dev الفرق بدقة: مع srcset يحصل المتصفح على اقتراحات، بينما «يعطي العنصر picture أوامر». ويحدد web.dev النطاق أيضاً: “You probably won’t need to use the picture element for most of your responsive images — the srcset and sizes attributes on the img element cover a lot of use cases.” (ترجمة) «لن تحتاج على الأرجح إلى العنصر picture لمعظم صورك المتجاوبة؛ فسمتا srcset وsizes على img تغطيان حالات استخدام كثيرة». استخدم <picture> عندما تحتاج إلى صورة مختلفة، لا مجرد حجم مختلف للصورة نفسها.

srcset وsizes: تبديل الدقة

واصفات w في مقابل واصفات x

تقبل srcset قائمة ملفات مرشحة مفصولة بفواصل، ولكل ملف واصف. والواصفات نوعان:

• واصفات العرض (w) — تذكر العرض الداخلي لكل ملف بالبكسل، مثل puppy-2000.jpg 2000w. يدمج المتصفح ذلك مع قيمة sizes ليحدد الملف الأنسب للمساحة ولكثافة بكسل الجهاز. وهذا الخيار المرن الذي ستستخدمه غالباً.
• واصفات كثافة البكسل (x) — تحدد الملف المناسب لكل نسبة بكسل جهاز، مثل logo.png 1x, logo@2x.png 2x. استخدمها للصور ثابتة الحجم كالصورة الرمزية أو الشعار؛ ولا تحتاج إلى sizes مع واصفات x.

قاعدة عملية: الصور المرنة بعرض المحتوى ← واصفات w + sizes؛ وصور واجهة المستخدم ثابتة الحجم ← واصفات x.

لماذا تهم sizes؟ وماذا يحدث إذا حذفتها؟

مع واصفات w ليست sizes زينة اختيارية، بل هي ما يخبر المتصفح بحجم عرض الصورة ليختار قبل تنفيذ التخطيط. ووفق web.dev، فإن sizes «تخبر المتصفح بالحجم المتوقع لعرض الصورة في ظروف مختلفة»، ضمن قائمة مفصولة بفواصل لشروط الوسائط والعروض:

sizes="(max-width: 600px) 480px, 1000px"

اقرأها هكذا: «إذا كان منفذ العرض 600px أو أضيق فسيكون عرض الصورة نحو 480px، وإلا فنحو 1000px». وإذا حذفت sizes يفترض المتصفح أن الصورة تملأ عرض منفذ العرض كله (100vw)؛ لذلك قد يجلب أكبر ملف على شاشة عريضة لصورة لا يتجاوز عرضها الفعلي 400px، فيضيع الغرض كله. غياب sizes هو أكثر أخطاء srcset شيوعاً.

لا تخمّن قيم العرض من تصورك للتخطيط؛ افحص عرض CSS الفعلي للصورة في المتصفح عند كل نقطة توقف مهمة (DevTools ← Elements ← العرض المحسوب لصندوق <img>) واضبط sizes لتطابقه. والقيمة التي لا تطابق العرض الفعلي تجعل المتصفح يختار المرشح الخطأ حتى لو كانت الصياغة صحيحة؛ لن يكشف تحقق الصياغة وحده ذلك، لذا استخدم فحص currentSrc أدناه لتأكيد الملف المحمل.

مثال عملي: النمط الذي أعيد استخدامه

هذا هو النمط نفسه من مقالتي في Ahrefs ما تغيّر التخطيط التراكمي (CLS) وكيف تحسنه؟, بعد توسيعه بإضافة sizes:

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w,
          puppy-2000.jpg 2000w,
          puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

لكل جزء وظيفة أساسية: src هو البديل وعنوان URL الذي تفهرسه Google؛ وsrcset يسرد المرشحين بواصفات w؛ وتوضح sizes عرض الصورة عند ظهورها؛ وتحجز width/height المساحة، وهو إصلاح CLS؛ ويبقى alt متطابقاً أياً كان الملف المحمل.

العنصر picture: التوجيه الفني وتبديل التنسيق

متى تحتاج إليه فعلاً؟

استخدم <picture> لأمرين لا تستطيع srcset فعلهما:

1. التوجيه الفني — قص مختلف عند كل نقطة توقف. ففي مثال web.dev قد تقدم للهاتف الضيق قصاً رأسياً محكماً، وللسطح العريض قصاً قصيراً وعريضاً؛ الموضوع نفسه بتأطير مختلف عمداً.
2. تبديل التنسيق — تقديم AVIF/WebP مع JPEG احتياطي عبر عنصر source مشروط بسمة type، ليأخذ المتصفح أول تنسيق يدعمه. وهذا يرتبط مباشرة بإرشادات التنسيق في محور SEO للصور.

الصياغة وقاعدة البديل الاحتياطي

يلف العنصر <picture> عنصراً واحداً أو أكثر من <source> وينتهي دائماً بعنصر <img> عادي:

<!-- Art direction: different crop per breakpoint -->
<picture>
  <source media="(max-width: 600px)" srcset="hero-crop-mobile.jpg">
  <img src="hero-crop-desktop.jpg" width="1200" height="675"
       alt="Product hero shot">
</picture>

<!-- Format switching: modern format with a fallback -->
<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" width="1200" height="675" alt="Product hero shot">
</picture>

عنصر <img src> الأخير ليس اختيارياً. تقول Google ذلك مباشرة بالاستناد إلى القسم 4.8.1 من معيار HTML: “make sure that you provide an img element as a fallback with a src attribute when using the picture element.” (ترجمة) «تأكد من توفير عنصر img احتياطي بسمة src عند استخدام العنصر picture». إنه الملف الذي تعود إليه المتصفحات القديمة وبرامج الزحف، وهو أيضاً ما تفهرسه Google.

هل تساعد srcset في SEO؟ مباشرة أم بصورة غير مباشرة؟

هذا هو التأطير الذي تخطئ فيه الأدلة المنافسة، لذا سأكون صريحاً.

مباشرة: لا. ترميز الصور المتجاوبة ليس إشارة ترتيب مثل نص alt أو أسماء الملفات في بحث الصور. لا ترفع إضافة srcset مواضعك ولا تغير ما يظهر في صور Google. تفهرس Google الصورة المشار إليها في src؛ أما نسخ srcset/<picture> فهي آلية تسليم وليست أصولاً مستقلة قابلة للفهرسة. أبق نص alt واسم الملف والبيانات المنظمة مرتبطة بصورة src الأساسية.

بصورة غير مباشرة: نعم، وهي من أكبر وسائل التحسين. الصور مناسبة الحجم من أنجع الإصلاحات العملية لمؤشري LCP وCLS من مؤشرات أداء الويب الأساسية، وهما يغذيان إشارات تجربة الصفحة لدى Google. هذا هو المكسب كله؛ وكما في قصة WebP/AVIF ضمن محور SEO للصور، لا دفعة للتنسيق نفسه بل المكسب في السرعة.

الصور المتجاوبة وLCP

الصور المفرطة الحجم من أكثر أسباب بطء سرعة عرض أكبر محتوى، والصور المتجاوبة هي الإصلاح الذي توصي به Lighthouse. يسرد تدقيق «تحجيم الصور بصورة صحيحة» في Lighthouse كل الصور غير المناسبة الحجم مع الوفورات المحتملة؛ فالملف الأكبر من اللازم لا يفعل إلا هدر وحدات البايت وإبطاء التحميل. وإصلاحه حرفياً: “With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.” (ترجمة) «تنشئ مع الصور المتجاوبة نسخاً متعددة من كل صورة، ثم تحدد النسخة المستخدمة في HTML أو CSS بواسطة استعلامات الوسائط وأبعاد منفذ العرض ونحو ذلك».

تفصيلان جديران بالمعرفة:

• عتبة الفشل 4KiB. لا تشير Lighthouse إلى الصورة إلا عندما يكون حجم العرض أصغر من الحجم الفعلي بما لا يقل عن 4KiB. لا تُحتسب التجاوزات الصغيرة، أما تقديم ملف بعرض 3000px داخل خانة 400px فيُحتسب.
• اختصار بالأدوات. توصي Google بأداة RespImageLint، وتصفها بأنها “a helpful bookmarklet for identifying the optimal srcset and sizes values for your images.” (ترجمة) «إشارة مرجعية مفيدة لتحديد قيم srcset وsizes المثلى لصورك». شغلها قبل حساب نقاط التوقف يدوياً.

لا تستخدم التحميل الكسول لصورة LCP

هذه أكثر القواعد خرقاً. لا بأس باستخدام srcset في الصورة الرئيسية، لكن لا تقرنها بالتحميل الكسول على عنصر LCP. يجب تحميل أكبر صورة فوق خط الطي فوراً عبر fetchpriority="high" كما يشرح محور SEO للصور. وعند بناء صورة رئيسية متجاوبة داخل <picture>، أبق منطق التبديل أصلياً؛ فتحذر Google من أنها «لن تحمل المحتوى الذي يتطلب تفاعل المستخدم» كالتمرير أو النقر، لذا يخفي عنها مخطط JavaScript الذي لا يحمل الصورة الحقيقية إلا بعد التفاعل.

الصور المتجاوبة وCLS

هنا الفخ: لا تفعل srcset وحدها شيئاً لمنع تغيّر التخطيط. يحدد تبديل الدقة الملف الذي يحمل، لكنه لا يحجز له مساحة. ومن دون أبعاد، يوضح دليل web.dev لتحسين CLS أنه «أثناء تحميل الصور ينتقل النص إلى أسفل الصفحة لإفساح مكان لها»، لأن المساحة «لا يمكن تخصيصها حتى يبدأ المتصفح تنزيل الصورة ويتمكن من تحديد أبعادها».

الحل هو تحديد الأبعاد صراحة، وهو ينسجم مع الترميز المتجاوب:

• اضبط سمتي width وheight على <img>. تضبط المتصفحات الحديثة نسبة العرض إلى الارتفاع الافتراضية للصور استناداً إلى هاتين السمتين، فتحجزان الصندوق الصحيح قبل تنزيل أي نسخة من srcset. (web.dev)
• اقرنهما بـheight: auto في CSS للحاويات المرنة. لا يوجد تعارض: توصي web.dev باستخدام CSS لتغيير حجم الصورة إلى عرض الحاوية، وضبط height: auto; لتجنب قيمة ارتفاع ثابتة. تحدد سمات HTML نسبة الأبعاد الداخلية، ويسمح CSS للصورة بالتدرج بمرونة. معاً يمنعان CLS ويحافظان على التجاوب.
• أو استخدم aspect-ratio في CSS لحجز المساحة عندما يتعذر ضبط السمات.

وهذا يدحض خرافة مستمرة: لا تكسر سمات width/height التخطيطات المرنة. فالسمات مع height: auto هي التركيبة الصحيحة وليست تعارضاً. أشرح آليات تغيّر التخطيط كاملة في مقالتي عن CLS في Ahrefs؛ وخلاصتها “reserve the space so that there’s no shift” (ترجمة) «احجز المساحة حتى لا يحدث تغير»، ثم دع الصورة تملأها.

آثار الفهرسة التي تعطي الأولوية للجوال

تفهرس Google نسخة الجوال من صفحاتك أساساً، لذا تزداد أهمية قاعدتين عند تقديم نسخ متجاوبة:

• حافظ على تطابق نص alt عبر نقاط التوقف. تقول أفضل ممارسات الفهرسة التي تعطي الأولوية للجوال: “make sure that the mobile site has the same alt text for images as the desktop site.” (ترجمة) «تأكد من أن موقع الجوال يحتوي نص alt للصور نفسه الموجود في موقع سطح المكتب». ولا ينبغي لقص جوال موجه فنياً أن يحذف سياقاً تحتاجه Google.
• حافظ على ثبات عناوين URL للصور. لا تستخدم عناوين URL تتغير في كل مرة تُحمّل فيها الصفحة للصور. ويتفق ذلك مع إرشاد Google لبحث الصور بأن تشير باستمرار إلى الصورة بعنوان URL نفسه كي تتمكن من تخزينها وإعادة استخدامها. تخالف شبكات CDN التي تنشئ عنواناً جديداً لكل طلب هذه القاعدة؛ فثبّت عناوين النسخ.

تلخص Google سبب الاهتمام ببساطة في أن تصميم صفحات ويب متجاوبة يحسن تجربة المستخدم، لأن الناس يستطيعون الوصول إليها عبر أنواع كثيرة من الأجهزة. المصدر

ماذا عن Bing؟

لا توجد إرشادات خاصة من Bing عن srcset أو sizes أو العنصر <picture>؛ فلا تتناول وثائقه العامة ترميز الصور المتجاوبة. لذلك لا تبررها بآلية خوارزمية لدى Bing؛ فالحجة هي الأداء وتجربة المستخدم، اللذان يعاملهما Bing، مثل Google، بوصفهما جودة في تجربة الصفحة لا قاعدة موثقة خاصة بالصور المتجاوبة.

أخطاء شائعة

• نسيان sizes مع واصفات w؛ يفترض المتصفح 100vw وقد يجلب أكبر ملف لخانة صغيرة.
• حذف src الاحتياطي من <picture>؛ وهو مخالفة للمواصفة تنبه إليها Google صراحة، كما أنه عنوان URL الذي تفهرسه برامج الزحف.
• عدم تطابق نسبة width/height مع الصورة المقدمة فعلاً؛ وهذا يظل يسبب التغير.
• التحميل الكسول لصورة LCP الرئيسية؛ يؤخر LCP بلا فائدة، فحمّلها فوراً عبر fetchpriority="high".
• إعادة إنشاء عناوين الصور لكل طلب؛ تكسر تخزين Google المؤقت وقاعدة «عنوان URL ثابت» في فهرسة الجوال.
• استخدام <picture> حين تكفي srcset/sizes؛ تعقيد غير لازم، وتقول web.dev إن معظم المواقع لا تحتاج إليه.

موضع هذا الموضوع

هذا شرح معمق للتحجيم والتسليم ضمن محور SEO للصور الأوسع، أي نصف الأداء من SEO للصور، بموازاة معالجة دليل نص alt لنصف بحث الصور. لآليات تغيّر التخطيط كاملة راجع مقالتي عن CLS في Ahrefs؛ أما LCP وfetchpriority واستراتيجية التحميل فهي أعمال مؤشرات أداء الويب الأساسية بواجهة صور.

ملخص الذكاء الاصطناعي

خلاصة مكثفة للنسخة المتقدمة:

• آليتان ضمن عائلة واحدة. srcset/sizes على <img> تعني تبديل الدقة: الصورة نفسها والمتصفح يختار الأنسب بوصفه اقتراحاً. و<picture> تعني التوجيه الفني أو تبديل التنسيق بأمر من المؤلف. تحتاج معظم المواقع إلى srcset/sizes فقط.
• الواصفات: تحتاج واصفات العرض w عملياً إلى sizes للصور المرنة بعرض المحتوى؛ وتناسب واصفات كثافة البكسل x صور الواجهة ثابتة الحجم ولا تحتاج إليها.
• sizes متطلب عملي مع واصفات w لا شرط صحة نحوية: إذا حذفتها يظل الترميز صالحاً لكن المتصفح يفترض 100vw، وغالباً يجلب أكبر ملف بلا داع. وهذا أكثر أخطاء srcset شيوعاً.
• ليست إشارة ترتيب مباشرة. لا يغير الترميز المتجاوب ما تفهرسه Google؛ فهي تفهرس عنوان src والنسخ للتسليم فقط. أبق نص alt وأسماء الملفات والبيانات المنظمة على صورة src الأساسية.
• مكسب LCP: الصور المفرطة الحجم سبب بارز لبطء LCP، والصور المتجاوبة هي إصلاح Lighthouse الموصى به في تدقيق «تحجيم الصور بصورة صحيحة»، الذي يفشل عند فارق 4KiB؛ وتساعد RespImageLint في اختيار srcset/sizes.
• CLS: لا تمنع srcset التغير وحدها؛ اضبط width/height أو aspect-ratio واقرنها بـheight: auto للتخطيطات المرنة.
• لا تستخدم التحميل الكسول لصورة LCP؛ حمّلها فوراً عبر fetchpriority="high" وأبق التبديل أصلياً، لأن Google لا تحمل المحتوى الذي يتطلب تفاعلاً.
• فهرسة الجوال: استخدم نص alt نفسه وعناوين صور ثابتة عبر نقاط التوقف، ولا تنشئ عنواناً جديداً لكل طلب.
• Bing: لا توجد إرشادات مخصصة؛ برر العمل بالأداء وتجربة المستخدم.

الوثائق الرسمية

وثائق المصادر الأولية وإرشادات المطورين.

Google — البحث

• أفضل ممارسات صور Google — ملاحظة srcset، واشتراط src الاحتياطي في <picture>، وإرشاد العنوان نفسه، ومبرر التصميم المتجاوب.
• أفضل ممارسات الفهرسة التي تعطي الأولوية للجوال — نص alt نفسه وعناوين صور ثابتة في الجوال وسطح المكتب؛ وعدم تحميل المحتوى الأساسي كسولاً بعد التفاعل.

Google — web.dev (إرشادات المطورين)

• تعلم: الصور المتجاوبة — كيف تكمل srcset سمة src، وكيف تعمل sizes وشروط الوسائط.
• تعلم: العنصر picture — متى تحتاج <picture>، والتوجيه الفني، والاقتراحات في مقابل الأوامر.
• تحسين تغيّر التخطيط التراكمي — سمات width/height ونسبة الأبعاد وheight: auto للصور المرنة.
• واجهة Fetch Priority API — استخدام fetchpriority="high" لصورة LCP.

أدوات مطوري Chrome / Lighthouse

• تحجيم الصور بصورة صحيحة — التدقيق وعتبة 4KiB وإشارة RespImageLint المرجعية.

MDN

• استخدام الصور المتجاوبة في HTML — مرجع srcset وsizes وواصفات w/x وصياغة <picture>.

اقتباسات من المصدر

تصريحات موثقة من وثائق Google وإرشادات المطورين. وحيث تعرض الصفحة النص، يقفز الرابط مباشرة إلى المقطع المقتبس.

Google — وثائق SEO للصور

• “The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.” (ترجمة) «تتيح سمة srcset تحديد نسخ مختلفة من الصورة نفسها، وخصوصاً لأحجام الشاشات المختلفة». انتقل إلى الاقتباس
• “Designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” (ترجمة) «يؤدي تصميم صفحات متجاوبة إلى تجربة أفضل لأن الناس يصلون إليها عبر أنواع كثيرة من الأجهزة». المصدر
• بشأن ثبات العنوان: “consistently reference the image with the same URL, so that Google can cache and reuse the image.” (ترجمة) «أشر إلى الصورة باستمرار بعنوان URL نفسه كي تتمكن Google من تخزينها وإعادة استخدامها». انتقل إلى الاقتباس

Google — وثائق الفهرسة التي تعطي الأولوية للجوال

• “Make sure that the mobile site has the same alt text for images as the desktop site.” (ترجمة) «تأكد من أن موقع الجوال يحتوي نص alt للصور نفسه الموجود في موقع سطح المكتب». انتقل إلى الاقتباس
• “Don’t use URLs that change every time the page loads for images.” (ترجمة) «لا تستخدم للصور عناوين URL تتغير في كل مرة تُحمّل فيها الصفحة». انتقل إلى الاقتباس

web.dev — srcset في مقابل picture

• “Where the srcset attribute gives suggestions to the browser, the picture element gives commands.” (ترجمة) «حيث تعطي سمة srcset اقتراحات للمتصفح، يعطي العنصر picture أوامر». انتقل إلى الاقتباس

مني — عن إصلاح CLS

• “Reserve the space so that there’s no shift” (ترجمة) «احجز المساحة حتى لا يحدث تغير»، ثم تملؤها الصورة ببساطة. انتقل إلى الاقتباس

أنماط صور متجاوبة جاهزة للنسخ

ثلاثة أنماط تغطي معظم الحالات الواقعية. يحافظ كل منها على src احتياطي وwidth/height صريحتين، وهما إصلاح CLS، وعلى نص alt متطابق.

1. تبديل الدقة — نمط <img srcset> اليومي الذي أعيد استخدامه

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w,
          puppy-2000.jpg 2000w,
          puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

اقرنه بـCSS التالي كي يتغير حجم الصورة بمرونة بلا تغير في التخطيط:

img {
  max-width: 100%;
  height: auto; /* with width/height attributes set, this prevents CLS */
}

2. صورة ثابتة الحجم — واصفات كثافة البكسل (x) من دون حاجة إلى sizes

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  width="200" height="60"
  alt="Company logo" />

3. صورة LCP الرئيسية — تحميل مبكر بأولوية عالية وبديل تنسيق عبر <picture>

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img
    src="hero.jpg"
    width="1200" height="675"
    fetchpriority="high"
    loading="eager"
    alt="Product hero shot" />
</picture>

القواعد المضمنة في هذه الأنماط:

• أبق دائماً <img src> الأخير؛ فهو البديل وعنوان URL الذي تفهرسه Google.
• مع واصفات w، تمثل sizes متطلباً عملياً للاختيار الصحيح؛ وبدونها يظل الترميز صالحاً ويفترض المتصفح 100vw.
• مع واصفات x، احذف sizes.
• لا تضف loading="lazy" إلى صورة LCP في النمط 3؛ فهذا يؤخر LCP، واستخدم بدلاً منه fetchpriority="high".

لتحديد قيم srcset/sizes الصحيحة بدلاً من التخمين، شغل RespImageLint، وهي الإشارة المرجعية التي توصي بها Google، على الصفحة الحية.

أيهما تحتاج فعلاً: srcset/sizes أم picture؟

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

تتوقف معظم المواقع عند الفرع الأول ولا تتجاوز srcset/sizes. استخدم <picture> فقط عندما يجب أن تتغير الصورة نفسها، لا حجمها وحده.

ما الذي لا ينبغي فعله؟

ستة أخطاء عملية تذكرها المقالة، مع سبب الخطأ والإصلاح.

• نسيان سمة sizes مع واصفات w. الخطأ: يفترض المتصفح من دونها أن الصورة تملأ منفذ العرض كله (100vw)، وقد يجلب أكبر مرشح لخانة أصغر كثيراً. افعل بدلاً من ذلك: قرن دائماً srcset ذات واصفات w بقيمة sizes تطابق العرض الفعلي عند كل نقطة توقف.
• حذف <img src> الاحتياطي من <picture>. الخطأ: مخالفة للمواصفة تشير إليها Google صراحة، وهو عنوان URL الذي تفهرسه برامج الزحف وصور Google. افعل: اختم كل <picture> بعنصر <img src="..."> عادي، لا بعناصر <source> وحدها.
• عدم تطابق نسبة width/height مع الصورة المقدمة. تحدد السمات نسبة المساحة المحجوزة، وإذا خالفت الملف الحقيقي يتغير التخطيط بعد التحميل. حافظ على نسبة width/height أو aspect-ratio نفسها في جميع نسخ srcset/<picture>.
• التحميل الكسول لصورة LCP الرئيسية. يؤخر loading="lazy" جلب الصورة التي يقيسها LCP بلا فائدة. حمّلها فوراً عبر fetchpriority="high" ولا تستخدم loading="lazy".
• إعادة إنشاء عناوين الصور مع كل طلب. تكسر تخزين Google المؤقت وقاعدة فهرسة الجوال ضد العناوين المتغيرة. ثبّت عناوين متسقة لكل نسخة.
• استخدام <picture> حين تكفي srcset/sizes. تعقيد غير لازم؛ ابدأ بتبديل الدقة ولا تضف <picture> إلا لقص أو تنسيق مختلف فعلاً.

مشكلات شائعة

مرجع يبدأ بالعرض لمشكلتي الصور المتجاوبة اللتين يواجههما القراء فعلاً.

ما زال التخطيط يتغير (CLS) رغم إعداد srcset

• العرض: ما تزال Lighthouse أو PageSpeed Insights تبلغ عن تغير في تخطيط صورة، أو ترى المحتوى يقفز أثناء التحميل رغم عمل srcset/sizes.
• السبب المرجح: لا تفعل srcset وحدها شيئاً لتغير التخطيط؛ فهي تختار الملف ولا تحدد المساحة. تفتقر الصورة إلى width/height أو aspect-ratio في CSS، فلا يستطيع المتصفح تخصيص المساحة قبل بدء التنزيل ومعرفة الأبعاد.
• الإصلاح والتأكيد: أضف width وheight صريحتين إلى <img> أو اضبط aspect-ratio، واقرنهما بـheight: auto حتى تظل الصورة مرنة. أعد فحص CLS عبر Lighthouse أو CrUX الحي، وتأكد من ثبات الصندوق المحجوز قبل اكتمال التحميل.

تشير Lighthouse إلى «تحجيم الصور بصورة صحيحة» أو تُحمّل صورة مفرطة الحجم

• العرض: يسرد تدقيق Lighthouse «تحجيم الصور بصورة صحيحة» صوراً بوحدات بايت مهدرة، أو يتباطأ الوصول إلى LCP رغم أن الصورة تبدو سليمة.
• السبب المرجح: حجم عرض الصورة أصغر من الملف الفعلي بما لا يقل عن 4KiB؛ وغالباً لا توجد srcset أو تغيب sizes فيفترض المتصفح 100vw ويجلب أكبر مرشح لخانة صغيرة.
• الإصلاح والتأكيد: أضف أو صحح srcset بمرشحين مناسبين، وقيمة sizes تطابق العرض الحقيقي، وشغل RespImageLint بدلاً من التخمين. ثم أعد تدقيق Lighthouse وتأكد من اختفاء الصورة أو هبوط الوفر تحت عتبة 4KiB.

ورقة غش: الواصفات وpicture في مقابل srcset وقواعد CLS/LCP

اختبارات التحقق

اختبارات نجاح أو فشل تؤكد أن تغيير الصور المتجاوبة أصبح فعالاً.

تُشحن الصور بالحجم الصحيح

الاختبار: شغل تدقيق Lighthouse «تحجيم الصور بصورة صحيحة» (Chrome DevTools ← Lighthouse ← Performance، أو PageSpeed Insights) على الصفحة المحدثة. النتيجة المتوقعة: تختفي الصورة التي أصلحتها من القائمة، أو ينخفض وفرها المحتمل تحت عتبة فارق 4KiB. تفسير الفشل: إذا بقيت، فما تزال مرشحات srcset أكبر من حجم العرض، أو أن sizes غائبة أو خاطئة وما يزال المتصفح يفترض 100vw. نافذة المراقبة: فوراً بعد النشر. محفز التراجع: يظل التدقيق يشير إلى الصورة بالوفر نفسه بعد تأكيد تطابق sizes مع العرض الحقيقي.

قيم srcset/sizes مثلى فعلاً

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

هل اختار المتصفح المرشح المتوقع فعلاً؟

الاختبار: نجاح Lighthouse وRespImageLint يؤكد صحة الترميز، لكنه لا يثبت أن المتصفح اختار الملف المقصود عند منفذ عرض معين. حمّل الصفحة عند نقطة التوقف المطلوبة، وافتح DevTools وحدد <img>، ثم افحص خاصية currentSrc في وحدة التحكم، عبر $0.currentSrc في Chrome/Firefox. يقارن مثال MDN نفسه currentSrc باسم الملف المتوقع. طابق ذلك مع تبويب Network لمعرفة الملف المطلوب، وكرر عند نقاط التوقف الضيقة والعريضة ونسبتي بكسل 1x و2x إن حاكيتهما. النتيجة المتوقعة: تطابق currentSrc مرشحاً معقولاً لمنفذ العرض وكثافة البكسل، ويظهر Network أن ذلك الملف وحده جُلب. تفسير الفشل: إذا كان المرشح أكبر أو أصغر من المتوقع، فقد لا تطابق sizes عرض CSS الفعلي أو قد يكون واصف srcset خاطئاً. اختيار المتصفح محدد بالتنفيذ؛ يترك معيار HTML الاختيار الدقيق بين المرشحين الصالحين للمتصفح بحسب الكثافة والتكبير والشبكة، فلا تتوقع نتيجة متطابقة بايتياً بين المتصفحات. نافذة المراقبة: فوراً لكل نقطة توقف بعد النشر. محفز التراجع: تستمر currentSrc في إرجاع مرشح مفرط الحجم عند منفذ ضيق بعد تصحيح sizes.

لا يحدث تغير في التخطيط بسبب الصورة

الاختبار: افحص CLS للصفحة عبر Lighthouse أو بيانات CrUX/PageSpeed Insights الحية. النتيجة المتوقعة: يهبط CLS المنسوب إلى الصورة إلى قرابة الصفر بعد ضبط width/height أو aspect-ratio. تفسير الفشل: يعني التغير المستمر غالباً أن نسبة width/height لا تطابق الصورة الفعلية أو أن السمات مفقودة. نافذة المراقبة: بيانات المختبر فورية، أما بيانات CrUX الميدانية فتحتاج نحو 28 يوماً لتكوين اتجاه موثوق. محفز التراجع: لا يتحسن CLS الميداني بعد 28 يوماً رغم نجاح المختبر؛ فأعد فحص تطابق نسبة الصورة مع الصندوق المحجوز.

اختبر نفسك: الصور المتجاوبة

خمسة أسئلة سريعة عن srcset وsizes و<picture> وتأثير الصور المتجاوبة في SEO. اختر إجابة لكل سؤال ثم تحقق منها.

سجل التغييرات