34. الصور المتجاوبة (srcset و <picture>)

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

34.1 خاصية srcset (تبديل الدقة)

تُضاف خاصية srcset إلى وسم <img> القياسي، وتسمح لك بتحديد قائمة من الصور وإخبار المتصفح بحجم (عرض) كل صورة. يقرر المتصفح بعد ذلك أفضل صورة بناءً على حجم شاشة الجهاز.

html

• تشير 400w و 800w و 1200w إلى العرض الفعلي للصور.

34.2 عنصر <picture> (الاتجاه الفني)

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

html