Mobile-First-Bilder

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 9 von 35.

Mobile-First-Bilder bedeutet, sicherzustellen, dass Bilder zuerst auf kleinen Bildschirmen gut funktionieren und anschließend für größere Displays optimiert werden. Auf Mobilgeräten können große, umfangreiche Bilder das Laden verlangsamen, daher beginnen wir mit kleineren, optimierten Versionen. Wenn die Bildschirme größer werden, können wir Bilder mit höherer Qualität einsetzen.

Verwenden wir das HTML-picture-Element, um verschiedene Bildgrößen basierend auf der Bildschirmbreite bereitzustellen.

<picture> → Wrapper, der mehrere Bildoptionen für verschiedene Bildschirme enthält.

<source> → legt fest, welches Bild geladen werden soll (srcset) und unter welcher Bedingung (media). Beispiel: Smartphone (≤600px) → kleines Bild; Tablet (≤1024px) → mittleres Bild.

<img> → Fallback, falls kein <source> übereinstimmt, normalerweise das große Desktopbild. Enthält außerdem alt-Text.

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

Aufgabe

Einfach

Dir wurde die Aufgabe gestellt, ein Bild des Mondes anzuzeigen, das sowohl auf mobilen als auch auf Desktop-Bildschirmen gut aussieht.

Deine Aufgabe:

Verwende das Element <picture>, um responsive Bilder einzurichten.
Lade für Bildschirme mit einer Breite von 768px oder mehr das größere Mondbild: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Lade für kleinere Bildschirme (standardmäßig mobil) das kleinere Mondbild:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Stelle sicher, dass du für die Barrierefreiheit alt="Moon in the night sky" einfügst.

Probier es selbst

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