תמונות למובייל תחילה

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-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>