Imágenes Mobile-First

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 9 de 35.

Imágenes primero para móviles significa asegurarse de que las imágenes funcionen bien primero en pantallas pequeñas y después mejorarlas para pantallas más grandes. En móviles, las imágenes grandes y pesadas pueden ralentizar la carga, así que empezamos con versiones más pequeñas y optimizadas. A medida que las pantallas se hacen más grandes, podemos sustituirlas por imágenes de mayor calidad

Usemos el elemento HTML picture para mostrar diferentes tamaños de imagen según el ancho de la pantalla.

<picture> → contenedor que alberga varias opciones de imagen para diferentes pantallas.

<source> → define qué imagen cargar (srcset) y en qué condición (media). Ejemplo: teléfono (≤600px) → imagen pequeña; tableta (≤1024px) → imagen mediana.

<img> → alternativa si ningún <source> coincide, normalmente la imagen grande para escritorio. También contiene texto 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>

Desafío

Fácil

Se te pide mostrar una imagen de la Luna que se vea bien tanto en pantallas móviles como de escritorio.

Tu tarea:

Usa el elemento <picture> para configurar imágenes adaptables.
Para pantallas de 768px o más, carga la imagen más grande de la Luna: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Para pantallas más pequeñas (móviles de forma predeterminada), carga la imagen más pequeña de la Luna:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Asegúrate de incluir alt="Moon in the night sky" para la accesibilidad.

Pruébalo tú mismo

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