كيف تستخدم srcset وsizes لتقديم صور مناسبة لكل شاشة؟
شرح عملي للصور المتجاوبة باستخدام 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="وصف مناسب للصورة">الفكرة ليست حفظ هذا السطر حرفيًا، بل فهم أن المتصفح يستطيع اختيار نسخة مناسبة بدل إجباره على تنزيل أكبر ملف.
متى تكون الفكرة مفيدة؟
تفيد خصوصًا في المواقع التي تعرض صورًا كبيرة أو صفحات تحتوي على عدد كبير من الصور. أما الصور الصغيرة جدًا، فقد لا تستحق تعقيد سير العمل من أجل فرق محدود.
أخطاء شائعة
- إنشاء نسخ كثيرة بلا حاجة.
- استخدام قيم sizes لا تطابق التصميم الحقيقي.
- توفير ملفات مختلفة لكن كلها ضخمة.
- نسيان اختبار الهاتف بعد التطبيق.
ابدأ بعدد قليل من الأحجام المنطقية، ثم راقب الملفات التي يختارها المتصفح في أدوات المطور.
كيف يعمل srcset وsizes في الاستخدام الحقيقي؟
الفكرة الأساسية هي توفير أكثر من نسخة من الصورة بأحجام مختلفة، ثم إعطاء المتصفح معلومات عن مساحة العرض المتوقعة. عندها يستطيع اختيار الملف الأقرب لاحتياج الجهاز بدل تحميل نسخة ضخمة للجميع. هذا مفيد عندما يكون الموقع متجاوبًا ويعرض الصورة بأحجام مختلفة على الهاتف والحاسوب.
قيمة هذه الطريقة تظهر عندما تكون الفروق بين الشاشات كبيرة. إذا كانت الصورة تظهر بعرض 360 بكسل على الهاتف وبعرض 900 بكسل على سطح المكتب، فإن نسخة واحدة بعرض 1800 بكسل قد تكون أكبر من الحاجة في الحالتين. تقديم مصادر متعددة يجعل التحميل أكثر كفاءة.
أخطاء شائعة
- إنشاء نسخ كثيرة بلا حاجة، ما يزيد التخزين والإدارة.
- كتابة sizes لا تعكس التصميم الفعلي.
- استخدام نسخة ضخمة باعتبارها حلًا لكل الشاشات.
- نسيان اختبار النتيجة على هاتف حقيقي.
ابدأ بعدد صغير من الأحجام المنطقية، ثم راقب الأداء والاستخدام الفعلي. الهدف ليس تعقيد HTML، بل تقليل البيانات التي لا يحتاجها الزائر.
كيف تختار الأحجام التي توفرها؟
لا تحتاج عادةً إلى عشرات النسخ لكل صورة. اختر عددًا محدودًا يغطي أحجام العرض الفعلية في تصميمك، مثل نسخة للهاتف ونسخة متوسطة ونسخة للشاشات الأكبر. إذا كان التصميم يعرض الصورة بعرض 360 بكسل على الهاتف، فلا فائدة من إرسال ملف بعرض 2000 بكسل لذلك الجهاز لمجرد وجوده.
اختبر الاختيار من أدوات المطور
بعد إضافة srcset وsizes، افتح أدوات المطور في المتصفح وراقب طلب الصورة على أكثر من عرض شاشة. الهدف هو التأكد أن المتصفح يحصل على نسخة مناسبة بدل تحميل أكبر ملف دائمًا. إذا لاحظت أن الهاتف يحمّل النسخة الكبيرة، راجع قيم sizes وأحجام الملفات المتاحة.