Obrazy w podejściu mobile-first

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 9 z 35.

Obrazy z myślą najpierw o urządzeniach mobilnych oznaczają dbanie o to, by obrazy dobrze działały najpierw na małych ekranach, a następnie ulepszanie ich z myślą o większych wyświetlaczach. Na urządzeniach mobilnych duże, ciężkie obrazy mogą spowalniać ładowanie, dlatego zaczynamy od mniejszych, zoptymalizowanych wersji. Gdy ekrany stają się większe, możemy podmienić je na obrazy wyższej jakości

Użyjmy elementu HTML picture, aby wyświetlać obrazy o różnych rozmiarach w zależności od szerokości ekranu.

<picture> → element opakowujący, który zawiera wiele opcji obrazu dla różnych ekranów.

<source> → określa, który obraz załadować (srcset) i pod jakim warunkiem (media). Przykład: telefon (≤600px) → mały obraz; tablet (≤1024px) → średni obraz.

<img> → obraz zastępczy, jeśli żaden <source> nie pasuje, zwykle duży obraz na komputery stacjonarne. Zawiera również tekst 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>

Wyzwanie

Łatwy

Twoim celem jest wyświetlenie obrazu Księżyca, który dobrze wygląda zarówno na ekranach urządzeń mobilnych, jak i komputerów.

Twoje zadanie:

Użyj elementu <picture>, aby skonfigurować responsywne obrazy.
Na ekranach o szerokości 768px i większej załaduj większy obraz Księżyca: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Na mniejszych ekranach (domyślnie na urządzeniach mobilnych) załaduj mniejszy obraz Księżyca:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Pamiętaj, aby ze względów dostępności uwzględnić alt="Moon in the night sky".

Spróbuj swoich sił

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