Mobile-First-Bilder

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

Mobile-First-Bilder bedeutet sicherzustellen, dass Bilder zuerst auf kleinen Bildschirmen gut funktionieren und sie dann für größere Displays optimiert werden. Auf Mobilgeräten können große, schwere Bilder das Laden verlangsamen, daher beginnen wir mit kleineren, optimierten Versionen. Wenn die Bildschirme größer werden, können wir qualitativ hochwertigere Bilder 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> → definiert, welches Bild geladen werden soll (srcset) und unter welcher Bedingung (media). Beispiel: Smartphone (≤600px) → kleines Bild; Tablet (≤1024px) → mittleres Bild.

<img> → Fallback, wenn kein <source> übereinstimmt, normalerweise das große Desktop-Bild. Enthält auch den 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

Sie haben das Ziel, ein Bild des Mondes anzuzeigen, das sowohl auf Mobilgeräten als auch auf Desktop-Bildschirmen gut aussieht.

Ihre Aufgabe:

Verwenden Sie das <picture>-Element, um responsive Bilder einzurichten.
Laden Sie für Bildschirme mit einer Breite von 768px und mehr das größere Mondbild: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Laden Sie für kleinere Bildschirme (Standard-Mobilgeräte) das kleinere Mondbild:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Stellen Sie sicher, dass Sie alt="Moon in the night sky" für die Barrierefreiheit einschließen.

Spickzettel

Verwenden Sie das <picture>-Element für Mobile-First-Responsive-Bilder:

<picture> → Wrapper für mehrere Bildoptionen
<source> → definiert das Bild (srcset) und die Bedingung (media)
<img> → Fallback-Bild mit 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>

Beginnen Sie mit kleineren, optimierten Bildern für Mobilgeräte und erweitern Sie diese dann für größere Displays, um die Ladeleistung zu verbessern.

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>