الصور للهاتف المحمول أولاً

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 9 من 35.

الصور الموجهة للأجهزة المحمولة أولاً (Mobile-First Images) تعني التأكد من أن الصور تعمل بشكل جيد على الشاشات الصغيرة أولاً، ثم تحسينها للشاشات الأكبر. على الجوال، يمكن للصور الكبيرة والثقيلة أن تبطئ عملية التحميل، لذا نبدأ بـ نسخ أصغر ومحسنة. ومع كبر حجم الشاشات، يمكننا استبدالها بصور ذات جودة أعلى.

لنستخدم عنصر HTML picture لتقديم أحجام صور مختلفة بناءً على عرض الشاشة.

<picture> ← حاوية تحتوي على خيارات صور متعددة لشاشات مختلفة.

<source> ← يحدد الصورة التي سيتم تحميلها (srcset) وتحت أي شرط (media). مثال: هاتف (≤600px) ← صورة صغيرة؛ جهاز لوحي (≤1024px) ← صورة متوسطة.

<img> ← خيار احتياطي في حال عدم تطابق أي <source>، وعادةً ما تكون صورة سطح المكتب الكبيرة. كما يحتوي على نص alt.

<picture>
  <source srcset="small-image.jpg" media="(max-width: 600px)">
  <source srcset="medium-image.jpg" media="(max-width: 1024px)">
  <img src="large-image.jpg" alt="Description of image">
</picture>

التحدي

سهل

لقد تم تكليفك بمهمة عرض صورة للقمر تبدو جيدة على كل من شاشات الهاتف المحمول وأجهزة الكمبيوتر المكتبية.

مهمتك:

استخدم عنصر <picture> لإعداد صور متجاوبة.
للشاشات التي يبلغ عرضها 768px وأكبر، قم بتحميل صورة القمر الأكبر: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
للشاشات الأصغر (الهاتف المحمول الافتراضي)، قم بتحميل صورة القمر الأصغر:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
تأكد من تضمين alt="Moon in the night sky" لسهولة الوصول.

ورقة مرجعية

استخدم عنصر <picture> للصور المتجاوبة التي تعتمد على نهج الهاتف أولاً (mobile-first):

<picture> ← غلاف لخيارات صور متعددة
<source> ← يحدد الصورة (srcset) والشرط (media)
<img> ← صورة احتياطية مع نص alt

<picture>
  <source srcset="small-image.jpg" media="(max-width: 600px)">
  <source srcset="medium-image.jpg" media="(max-width: 1024px)">
  <img src="large-image.jpg" alt="Description of image">
</picture>

ابدأ بصور أصغر ومحسنة للهواتف المحمولة، ثم قم بالتحسين للشاشات الأكبر لتحسين أداء التحميل.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Images</title>
  <style>
        body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 1rem;
      line-height: 1.6;
      background: #0a0a23;
      color: #f5f5f5;
    }

    header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    h1 {
      font-size: 1.5rem;
      color: #ffd369;
    }

    .content {
      max-width: 800px;
      margin: 0 auto;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 1rem 0;
    }

    p {
      font-size: 1rem;
    }

    @media (min-width: 768px) {
      h1 {
        font-size: 2.25rem;
      }

      p {
        font-size: 1.125rem;
      }
    }
  </style>
</head>
<body>
    <header>
    <h1>The Moon</h1>
  </header>

  <main class="content">
    <p>
      The Moon is Earth's only natural satellite and has fascinated humans for thousands of years. 
      It influences tides, inspires myths, and continues to be a target for exploration.
    </p>

  

    <p>
      Mobile-first images ensure the page loads fast on smaller devices while still looking 
      beautiful on bigger screens.
    </p>
  </main>
</body>
</html>