في درس متقدم ضمن كورس تعلم HTML من الصفر، هنتحدث عن استخدام وسم <picture> لتحسين تجربة عرض الصور على الويب—خاصة لما تكون بتتعامل مع أجهزة متنوعة من موبايل لسطح المكتب.
أهمية وسم <picture>
بدل ما تستخدم وسم <img> فقط، وسم <picture> بيسمحلك تحدد ملفات صور بدقة مختلفة أو تنسيقات متعددة زي webp وjpeg، وتتحكم في متى تظهر كل نسخة عن طريق خصائص media وsrcset.
كيف نكوّن وسم picture؟
لما تبدأ تكتب ``, داخله بتحط وسوم `` لكل نسخة. مثلاً:
النسخة الأفضل (webp) بدقة عالية.
نسخة webp لصغيرة الشاشة.
صيغ تقليدية (jpeg أو png) كخيار أساسي.
وفي الآخر، بتكتب `` بنسخة احتياطية مع `alt`، علشان المتصفحات اللي ممكن ما تدعمش `` أو التنسيقات الجديدة.
استخدام media & srcset
في كل source تقدر تحدد:
media زي `(min-width:600px)` أو `media="(max-width:599px)"` علشان تستخدم صورة معينة حسب عرض الجهاز.
srcset برابط الصورة البدقة المناسبة.
يعني لو الشاشة كبيرة، هيتحمّل ملف أكبر، ولو صغيرة، بيتحمّل ملف أخف وأسرع.
لو المتصفح مش بيفهم ``، في `` هيظهر الخطة الأخيرة كصورة افتراضية. مهم جدًا تكتب `alt` مناسب للصورة وموضوعها.
ملخص سريع
وسم `` بيسمح بتعدد نسخ الصورة.
الوسوم `` بتحدد متى يظهر كل نسخة.
تستخدم `media` لتحديد حجم الشاشة المطلوبة.
تستخدم `srcset` لتحديد نسخ بدقة متعددة.
في الآخر `` كخطة نسخ احتياطي.
الهدف: تحسين الأداء وتجربة المستخدم.
التحديات والنصائح
لازم تخلي النسخ متجانسة من حيث الأبعاد والنسبة، علشان الشكل يبقى ثابت عند التبديل.
اختيار دقيق لـ media queries بيساعد إن النسخة المناسبة تظهر لكل جهاز.
استخدم أدوات ضغط للصور قبل رفعها علشان توفر أكبر قدر من البيانات.
تأكد إن `` موجودة، حتى لو `` مدعوم، علشان تحسين الوصول (accessibility).
الخاتمة
وبكده نكون عملنا جولة كاملة في طريقة استخدام وسم <picture> من ضمن "كورس تعلم HTML من الصفر"، وفهمنا إزاي الدمج بين `` و `media` و `srcset` يخلي الصور في موقعك سريعة، خفيفة ومتوافقة مع أي جهاز. التقنية دي بمثابة خطوة احترافية لو بتشتغل في مجالات الويب الحديثة.
لو استفدت من الدرس، شاركه مع أصدقائك اللي بيشتغلوا في تصميم أو تطوير ويب، وتأكد إنك متابع علشان توصلك باقي الدروس. أستنى منك تنبيهي بإسم الدرس اللي يهمك بعدها، وأنا جاهز 👊
