Mobile-First Images

Part of the Practical Frontend section of Coddy's HTML journey — lesson 9 of 35.

Mobile-First Images means making sure pictures work well on small screens first, then enhancing them for larger displays. On mobile, big heavy images can slow down loading, so we start with smaller, optimized versions. As screens get bigger, we can swap in higher-quality images

Let's use the HTML picture element to serve different image sizes based on screen width.

<picture> → wrapper that holds multiple image options for different screens.

<source> → defines which image to load (srcset) and under what condition (media). Example: phone (≤600px) → small image; tablet (≤1024px) → medium image.

<img> → fallback if no <source> matches, usually the large desktop image. Also contains alt text.

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

Challenge

Easy

You are given the goal of displaying an image of the Moon that looks good on both mobile and desktop screens.

Your task:

Use the <picture> element to set up responsive images.
For screens 768px and wider, load the larger Moon image: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
For smaller screens (default mobile), load the smaller Moon image:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Make sure to include alt="Moon in the night sky" for accessibility.

Cheat sheet

Use the <picture> element for mobile-first responsive images:

<picture> → wrapper for multiple image options
<source> → defines image (srcset) and condition (media)
<img> → fallback image with alt text

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

Start with smaller, optimized images for mobile, then enhance for larger displays to improve loading performance.

Try it yourself

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