Imágenes Mobile-First

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 9 de 35.

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

Usemos el elemento HTML picture para servir diferentes tamaños de imagen basados en el ancho de la pantalla.

<picture> → contenedor que contiene múltiples opciones de imagen para diferentes pantallas.

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

<img> → alternativa si no coincide ningún <source>, usualmente la imagen de escritorio grande. También contiene el 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 ha asignado el objetivo de mostrar una imagen de la Luna que se vea bien tanto en pantallas móviles como de escritorio.

Tu tarea:

Utiliza el elemento <picture> para configurar imágenes responsivas.
Para pantallas de 768px o más de ancho, carga la imagen de la Luna más grande: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Para pantallas más pequeñas (móvil por defecto), carga la imagen de la Luna más pequeña:
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.

Hoja de referencia

Usa el elemento <picture> para imágenes adaptables con enfoque móvil (mobile-first):

<picture> → contenedor para múltiples opciones de imagen
<source> → define la imagen (srcset) y la condición (media)
<img> → imagen de respaldo con 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>

Comienza con imágenes más pequeñas y optimizadas para móviles, luego mejora para pantallas más grandes para mejorar el rendimiento de carga.

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>