Images Mobile-First

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 9 sur 35.

Les images conçues d’abord pour mobile signifient qu’il faut s’assurer que les images fonctionnent bien d’abord sur les petits écrans, puis les améliorer pour les écrans plus grands. Sur mobile, les images volumineuses et lourdes peuvent ralentir le chargement ; nous commençons donc par des versions plus petites et optimisées. À mesure que les écrans grandissent, nous pouvons remplacer les images par des versions de meilleure qualité

Utilisons l'élément HTML picture pour proposer différentes tailles d'image en fonction de la largeur de l'écran.

<picture> → conteneur qui contient plusieurs options d'image pour différents écrans.

<source> → définit quelle image charger (srcset) et sous quelle condition (media). Exemple : téléphone (≤600px) → petite image ; tablette (≤1024px) → image moyenne.

<img> → solution de repli si aucun <source> ne correspond, généralement l'image pour grand écran. Contient également le texte 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>

Défi

Facile

Vous devez afficher une image de la Lune qui soit belle sur les écrans mobiles comme sur les écrans de bureau.

Votre tâche :

Utilisez l’élément <picture> pour configurer des images responsives.
Pour les écrans de 768px et plus, chargez l’image plus grande de la Lune : https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Pour les écrans plus petits (mobile par défaut), chargez l’image plus petite de la Lune :
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Assurez-vous d’inclure alt="Moon in the night sky" pour l’accessibilité.

Essayez vous-même

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