وسم الصور المتجاوبة <picture>

وسم picture يقدّم نسخًا مختلفة من الصورة حسب حجم الشاشة أو دعم الصيغ — WebP للحديث وJPG للقديم بلا جافاسكريبت.

مدير أذكى لوسم img: يلفّه مع مجموعة بدائل source، والمتصفح يختار أول مصدر يناسبه. حالتا استخدامه الذهبيتان: تقديم الصيغ الحديثة الموفرة (AVIF/WebP) مع بديل JPG مضمون، و«الاتجاه الفني» — قصّة مربعة للجوال وعريضة للشاشات الكبيرة عبر media.

قاعدة البناء الصارمة: source بالترتيب من الأفضل للأعم، وimg الاحتياطي أخيرًا دائمًا — وهو من يحمل alt.

الصياغة

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="الوصف">
</picture>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<picture>
  <source media="(max-width: 500px)" srcset="https://placehold.co/400x400/7c5cff/white?text=جوال">
  <img src="https://placehold.co/700x300/22d3ee/white?text=شاشة+واسعة" alt="صورة تتغير حسب عرض الشاشة" style="max-width:100%; border-radius:10px">
</picture>
<p style="font-size:13px; color:#666">ضيّق نافذة المعاينة لأقل من 500px لترى النسخة الأخرى.</p>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
type (على source)	صيغة المصدر — المتصفح يتخطى ما لا يدعمه
media (على source)	شرط عرض كاستعلامات CSS — أساس الاتجاه الفني
srcset	ملف المصدر (أو عدة كثافات 1x/2x)

💡 نصائح عملية

مجرد مقاسات مختلفة لنفس الصورة؟ srcset/sizes على img وحده يكفي — picture للصيغ والقصّات
alt يعيش على img الداخلي — لا على picture

⚠️ أخطاء شائعة

نسيان img الاحتياطي — بعض البيئات تعرض لا شيء
ترتيب source من الأعم للأفضل — المتصفح يأخذ أول مطابق فيفوته الأفضل

وسوم ذات صلة

<img> وسم الصور <video> وسم الفيديو

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs