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

جزء من قسم الواجهة الأمامية العملية في رحلة HTML على Coddy. الدرس 9 من 35.

الصور المهيأة للهواتف أولًا تعني التأكد من أن الصور تعمل جيدًا على الشاشات الصغيرة أولًا، ثم تحسينها للشاشات الأكبر. على الهواتف، قد تؤدي الصور الكبيرة والثقيلة إلى إبطاء التحميل، لذا نبدأ بـنسخ أصغر ومحسّنة. ومع ازدياد حجم الشاشات، يمكننا استبدالها بصور أعلى جودة

لنستخدم عنصر 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" لتسهيل الوصول.

جرّب بنفسك

<!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>