الصور والاشكال والصور المتجاوبة

اضافة الصور الى صفحتك

الصور جزء اساسي من الويب. عنصر <img> هو وسم ذاتي الاغلاق يدمج صورة في صفحتك. يتطلب سمتين اساسيتين: src (مسار او عنوان ملف الصورة) و alt (النص البديل الذي يصف الصورة). سمة alt ليست اختيارية -- فهي ضرورية لامكانية الوصول وتحسين محركات البحث وللحالات التي تفشل فيها الصورة في التحميل.

<img src="images/sunset.jpg" alt="غروب ذهبي فوق المحيط مع غيوم برتقالية وبنفسجية">

<!-- صورة من عنوان خارجي -->
<img src="https://example.com/photos/mountain.jpg" alt="قمة جبل مكللة بالثلوج امام سماء زرقاء صافية">

لاحظ ان نص alt وصفي ومحدد. بدلا من كتابة "صورة غروب"، صف ما تظهره الصورة فعلا. تقرا قارئات الشاشة هذا النص بصوت عال للمستخدمين ضعاف البصر، لذا فان جودة النص البديل تحدث فرقا حقيقيا.

تنسيقات الصور: اختيار التنسيق المناسب

ليست جميع تنسيقات الصور تخدم نفس الغرض. اختيار التنسيق الصحيح يؤثر على سرعة تحميل صفحتك وجودتها المرئية وتجربة المستخدم. اليك التنسيقات التي يجب ان يعرفها كل مطور ويب:

JPEG (JPG) هو الافضل للصور الفوتوغرافية والصور ذات الالوان الكثيرة. يستخدم ضغطا مع فقدان مما يعني فقدان بعض الجودة لتقليل حجم الملف. PNG يدعم الشفافية وهو مثالي للشعارات والايقونات والصور ذات الحواف الحادة او النصوص. يستخدم ضغطا بدون فقدان فتبقى الجودة محفوظة لكن الملفات تكون اكبر. GIF يدعم الرسوم المتحركة البسيطة ومحدود بـ 256 لونا مما يجعله غير مناسب للصور الفوتوغرافية. SVG هو تنسيق متجه يتغير حجمه لاي مقاس دون فقدان الجودة وهو مثالي للايقونات والشعارات والرسوم التوضيحية. WebP هو تنسيق حديث طورته Google يوفر ضغطا متفوقا لكل من الصور المضغوطة مع فقدان وبدون فقدان وينتج ملفات اصغر بنسبة 25-35% من JPEG او PNG بجودة مماثلة.

تحديد العرض والارتفاع لمنع انزياح التخطيط

عندما يحمل المتصفح صفحتك فانه لا يعرف ابعاد صورك في البداية. كلما تحمل صورة ينزاح محتوى الصفحة لافساح المجال مما يخلق قفزة بصرية مزعجة تعرف بالانزياح التراكمي للتخطيط (CLS). هذا يضر بتجربة المستخدم ودرجة مقاييس الويب الاساسية. الحل بسيط: حدد دائما سمتي width و height في صورك.

<!-- حدد الابعاد دائما لحجز المساحة -->
<img src="product.jpg" alt="سماعات لاسلكية حمراء" width="800" height="600">

<!-- اجعلها متجاوبة مع CSS -->
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

سمتا width و height تخبران المتصفح بنسبة العرض الى الارتفاع للصورة حتى يتمكن من حجز المساحة الصحيحة قبل تحميل الصورة. خاصيتا CSS max-width: 100% و height: auto تضمنان ان الصورة لا تزال تتغير حجمها بشكل متجاوب داخل حاويتها.

عنصرا figure و figcaption

عندما تحتاج صورة الى تعليق توضيحي او تمثل جزءا مستقلا من المحتوى يُشار اليه من النص الرئيسي، غلفها في عنصر <figure>. عنصر <figcaption> بداخله يوفر تعليقا مرئيا مرتبطا دلاليا بالصورة. هذا افضل من وضع فقرة اسفل الصورة لان التقنيات المساعدة تفهم ان التعليق يصف الشكل.

<figure>
  <img src="chart-q3-sales.png" alt="مخطط اعمدة يظهر زيادة مبيعات الربع الثالث من 40 الف في يوليو الى 65 الف في سبتمبر" width="700" height="400">
  <figcaption>شكل 1: اداء مبيعات الربع الثالث حسب الشهر مع زيادة بنسبة 62% من يوليو الى سبتمبر.</figcaption>
