웹용 브라우저 수준 이미지 지연 로드

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

맞춤 지연 로드 코드를 작성하거나 별도의 JavaScript 라이브러리를 사용할 필요 없이 loading 속성을 사용하여 이미지를 지연 로드할 수 있습니다. 다음은 이 기능의 데모입니다.

이 페이지에서는 브라우저에서 지연 로드를 구현하는 방법을 자세히 설명합니다.

브라우저 수준 지연 로드를 사용해야 하는 이유

HTTP Archive에 따르면 이미지는 대부분의 웹사이트에서 가장 많이 요청되는 애셋 유형이며 일반적으로 다른 리소스보다 더 많은 대역폭을 차지합니다. 90번째 백분위수에서 사이트는 데스크톱과 모바일에서 5MB가 넘는 이미지를 전송합니다.

이전에는 화면 밖에 있는 이미지의 로드를 지연하는 방법이 두 가지 있었습니다.

• Intersection Observer API 사용
• scroll, resize 또는 orientationchange 이벤트 핸들러 사용

두 옵션 모두 개발자가 지연 로드 동작을 포함할 수 있으며, 많은 개발자가 더 사용하기 쉬운 추상화를 제공하기 위해 서드 파티 라이브러리를 빌드했습니다.

그러나 브라우저에서 직접 지연 로드를 지원하므로 외부 라이브러리가 필요하지 않습니다. 또한 브라우저 수준의 지연 로드를 사용하면 클라이언트에서 JavaScript를 사용 중지해도 이미지 로드가 계속 작동합니다. 그러나 JavaScript가 사용 설정된 경우에만 로드가 지연됩니다.

loading 속성

Chrome은 기기 표시 영역을 기준으로 이미지가 있는 위치에 따라 서로 다른 우선순위로 이미지를 로드합니다. 표시 영역 아래의 이미지는 우선순위가 낮게 로드되지만 페이지가 로드될 때 가져옵니다.

loading 속성을 사용하여 화면 밖 이미지의 로드를 완전히 지연할 수 있습니다.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

loading 속성에 지원되는 값은 다음과 같습니다.

• lazy: 리소스가 표시 영역에서 계산된 거리에 도달할 때까지 리소스 로드를 지연합니다.
• eager: 브라우저의 기본 로드 동작으로, 속성을 포함하지 않는 것과 동일하며 페이지 내 위치에 관계없이 이미지가 로드됩니다. 이는 기본값이지만 명시적 값이 없을 때 도구가 자동으로 loading="lazy"를 추가하거나 명시적으로 설정되지 않은 경우 린터에서 경고하는 경우 명시적으로 설정하는 것이 유용할 수 있습니다.

loading 속성과 가져오기 우선순위 간의 관계

eager 값은 이미지가 화면 밖에 있는 경우 로드를 더 지연시키지 않고 평소와 같이 이미지를 로드하라는 안내입니다. loading 속성이 없는 다른 이미지보다 이미지를 더 빠르게 로드하지 않습니다.

중요한 이미지(예: LCP 이미지)의 가져오기 우선순위를 높이려면 fetchpriority="high"와 함께 가져오기 우선순위를 사용하세요.

loading="lazy" 및 fetchpriority="high"가 있는 이미지는 화면 밖에 있을 때도 계속 지연되고 이미지가 표시 영역 내에 있을 때 높은 우선순위로 가져옵니다. 브라우저가 어쨌든 이 이미지를 높은 우선순위로 로드할 가능성이 높으므로 이 조합은 실제로 필요하지 않습니다.

표시 영역과의 거리 기준점

스크롤하지 않고도 바로 볼 수 있는 모든 이미지는 정상적으로 로드됩니다. 기기 뷰포트 아래에 있는 이미지는 사용자가 근처로 스크롤할 때만 가져옵니다.

Chromium의 지연 로드 구현에서는 오프스크린 이미지가 표시 영역에 표시되기 한참 전에 가져와서 사용자가 스크롤할 때 이미지 로드가 완료될 수 있도록 충분히 일찍 로드되도록 합니다.

거리 기준점은 다음 요소에 따라 달라집니다.

• 가져오는 이미지 리소스의 유형
• 효과적인 연결 유형

Chromium 소스에서 다양한 유효 연결 유형의 기본값을 확인할 수 있습니다. DevTools에서 네트워크를 제한하여 이러한 다양한 임곗값을 실험할 수 있습니다.

데이터 절약 및 뷰포트 거리 기준점 개선

2020년 7월, Chrome은 개발자의 기대에 더 잘 부합하도록 이미지 지연 로드 뷰포트 거리 기준점을 조정하여 크게 개선했습니다.

빠른 연결(4G)의 경우 Chrome의 뷰포트 거리 기준점을 3000px에서 1250px로 줄였으며 느린 연결(3G 이하)의 경우 기준점을 4000px에서 2500px로 변경했습니다. 이 변경사항은 다음 두 가지 효과를 얻을 수 있습니다.

