7 الفصل الثالث: الصور والوسائط المتعددة

Byahmed nabel Ahmed Nabel - Html

تمام! هنبدأ مع بعض في الفصل الثالث ونتعلم إضافة الصور والوسائط المتعددة في HTML. هنتناول وسم <img> وخصائصه مثل src و**alt**، وهنحكي كمان عن كيفية تحسين أداء الصور على الويب.

الفصل الثالث: الصور والوسائط المتعددة

1. إضافة الصور

الصور تُعد من العناصر الأساسية في تصميم صفحات الويب. في HTML، يتم استخدام وسم <img> لإضافة الصور إلى صفحاتك.

1.1. وسم <img> وخصائصه

الوسم <img> هو وسم يُستخدم لإدراج الصور داخل صفحة الويب. يختلف هذا الوسم عن باقي الوسوم لأنه لا يحتاج إلى وسم إغلاق. يتم تحديد الصورة باستخدام خاصية src، ويتم توفير نص بديل باستخدام خاصية alt.

1.1.1. خاصية src

  • src: هي الخاصية التي تحدد مصدر الصورة (عنوان الصورة).
  • يمكن أن يكون src مسارًا محليًا أو رابطًا إلى صورة عبر الإنترنت.

مثال:

<img src="images/photo.jpg" alt="صورة جميلة">

في المثال ده:

  • src="images/photo.jpg": يُحدد مسار الصورة الموجودة في مجلد images.
  • alt="صورة جميلة": يُحدد النص البديل في حالة لم تتمكن الصورة من التحميل.

1.1.2. خاصية alt

  • alt: هي خاصية تُستخدم لتوفير نص بديل يظهر إذا كانت الصورة غير موجودة أو إذا كانت الصفحة قد قرأتها برامج قراءة الشاشة للمكفوفين.
  • من الجيد دائمًا توفير خاصية alt للوصولية.

مثال:

<img src="images/logo.png" alt="شعار الموقع">

في هذا المثال، إذا لم يتم تحميل الصورة logo.png، سيظهر النص “شعار الموقع” بدلاً منها.

1.2. تحسين أداء الصور على الويب

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

1.2.1. استخدام الصيغ المناسبة

  • JPEG: يستخدم في الصور الفوتوغرافية والصور التي تحتوي على الكثير من الألوان. يعتبر خيارًا جيدًا لأن حجم الملف يكون صغيرًا.
  • PNG: مناسب للصور التي تحتوي على خلفيات شفافة، ولكن حجم الملف قد يكون أكبر مقارنة بـ JPEG.
  • WebP: صيغة حديثة تدعم ضغط عالي للصور مع الحفاظ على الجودة، وتُعتبر واحدة من أفضل الصيغ.
  • SVG: يُستخدم للرسومات التوضيحية والرموز (Icons) التي يمكن تكبيرها بدون فقدان الجودة.

مثال لاستخدام صورة بصيغة WebP:

<img src="images/photo.webp" alt="صورة رائعة">

1.2.2. تقليص حجم الصورة

يمكنك تقليص حجم الصورة باستخدام أدوات مثل:

  • ImageOptim (لـ Mac)
  • TinyPNG (أداة أونلاين)
  • Squoosh (أداة أونلاين)

استخدام هذه الأدوات يساعد في تقليص حجم الصور بدون التأثير الكبير على الجودة.

1.2.3. تحميل الصور عند الحاجة (Lazy Loading)

تُعد Lazy Loading من الطرق الجيدة لتحسين أداء الصفحة، حيث يتم تحميل الصور فقط عندما تكون مرئية على الشاشة.

  • يمكنك استخدام خاصية loading="lazy" في الوسم <img> لجعل الصور تُحمّل فقط عند الوصول إليها في الصفحة.

مثال:

<img src="images/photo.jpg" alt="صورة جميلة" loading="lazy">

1.2.4. تقليل الأبعاد (Resize Images)

تأكد من أن الأبعاد (العرض والارتفاع) للصورة تناسب المكان الذي ستظهر فيه في الصفحة. لا تضع صورًا كبيرة جدًا في أماكن صغيرة، حيث سيؤدي ذلك إلى تحميل صورة أكبر مما يحتاجه المستخدم.

مثال:

<img src="images/photo.jpg" alt="صورة صغيرة" width="300" height="200">
  • width="300" و height="200": يحددان أبعاد الصورة داخل الصفحة.

1.3. تحسين الصور باستخدام خاصية srcset

إذا كنت تريد تحميل صور بأحجام مختلفة حسب جهاز المستخدم، يمكنك استخدام خاصية srcset. هذه الخاصية تسمح بتحميل صورة ذات دقة عالية في الشاشات الكبيرة وصورة أصغر في الأجهزة ذات الشاشات الصغيرة.

مثال:

<img src="images/photo-small.jpg" alt="صورة للويب" 
     srcset="images/photo-small.jpg 500w, images/photo-large.jpg 1000w" 
     sizes="(max-width: 600px) 500px, 1000px">
  • srcset: تحتوي على مجموعة من الصور بأحجام مختلفة مع تحديد عرض كل صورة.
  • sizes: تحدد حجم الصورة حسب حجم الشاشة.

مثال كامل لإضافة الصور:

<!DOCTYPE html>
<html lang="ar">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>إضافة الصور في HTML</title>
  </head>
  <body>
    <h1>أمثلة على إضافة الصور في HTML</h1>

    <h2>صورة باستخدام وسم <code>&lt;img&gt;</code></h2>
    <img src="images/photo.jpg" alt="صورة جميلة" width="300" height="200">

    <h2>صورة بصيغة WebP</h2>
    <img src="images/photo.webp" alt="صورة رائعة" width="300" height="200">

    <h2>صورة مع Lazy Loading</h2>
    <img src="images/photo.jpg" alt="صورة جميلة" loading="lazy" width="300" height="200">

    <h2>صورة باستخدام <code>srcset</code> و <code>sizes</code></h2>
    <img src="images/photo-small.jpg" alt="صورة للويب" 
         srcset="images/photo-small.jpg 500w, images/photo-large.jpg 1000w" 
         sizes="(max-width: 600px) 500px, 1000px">
  </body>
</html>

ملخص الفصل الثالث – الجزء الأول: إضافة الصور

  • وسم <img>: يُستخدم لإدراج الصور في HTML.
  • خاصية src: تحدد مسار الصورة.
  • خاصية alt: توفر نصًا بديلاً إذا لم تُحمّل الصورة.
  • تحسين الصور:
    • استخدام الصيغ المناسبة مثل JPEG و PNG و WebP.
    • تقليص حجم الصورة باستخدام أدوات.
    • استخدام خاصية loading="lazy" لتحميل الصور عند الحاجة.
    • استخدام خاصية srcset لتحميل صور بأحجام مختلفة على الأجهزة المختلفة.

جرب تطبيق الأمثلة دي على صفحاتك الخاصة، وإذا عندك أي أسئلة أو حابب تواصل معايا، أنا هنا! 😄

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *