شرح صفوف ومحتوى الفقرة
يسمح عنصر <picture> للمتصفح بعرض صور مختلفة بناءً على شروط مثل عرض نافذة العرض ودعم التنسيق. شرط العرض لا يحدد نوع الجهاز؛ قد تكون نافذة كمبيوتر ضيقة مثل نافذة هاتف.
عنصر <picture> عبارة عن حاوية تحتوي على:
- عدد غير محدود من عنصر <source>، حيث نضع بداخله مسار الصورة باستخدام خاصية [srcset] وحجم الشاشة باستخدام media query في لغة css عبر خاصية [media].
- عنصر img واحد مطلوب في النهاية، يحمل alt وخصائص العرض، ويقدم مصدرًا احتياطيًا عندما لا يطابق أي source شروط الاختيار. يختار المتصفح أول source مناسب بحسب media وtype وsrcset.
حالات استخدام عنصر <picture>:
- سرعة التحميل bandwidth: ينبغي تحديد صورة مناسبة لكل جهاز لتمكين المتصفح من عرض الصور بشكل سريع. ليس من المنطقي عرض صور كبيرة على الهاتف، لذلك يجب تحديد الصور المناسبة.
- دعم التنسيقات format support: بعض الأجهزة أو المتصفحات لا تدعم أنواعًا معينة من ملفات الصور. باستخدام عنصر <picture>, يمكنك توفير نفس الصورة بعدة تنسيقات مختلفة.
Picture Element
يحدد عنصر <picture> مثالاً لثلاث صور للشاشات: الأولى عندما يكون عرض نافذة العرض 700px فأكثر، والثانية من 450px إلى أقل من 700px، والافتراضية عندما يكون العرض أقل من 450px. ترتيب source يؤثر في الاختيار.
HTML
<picture>
<source media="(min-width: 700px)" srcset="https://www.closetag.com/images/photo3.jpg">
<source media="(min-width: 450px)" srcset="https://www.closetag.com/images/photo4.jpg">
<img src="https://www.closetag.com/images/photo6.jpg" alt="Stones, the Eiffel Tower, or a beach swing, selected for the viewport width" style="width:50%;height:auto">
</picture>