• <img loading=lazy>는 JavaScript 지연 로드 라이브러리에서 제공하는 환경에 더 가깝게 동작합니다.
• 새로운 뷰포트 거리 기준점은 여전히 사용자가 이미지로 스크롤할 때까지 이미지가 로드될 가능성이 높다는 것을 의미합니다.

다음은 빠른 연결(4G)에서 데모 중 하나의 이전 및 새 뷰포트 거리 기준점을 비교한 내용입니다.

새로운 임곗값과 LazySizes(자주 사용되는 JavaScript 지연 로드 라이브러리)의 비교는 다음과 같습니다.

이미지에 크기 속성 지정

브라우저가 이미지를 로드하는 동안 이미지의 크기가 명시적으로 지정되지 않는 한 이미지의 크기를 즉시 알 수 없습니다. 브라우저가 페이지에 이미지를 저장할 공간을 충분히 확보하고 업무에 지장을 주는 레이아웃 변경을 방지하려면 모든 <img> 태그에 width 및 height 속성을 추가하는 것이 좋습니다.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

또는 인라인 스타일에서 직접 값을 지정할 수 있습니다.

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

크기 설정에 관한 권장사항은 지연 로드 여부와 상관없이 <img> 태그에 적용되지만 지연 로드를 사용하면 더 중요해질 수 있습니다.

Chromium의 지연 로드는 이미지가 표시되는 즉시 로드될 가능성이 더 높도록 구현되지만 적시에 로드되지 않을 수도 있습니다. 이 경우 이미지에서 width 및 height를 지정하지 않으면 누적 레이아웃 이동에 미치는 영향이 커집니다. 이미지의 크기를 지정할 수 없는 경우 지연 로드하면 레이아웃 전환이 증가할 위험이 있지만 네트워크 리소스를 절약할 수 있습니다.

대부분의 시나리오에서는 크기를 지정하지 않아도 이미지가 여전히 지연 로드되지만 알아야 할 몇 가지 특이 사례가 있습니다. width 및 height가 지정되지 않은 경우 이미지 크기는 기본적으로 0×0픽셀로 설정됩니다. 이미지 갤러리가 있는 경우 각 이미지가 공간을 차지하지 않고 이미지가 화면 밖으로 푸시되지 않으므로 브라우저는 처음에 모든 이미지가 뷰포트 내에 들어맞는다고 판단할 수 있습니다. 이 경우 브라우저가 모든 항목을 로드하기로 결정하여 페이지 로드 속도가 더 느려집니다.

loading가 많은 이미지에서 작동하는 방식의 예는 이 데모를 참고하세요.

<picture> 요소를 사용하여 정의한 이미지를 지연 로드할 수도 있습니다.

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

브라우저가 <source> 요소에서 로드할 이미지를 결정하지만 대체 <img> 요소에 loading만 추가하면 됩니다.

첫 번째 뷰포트에 표시되는 이미지를 항상 조기 로드합니다.

사용자가 페이지를 처음 로드할 때 표시되는 이미지, 특히 LCP 이미지의 경우 즉시 사용할 수 있도록 브라우저의 기본적인 조기 로드를 사용하세요. 자세한 내용은 과도한 지연 로드의 성능 효과를 참고하세요.

초기 표시 영역 밖의 이미지에만 loading=lazy를 사용합니다. 브라우저는 페이지에서 이미지가 있어야 할 위치를 인식할 때까지 이미지를 지연 로드할 수 없으므로 로드 속도가 느려집니다.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

단계적 성능 저하

loading 속성을 지원하지 않는 브라우저는 이 속성을 무시합니다. 지연 로드의 이점을 얻지는 못하지만 포함해도 부정적인 영향은 없습니다.

FAQ

브라우저 수준 지연 로드에 관해 자주 묻는 질문(FAQ)

Chrome에서 이미지를 자동으로 지연 로드할 수 있나요?

이전에는 Android용 Chrome에서 라이트 모드가 사용 설정되어 있고 loading 속성이 제공되지 않았거나 loading="auto"로 설정된 경우 지연에 적합한 이미지를 Chromium에서 자동으로 지연 로드했습니다. 그러나 Lite 모드 및 loading="auto"가 지원 중단되었으며 Chrome에서 이미지의 자동 레이지 로드를 제공할 계획은 없습니다.

이미지가 로드되기 전에 표시 영역에 얼마나 가까워야 하는지 변경할 수 있나요?

이 값은 하드코딩되며 API를 통해 변경할 수 없습니다. 하지만 향후 브라우저에서 다양한 임곗값 거리와 변수를 실험하면서 변경될 수 있습니다.

CSS 배경 이미지에서 loading 속성을 사용할 수 있나요?

아니요. <img> 태그와만 사용할 수 있습니다.

loading는 표시 영역에서 바로 보이지 않는 이미지를 사용할 수 있나요?

