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

חלק מהיחידה פיתוח 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>