지연 로딩과 반응형 이미지: 실용적인 초보자 가이드

문제: 방대한 이미지 파일

이미지는 일반적으로 웹 페이지에서 가장 큰 파일입니다. 사용자가 사이트를 방문하면 브라우저는 화면 밖에 있는 이미지까지 모두 다운로드하려 시도합니다. 이는 대역폭을 낭비할 뿐만 아니라 초기 페이지 로딩 속도를 크게 저하시켜 사용자 경험을 해치고 코어 웹 바이탈 점수를 떨어뜨립니다.

해결책은 두 가지 측면에서 접근합니다:

1. 지연 로딩(Lazy-Loading): 사용자가 스크롤하여 화면 근처에 도달할 때까지 화면 밖의 이미지 로딩을 연기합니다.
2. 반응형 이미지(Responsive Images): 다양한 화면 크기에 맞는 다른 크기의 이미지를 제공하여 모바일 사용자가 데스크톱용으로 설계된 거대한 이미지를 다운로드하지 않도록 합니다.

다행히 현대 HTML은 두 가지 모두를 구현할 강력하고 쉬운 기능을 제공합니다.

1부: 간단한 지연 로딩 구현

과거에는 지연 로딩에 복잡한 JavaScript 라이브러리가 필요했지만, 이제는 단순한 속성 하나로 가능합니다.

loading="lazy" 속성은 브라우저에 이미지가 뷰포트에 진입하기 전까지 로딩하지 말라고 지시합니다.

구현 방법:

<img> 태그에 loading="lazy"를 추가하기만 하면 됩니다.

<img src="my-image.jpg" alt="설명적인 대체 텍스트" loading="lazy" width="800" height="600">

중요 사항:

• 반드시 width와 height 속성을 포함하세요. 이를 통해 브라우저가 이미지 로딩 전에 올바른 공간을 확보하여 레이아웃 이동(CLS - 누적 레이아웃 이동)을 방지합니다.
• 모든 이미지에 지연 로딩을 적용하지 마세요. “첫 화면”(초기 뷰포트 내에 보이는) 이미지는 정상적으로 로딩되어야 합니다. 이들에 지연 로딩을 적용하면 오히려 로딩 속도가 느려질 수 있습니다. 이 속성은 페이지 하단의 이미지에만 사용하세요.

loading="lazy"의 브라우저 지원은 현재 모든 주요 브라우저에서 완벽히 제공되며, 성능 향상을 위한 안전하고 효과적인 방법입니다.

2부: srcset으로 적절한 크기 제공

모바일 사용자가 데스크톱용으로 설계된 2000px 너비의 이미지를 다운로드해야 할 이유가 있을까요? srcset 속성을 사용하면 여러 크기의 이미지 목록을 브라우저에 제공할 수 있습니다. 그러면 브라우저가 사용자의 화면 크기와 해상도에 따라 가장 적합한 이미지를 스마트하게 선택합니다.

구현 방법:

1. 여러 이미지 크기 생성: 먼저 여러 버전의 이미지를 준비합니다. 일반적인 크기 세트:

   • image-small.jpg (예: 480px 너비)
   • image-medium.jpg (예: 800px 너비)
   • image-large.jpg (예: 1200px 너비) 이러한 크기 생성에는 당사의이미지 크기 조정 도구를 사용할 수 있습니다.

2. srcset 속성 사용: 각 이미지와 너비 설명자(w)를 나열합니다.

<img 
  srcset="image-small.jpg 480w, 
          image-medium.jpg 800w, 
          image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="image-medium.jpg" 
  alt="설명적인 대체 텍스트"
  loading="lazy"
  width="800" height="600">

분석:

• srcset: 사용 가능한 이미지와 실제 너비 목록 제공
• sizes: 뷰포트 크기에 따라 이미지가 표시될 너비를 브라우저에 지시. 예시: “화면 너비가 600px 이하이면 이미지는 480px 너비로 표시되고, 그렇지 않으면 800px 너비로 표시됨”. 브라우저는 이 정보를 사용하여 srcset에서 최적의 이미지를 선택합니다.
• src: srcset을 지원하지 않는 구형 브라우저를 위한 대체 이미지

3부: <picture> 요소로 아트 디렉션 구현

때로는 단순히 작은 이미지가 아니라 완전히 다른 이미지를 제공해야 할 때가 있습니다. 예: 데스크톱의 가로형 풍경 사진을 모바일에서는 세로형 클로즈업 사진으로 변경하는 “아트 디렉션”입니다.

<picture> 요소는 이 목적에 완벽합니다. 여러 <source> 요소를 제공할 수 있으며, 브라우저는 조건에 맞는 첫 번째 요소를 선택합니다.

구현 방법:

<picture>
  <!-- 화면 너비가 600px 이하일 때 이 이미지 표시 -->
  <source media="(max-width: 600px)" srcset="image-portrait.jpg">
  
  <!-- 그렇지 않으면 이 이미지 표시 -->
  <source media="(min-width: 601px)" srcset="image-landscape.jpg">
  
  <!-- 구형 브라우저를 위한 대체 이미지 -->
  <img src="image-landscape.jpg" alt="설명적인 대체 텍스트" loading="lazy" width="1200" height="600">
</picture>

AVIF 또는 WebP와 같은 최신 이미지 형식을 JPEG로 대체하는 데도 <picture>를 사용할 수 있습니다:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="설명적인 대체 텍스트">
</picture>

이러한 형식 생성에는 당사의이미지 변환 도구를 사용할 수 있습니다.

결론

이 세 가지 현대적 HTML 기능을 결합하면 모든 기기에서 놀랄 정도로 빠르게 로딩되는 웹사이트를 구축할 수 있습니다.

• 초기 뷰포트 아래의 모든 이미지에 loading="lazy" 적용
• 동일한 이미지의 다양한 크기 제공에 srcset 사용
• 다른 화면 크기나 형식에 완전히 다른 이미지가 필요한 경우 <picture> 사용

이러한 기술을 구현하는 것은 웹 성능과 코어 웹 바이탈을 개선하기 위해 할 수 있는 가장 영향력 있는 변경 사항 중 하나입니다.