loading="lazy"를 사용하면 이미지가 표시되지 않지만 계산된 거리 내에 있는 경우 이미지가 로드되지 않도록 할 수 있습니다. 이러한 이미지는 캐러셀 뒤에 배치되거나 특정 화면 크기에서 CSS에 의해 숨겨질 수도 있습니다. 예를 들어 Chrome, Safari, Firefox는 이미지 요소 또는 상위 요소에서 display: none; 스타일을 사용하여 이미지를 로드하지 않습니다. 하지만 opacity:0 스타일 지정과 같은 다른 이미지 숨기기 기법은 여전히 브라우저에서 이미지를 로드합니다. 항상 구현이 의도한 대로 작동하는지 철저하게 테스트하세요.

Chrome 121에서는 캐러셀과 같은 가로 스크롤 이미지의 동작이 변경되었습니다. 이제 수직 스크롤과 동일한 임곗값을 사용합니다. 즉, 캐러셀 사용 사례의 경우 이미지가 표시 영역에 표시되기 전에 로드됩니다. 즉, 이미지 로드가 사용자에게 눈에 띄지 않을 가능성이 낮지만 다운로드 횟수가 늘어납니다. 가로 지연 로드 데모를 사용하여 Chrome과 Safari 및 Firefox의 동작을 비교합니다.

이미 서드 파티 라이브러리 또는 스크립트를 사용하여 이미지를 지연 로드하고 있다면 어떻게 해야 하나요?

최신 브라우저에서 지연 로드를 완벽하게 지원하므로 이미지를 지연 로드하는 데 서드 파티 라이브러리나 스크립트가 필요하지 않을 수 있습니다.

loading="lazy"와 함께 서드 파티 라이브러리를 계속 사용하는 한 가지 이유는 속성을 지원하지 않는 브라우저에 폴리필을 제공하거나 지연 로드가 트리거되는 시점을 더 세부적으로 제어하기 위해서입니다.

지연 로드를 지원하지 않는 브라우저를 처리하려면 어떻게 해야 하나요?

브라우저 수준의 이미지 지연 로드는 모든 주요 브라우저에서 잘 지원되며 JavaScript에 대한 추가 종속 항목이 필요하지 않도록 하려면 대부분의 사용 사례에 권장됩니다.

그러나 더 많은 브라우저를 지원해야 하거나 지연 로드 기준점을 더 세부적으로 제어하려면 서드 파티 라이브러리를 사용하여 사이트에서 이미지를 지연 로드할 수 있습니다.

loading 속성을 사용하여 브라우저가 기능을 지원하는지 감지할 수 있습니다.

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

예를 들어 lazysizes는 많이 사용되는 JavaScript 지연 로드 라이브러리입니다. loading가 지원되지 않는 경우에만 lazysizes를 대체 라이브러리로 로드하기 위한 loading 속성 지원을 감지할 수 있습니다. 작동 방식은 다음과 같습니다.

• 지원되지 않는 브라우저에서 빠르게 로드되는 것을 방지하려면 <img src>를 <img data-src>로 바꿉니다. loading 속성이 지원되는 경우 data-src를 src로 전환합니다.
• loading가 지원되지 않으면 lazysizes에서 대체 항목을 로드하고 시작합니다. 이때 lazyload 클래스를 사용하여 지연 로드할 이미지를 표시합니다.

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

다음은 이 패턴의 데모입니다. 이전 브라우저에서 사용해 보고 대체가 어떻게 작동하는지 확인해 보세요.

브라우저에서도 iframe의 지연 로드가 지원되나요?

<iframe loading=lazy>도 표준화되었습니다. 이렇게 하면 loading 속성을 사용하여 iframe을 지연 로드할 수 있습니다. 자세한 내용은 이제 오프스크린 iframe을 지연 로드할 때입니다를 참고하세요.

브라우저 수준의 지연 로드는 웹페이지의 광고에 어떤 영향을 미치나요?

사용자에게 이미지 또는 iframe로 표시되는 모든 광고는 다른 이미지나 iframe과 마찬가지로 지연 로드됩니다.

웹페이지가 인쇄될 때 이미지는 어떻게 처리되나요?

페이지가 인쇄되면 모든 이미지와 iframe이 즉시 로드됩니다. 자세한 내용은 문제 #875403을 참고하세요.

Lighthouse는 브라우저 수준의 지연 로드를 인식하나요?

Lighthouse 6.0 이상에서는 다양한 임곗값을 사용할 수 있는 오프스크린 이미지 지연 로드 접근 방식에 가중치를 적용하여 오프스크린 이미지 지연 감사를 통과할 수 있도록 합니다.

이미지를 지연 로드하여 성능 개선

브라우저에서 이미지 지연 로드를 지원하면 페이지 성능을 훨씬 쉽게 개선할 수 있습니다.

Chrome에서 이 기능을 사용 설정하면 비정상적인 동작이 발생하나요? 버그를 신고하세요.