<picture> يتيح تقديم صور مختلفة حسب: • حجم الشاشة (responsive images) • دعم صيغ الصور (WebP, AVIF, JPEG) • وضع اللون (Dark/Light mode)
كيف يعمل: 1. المتصفح يفحص الـ <source> عناصر بالترتيب 2. يختار أول source تنطبق شروطه 3. إذا لم ينطبق أي منها يستخدم <img> كـ fallback
أنواع media في source: • media="(max-width: 768px)": حجم الشاشة • type="image/webp": نوع الصورة
فوائد استخدام picture: ✅ أداء أسرع (صور أصغر للموبايل) ✅ دعم صيغ حديثة مع fallback ✅ توفير bandwidth للمستخدمين
| 1 | <!-- صور متجاوبة حسب حجم الشاشة --> |
| 2 | <picture> |
| 3 | <source media="(max-width: 480px)" srcset="/images/hero-mobile.webp"> |
| 4 | <source media="(max-width: 1024px)" srcset="/images/hero-tablet.webp"> |
| 5 | <img src="/images/hero-desktop.jpg" alt="صورة الهيرو الرئيسية" width="1920" height="1080"> |
| 6 | </picture> |
| 7 | |
| 8 | <!-- دعم WebP مع fallback لـ JPEG --> |
| 9 | <picture> |
| 10 | <source srcset="/images/photo.avif" type="image/avif"> |
| 11 | <source srcset="/images/photo.webp" type="image/webp"> |
| 12 | <img src="/images/photo.jpg" alt="صورة المنتج" width="800" height="600"> |
| 13 | </picture> |
مثال 1: صورة بطل متجاوبة كاملة
| 1 | <!-- صورة بطل (Hero) محسّنة بالكامل --> |
| 2 | <picture> |
| 3 | <!-- AVIF: أحدث صيغة وأكثرها كفاءة --> |
| 4 | <source |
| 5 | srcset="/hero-480.avif 480w, /hero-800.avif 800w, /hero-1200.avif 1200w" |
| 6 | sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px" |
| 7 | type="image/avif" |
| 8 | > |
| 9 | <!-- WebP: مدعومة من 95% من المتصفحات --> |
| 10 | <source |
| 11 | srcset="/hero-480.webp 480w, /hero-800.webp 800w, /hero-1200.webp 1200w" |
| 12 | sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px" |
| 13 | type="image/webp" |
| 14 | > |
| 15 | <!-- JPEG: fallback لكل المتصفحات --> |
| 16 | <img |
| 17 | src="/hero-1200.jpg" |
| 18 | alt="منصة تعلم البرمجة بالعربي — ابدأ رحلتك اليوم" |
| 19 | width="1200" |
| 20 | height="630" |
| 21 | fetchpriority="high" |
| 22 | > |
| 23 | </picture> |