모바일 퍼스트 이미지

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 9번째.

모바일 우선 이미지(Mobile-First Images)는 작은 화면에서 이미지가 먼저 잘 작동하도록 한 다음, 더 큰 디스플레이에 맞춰 이를 강화하는 것을 의미합니다. 모바일에서는 크고 무거운 이미지가 로딩 속도를 늦출 수 있으므로, 더 작고 최적화된 버전으로 시작합니다. 화면이 커짐에 따라 더 고품질의 이미지로 교체할 수 있습니다.

HTML picture 요소를 사용하여 화면 너비에 따라 다른 이미지 크기를 제공해 보겠습니다.

<picture> → 다양한 화면을 위해 여러 이미지 옵션을 담는 래퍼(wrapper)입니다.

<source> → 어떤 이미지를 로드할지(srcset)와 어떤 조건(media)에서 로드할지를 정의합니다. 예: 휴대폰 (≤600px) → 작은 이미지; 태블릿 (≤1024px) → 중간 이미지.

<img> → 일치하는 <source>가 없을 경우의 대체 수단이며, 보통 큰 데스크톱 이미지입니다. 또한 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>

챌린지

쉬움

모바일과 데스크톱 화면 모두에서 보기 좋은 달 이미지를 표시하는 목표가 주어졌습니다.

수행할 작업:

<picture> 요소를 사용하여 반응형 이미지를 설정하세요.
768px 이상의 화면에서는 더 큰 달 이미지를 로드하세요: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
더 작은 화면(기본 모바일)의 경우, 더 작은 달 이미지를 로드하세요:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
접근성을 위해 alt="Moon in the night sky"를 반드시 포함하세요.

치트 시트

모바일 우선 반응형 이미지를 위해 <picture> 요소를 사용하세요:

<picture> → 여러 이미지 옵션을 위한 래퍼(wrapper)
<source> → 이미지(srcset)와 조건(media)을 정의함
<img> → alt 텍스트가 포함된 대체(fallback) 이미지

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

모바일을 위해 작고 최적화된 이미지로 시작하고, 로딩 성능을 향상시키기 위해 더 큰 디스플레이에 맞춰 확장하세요.

직접 해보기

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