</figure>

عنصر <figure> لا يقتصر على الصور. يمكنه ايضا تغليف مقاطع الكود والمخططات والاقتباسات او اي محتوى يُشار اليه كوحدة. يمكن ان يظهر <figcaption> كاول او اخر عنصر فرعي داخل الشكل.

الصور المتجاوبة مع srcset و sizes

الاجهزة المختلفة لها احجام شاشات ودقات مختلفة. تقديم صورة ضخمة بعرض 2000 بكسل لهاتف محمول يهدر عرض النطاق الترددي ويبطئ الصفحة. سمة srcset تتيح لك توفير نسخ متعددة من نفس الصورة بعروض مختلفة وسمة sizes تخبر المتصفح بعرض عرض الصورة عند احجام مختلفة لنافذة العرض. يختار المتصفح بعدها الصورة الانسب تلقائيا.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="مطور يعمل على مكتب واقف مع شاشتين"
  width="1600"
  height="900">

سمة srcset تسرد كل ملف صورة وعرضه الفعلي بالبكسل باستخدام واصف w. سمة sizes تستخدم شروط الوسائط لاخبار المتصفح: على الشاشات حتى 600 بكسل عرضا تملا الصورة عرض نافذة العرض بالكامل، وعلى الشاشات حتى 1200 بكسل تملا نصف النافذة، وعلى الشاشات الاكبر تعرض بعرض 800 بكسل. يجمع المتصفح هذه المعلومات مع نسبة بكسل الجهاز لاختيار الملف الامثل.

عنصر picture للتوجيه الفني

بينما تسمح srcset للمتصفح بالاختيار بين احجام مختلفة لنفس الصورة، يمنحك عنصر <picture> تحكما كاملا في الصورة التي تظهر عند نقاط توقف مختلفة. يسمى هذا التوجيه الفني -- قد ترغب في عرض صورة افقية واسعة على سطح المكتب لكن صورة مقصوصة مقربة على الهاتف.

<picture>
  <source media="(min-width: 1024px)" srcset="banner-wide.webp" type="image/webp">
  <source media="(min-width: 1024px)" srcset="banner-wide.jpg" type="image/jpeg">
  <source media="(min-width: 640px)" srcset="banner-medium.webp" type="image/webp">
  <source media="(min-width: 640px)" srcset="banner-medium.jpg" type="image/jpeg">
  <source srcset="banner-mobile.webp" type="image/webp">
  <img src="banner-mobile.jpg" alt="فريق يتعاون حول لوح ابيض في مكتب حديث" width="1200" height="600">
</picture>

يقيم المتصفح كل عنصر <source> من الاعلى الى الاسفل ويستخدم اول عنصر يطابق استعلام الوسائط والنوع المدعومين. عنصر <img> في النهاية يعمل كبديل للمتصفحات التي لا تدعم عنصر <picture>. يتيح لك هذا النمط ايضا تقديم WebP للمتصفحات المدعومة مع بديل JPEG.

التحميل الكسول للصور

الصفحات التي تحتوي على صور كثيرة يمكن ان تكون بطيئة التحميل اذا جلبت كل صورة فورا. سمة loading="lazy" تخبر المتصفح بتاجيل تحميل الصورة حتى تكون على وشك الدخول في نافذة العرض. هذا يحسن وقت تحميل الصفحة الاولي بشكل كبير خاصة في الصفحات الغنية بالصور مثل المعارض وقوائم التجارة الالكترونية.

افضل ممارسات النص البديل

كتابة نص بديل فعال هو متطلب لامكانية الوصول ومهارة في ان واحد. النص البديل الجيد يصف محتوى الصورة ووظيفتها بايجاز. للصور المعلوماتية صف ما تظهره الصورة في جملة او جملتين. للصور الوظيفية مثل الازرار والروابط صف الاجراء بدلا من المظهر. للصور التزيينية التي لا تضيف معلومات مثل الفواصل المرئية وانماط الخلفية استخدم سمة alt فارغة (alt="") لاخبار قارئات الشاشة بتخطيها كليا.

تجنب بدء النص البديل بعبارة "صورة" او "صورة لـ" لان قارئات الشاشة تعلن بالفعل ان العنصر صورة. لا تترك سمة alt مفقودة ابدا لان قارئات الشاشة ستقرا حينها اسم الملف وهو مربك وغير مفيد.