<picture>: عنصر PICTURE
آخر تحديث: 2026-10-13
<picture>عنصر PICTURE
يوفر مصادر صور متعددة لـ img، ليختار المتصفح الأفضل حسب منفذ العرض أو الدقة وغيرها.
| الفئة | الروابط والوسائط |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </picture> وسم |
| الحالة | قياسي |
📝 البنية
<picture>مصادر الصور</picture>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <picture> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： يجب أن يحتوي picture على img كاحتياطي؛ source يختار فقط، والصورة المعروضة دائمًا هي img.
❓ الأسئلة الشائعة
Qما الفرق بين picture و img؟
A
<picture> «منتقي الصيغة/القص للصورة»: يضم عدة <source> وصورة <img> احتياطية، فيختار المتصفح المورد الأمثل حسب الشروط (صيغة أحدث، قص مختلف). أما img فتحمل موردًا واحدًا فقط. وانتبه: picture نفسه لا يُعرض، والتبديل الفعلي يجري على img.Qكيف يوفر picture بديل WebP؟
Asource للصيغة الجديدة وimg احتياطًا للقديمة:
<picture><source type='image/webp' srcset='a.webp'><img src='a.jpg' alt='…'></picture>. المتصفح الداعم لـ WebP يختار source، وغير الداعم يسقط تلقائيًا إلى jpg في img.Qكيف تستخدم سمة media في picture؟
Aاكتب استعلام وسائط على source لتحقيق «قص مختلف لكل حجم شاشة»:
<source media='(max-width: 600px)' srcset='small.jpg'>. يقدَّم source المطابق للشرط؛ وتُختبر مصادر source متعددة بالترتيب فيؤخذ أول مطابق، والاحتياط الأعظم هو img ذاتها.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
