Images Mobile-First

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

Images pensées pour les mobiles en priorité signifie 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 peuvent ralentir le chargement ; nous commençons donc par des versions plus petites et optimisées. À mesure que les écrans s’agrandissent, nous pouvons les remplacer par des images de meilleure qualité

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

<picture> → conteneur qui regroupe 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> → image de remplacement si aucune <source> ne correspond, généralement la grande image pour ordinateur de bureau. 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 s’affiche bien sur les écrans mobiles et de bureau.

Votre tâche :

Utilisez l’élément <picture> pour configurer des images adaptatives.
Pour les écrans de 768px et plus, chargez la grande image de la Lune : https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Pour les écrans plus petits (mobile par défaut), chargez la petite image de la Lune :
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Veillez à 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>