الصور المتجاوبة في HTML: srcset وsizes وpicture

اختيار الصور المتجاوبة باستخدام srcset وsizes وpicture

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

كيف تنشئ مجموعة ملفات مفيدة؟

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

تجنب تأخير الصورة الرئيسية

إذا كانت الصورة في الجزء المرئي الأول أو مرشحة لتكون عنصر LCP، فلا تضف loading="lazy" بصورة عمياء. راقب ترتيب اكتشافها، وتأكد من أن srcset لا يختار ملفًا ضخمًا بسبب قيمة sizes غير دقيقة. أما الصور البعيدة عن الجزء الأول فقد تستفيد من التحميل الكسول لتقليل البيانات المنقولة عند فتح الصفحة.

اختبارات قبل النشر

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

راجع مرجع img في MDN ودليل الصور الوصفية في web.dev لتطبيق خيارات المصدر بصورة صحيحة.

تشخيص اختيار الصورة غير المناسبة في المتصفح

إذا حمّل المتصفح صورة أكبر من اللازم، فتحقق من قيمة sizes أولًا، ثم من عروض الملفات المتاحة في srcset. قد تجعل قيمة sizes غير الدقيقة المتصفح يتوقع حاوية أوسع مما تظهر عليه فعليًا. وإذا كان هناك قص مختلف بين الهاتف والحاسوب، فقد يكون picture مع media أو مصدر بديل أكثر ملاءمة من مجموعة أحجام فقط.

تأكد من الملفات الفعلية

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

الصور الرئيسية والصور الزخرفية

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

مراجعة سريعة

• اختبر srcset وsizes على أكثر من عرض.
• تحقق من جودة الصورة وحجمها في كل نسخة.
• ثبت الأبعاد لتقليل تحرك التخطيط.
• تأكد من وجود alt مناسب وعدم حشو الكلمات المفتاحية.

راجع مرجع picture في MDN ودليل الصور المتجاوبة في web.dev.

الصور المتجاوبة وإمكانية الوصول

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

لا تخلط بين alt وcaption

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

راجع تأثير الصورة على التخطيط

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

مرجع إضافي: دليل WAI للصور ودليل الصور في web.dev.

اختيار الصورة المناسبة لكل شاشة دون إهدار البيانات

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

فرّق بين تغيير الحجم والتوجيه الفني

يكون srcset مناسبًا غالبًا عندما تختلف دقة الملف مع بقاء الصورة نفسها، بينما يفيد picture عندما تحتاج إلى نسخة مختلفة مثل قصاصة أقرب للموضوع على الهاتف أو صيغة بديلة. لا تنشئ عشرات النسخ من دون استراتيجية؛ حدد أحجامًا متوافقة مع نقاط العرض الفعلية ومحتوى الصفحة. تأكد من أن كل عنوان داخل srcset يشير إلى ملف موجود، وأن الأوصاف الرقمية تتوافق مع أبعاد الملف الحقيقية.

حافظ على الاستقرار البصري

حدد width وheight أو نسبة أبعاد واضحة حتى يعرف المتصفح المساحة التي سيحجزها قبل تحميل الصورة. استخدم object-fit عندما تحتاج إلى ملاءمة الصورة داخل إطار، لكن راجع القصاصة حتى لا تختفي المعلومة الأساسية. الصورة الرئيسية قد تحتاج إلى أولوية تحميل أعلى من الصور أسفل الصفحة؛ لا تستخدم loading="lazy" لكل الصور بصورة آلية.

اجمع الأداء والوصولية

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

مرجعان عمليان: دليل MDN للصور المتجاوبة ودليل web.dev للصور. استخدم بيانات الأداء الفعلية لتحديد أحجام الملفات بدل الاعتماد على تقديرات عامة.

تدقيق الصور المتجاوبة قبل الإطلاق

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

تحقق من المحتوى البديل والثبات

تأكد من أن كل مصدر بديل موجود وأن المتصفح يستطيع الرجوع إلى src الأساسي عند عدم دعم صيغة معينة. حدد الأبعاد أو نسبة العرض إلى الارتفاع لتقليل تغير التخطيط أثناء التحميل. راجع النص البديل بحسب سياق الصورة، واستخدم caption عندما يضيف تفسيرًا أو مصدرًا، لا كبديل عن alt.

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