Images Mobile-First

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 9 sur 35.

Images Mobile-First signifie s'assurer que les images fonctionnent bien sur les petits écrans d'abord, puis les améliorer pour les écrans plus grands. Sur mobile, les images volumineuses et lourdes peuvent ralentir le chargement, c'est pourquoi nous commençons 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 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 avez pour objectif d'afficher une image de la Lune qui s'affiche correctement sur les écrans mobiles et de bureau.

Votre tâche :

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

Aide-mémoire

Utilisez l'élément <picture> pour des images réactives (responsive) axées sur le mobile :

<picture> → conteneur pour plusieurs options d'image
<source> → définit l'image (srcset) et la condition (media)
<img> → image de secours avec un 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>

Commencez par des images plus petites et optimisées pour le mobile, puis améliorez pour les écrans plus grands afin d'optimiser les performances de chargement.

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>