<img> - عنصر الصورة: • عنصر فارغ (لا وسم ختامي) • src: مسار الصورة (إلزامي) • alt: النص البديل (إلزامي للـ SEO والوصولية) — وصف ما في الصورة • width/height: الأبعاد (يمنع Layout Shift) • loading="lazy": تحميل الصور عند الحاجة (يسرع الصفحة) • decoding="async": فك ترميز غير متزامن
<map> و <area> - خرائط الصور التفاعلية: تتيح ربط مناطق مختلفة من صورة واحدة بروابط مختلفة. مفيدة لخرائط جغرافية، مخططات، صور منتجات معقدة.
أشكال المنطقة: • shape="rect": مستطيل — coords="x1,y1,x2,y2" • shape="circle": دائرة — coords="cx,cy,radius" • shape="poly": مضلع — coords="x1,y1,x2,y2,..."
| 1 | <!-- صورة أساسية مُحسَّنة --> |
| 2 | <img |
| 3 | src="/images/product.jpg" |
| 4 | alt="لابتوب احترافي للمبرمجين" |
| 5 | width="800" |
| 6 | height="600" |
| 7 | loading="lazy" |
| 8 | decoding="async" |
| 9 | > |
| 10 | |
| 11 | <!-- خريطة صورة تفاعلية --> |
| 12 | <img src="/images/world-map.jpg" alt="خريطة العالم" usemap="#worldmap"> |
| 13 | |
| 14 | <map name="worldmap"> |
| 15 | <area shape="rect" coords="100,50,200,150" |
| 16 | href="/africa" alt="أفريقيا" title="أفريقيا"> |
| 17 | <area shape="circle" coords="350,200,80" |
| 18 | href="/europe" alt="أوروبا" title="أوروبا"> |
| 19 | <area shape="poly" coords="400,100,500,100,480,200,420,200" |
| 20 | href="/asia" alt="آسيا" title="آسيا"> |
| 21 | </map> |
مثال 1: معرض صور محسّن
| 1 | <section class="gallery"> |
| 2 | <h2>معرض المنتجات</h2> |
| 3 | |
| 4 | <!-- صور محسّنة للـ SEO والأداء --> |
| 5 | <figure> |
| 6 | <img |
| 7 | src="/products/laptop.webp" |
| 8 | alt="لابتوب Dell XPS 15 - شاشة 15 بوصة عالية الدقة" |
| 9 | width="400" |
| 10 | height="300" |
| 11 | loading="lazy" |
| 12 | > |
| 13 | <figcaption>Dell XPS 15 — أفضل لابتوب للمبرمجين 2024</figcaption> |
| 14 | </figure> |
| 15 | |
| 16 | <figure> |
| 17 | <img |
| 18 | src="/products/keyboard.webp" |
| 19 | alt="لوحة مفاتيح ميكانيكية RGB بالأحمر والأزرق" |
| 20 | width="400" |
| 21 | height="300" |
| 22 | loading="lazy" |
| 23 | > |
| 24 | <figcaption>لوحة مفاتيح ميكانيكية للمبرمجين</figcaption> |
| 25 | </figure> |
| 26 | </section> |