الصور المتجاوبة: دليل srcset وsizes العملي
ملف واحد بعرض كبير لكل الأجهزة يعني أن الهاتف يحصل على بيانات أكثر مما يحتاج. هذا الدليل يشرح كيف تدع المتصفح يختار.
ما المشكلة في صورة واحدة للجميع؟
إذا استخدمت ملفًا واحدًا بعرض كبير لكل الأجهزة، قد يحصل الهاتف على بيانات أكثر مما يحتاج فعلًا. الصور المتجاوبة تسمح للمتصفح باختيار نسخة مناسبة من مجموعة ملفات مُعدّة مسبقًا، بدل إجباره على تنزيل أكبر ملف دائمًا.
ما وظيفة srcset؟
توفّر أكثر من نسخة للصورة بأحجام مختلفة داخل خاصية srcset، ويقرأ المتصفح الخيارات المتاحة ويختار المصدر المناسب للظروف الحالية.
وما وظيفة sizes؟
خاصية sizes تساعد المتصفح على فهم العرض المتوقع للصورة داخل التصميم عند أحجام شاشات مختلفة. كلما كانت هذه المعلومة أدق، كان اختيار المتصفح أكثر منطقية.
مثال مبسّط
<img src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="وصف مناسب للصورة">الفكرة ليست حفظ هذا السطر حرفيًا، بل فهم أن المتصفح يستطيع اختيار نسخة مناسبة بدل إجباره على تنزيل أكبر ملف دائمًا. هذا مفيد خصوصًا عندما تكون الفروق بين الشاشات كبيرة — صورة تظهر بعرض 360 بكسل على الهاتف و900 بكسل على سطح المكتب لا تحتاج نسخة واحدة بعرض 1800 بكسل للحالتين.
كيف تختار الأحجام التي توفرها؟
لا تحتاج عادة عشرات النسخ لكل صورة. اختر عددًا محدودًا يغطي أحجام العرض الفعلية في تصميمك — نسخة للهاتف، نسخة متوسطة، ونسخة للشاشات الأكبر. إذا كان التصميم يعرض الصورة بعرض 360 بكسل على الهاتف، فلا فائدة من إرسال ملف بعرض 2000 بكسل لذلك الجهاز لمجرد وجوده.
اختبر الاختيار من أدوات المطور
بعد إضافة srcset وsizes، افتح أدوات المطور في المتصفح وراقب طلب الصورة على أكثر من عرض شاشة. الهدف التأكد أن المتصفح يحصل على نسخة مناسبة بدل تحميل أكبر ملف دائمًا. إذا لاحظت أن الهاتف يحمّل النسخة الكبيرة، راجع قيم sizes وأحجام الملفات المتاحة.
أخطاء شائعة
- إنشاء نسخ كثيرة بلا حاجة، ما يزيد التخزين وتعقيد الإدارة.
- كتابة
sizesلا تعكس التصميم الفعلي للصفحة. - استخدام نسخة ضخمة واحدة باعتبارها حلًا لكل الشاشات.
- نسيان اختبار النتيجة على هاتف حقيقي بعد التعديل.
ابدأ بعدد صغير من الأحجام المنطقية، ثم راقب الأداء والاستخدام الفعلي. الهدف ليس تعقيد HTML، بل تقليل البيانات التي لا يحتاجها الزائر.