Immagini mobile-first

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 9 di 35.

Immagini mobile-first significa assicurarsi che le immagini funzionino bene prima sugli schermi piccoli, per poi migliorarle per gli schermi più grandi. Sui dispositivi mobili, le immagini grandi e pesanti possono rallentare il caricamento, quindi iniziamo con versioni più piccole e ottimizzate. Man mano che gli schermi diventano più grandi, possiamo sostituirle con immagini di qualità superiore

Usiamo l'elemento HTML picture per mostrare immagini di dimensioni diverse in base alla larghezza dello schermo.

<picture> → contenitore che include diverse opzioni di immagini per schermi differenti.

<source> → definisce quale immagine caricare (srcset) e a quale condizione (media). Esempio: telefono (≤600px) → immagine piccola; tablet (≤1024px) → immagine media.

<img> → immagine di ripiego se nessun <source> corrisponde, di solito l'immagine desktop grande. Contiene anche il testo 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>

Sfida

Facile

Devi visualizzare un'immagine della Luna che sia bella sia sugli schermi dei dispositivi mobili sia su quelli desktop.

Il tuo compito:

Usa l'elemento <picture> per impostare immagini responsive.
Per gli schermi da 768px in su, carica l'immagine più grande della Luna: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Per gli schermi più piccoli (dispositivi mobili per impostazione predefinita), carica l'immagine più piccola della Luna:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Assicurati di includere alt="Moon in the night sky" per l'accessibilità.

Provalo tu

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