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

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

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

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

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

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

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

두 옵션 모두 개발자는 지연 로드 동작을 포함할 수 있으며 많은 개발자가 서드 파티 라이브러리를 빌드하여 훨씬 더 쉽게 추상화를 제공합니다.

그러나 브라우저에서 직접 지원하는 지연 로드를 사용하면 외부 라이브러리가 필요하지 않습니다. 또한 브라우저 수준의 지연 로드를 사용하면 클라이언트가 자바스크립트를 사용 중지하더라도 이미지 로드가 계속 작동합니다. 하지만 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 (널리 사용되는 자바스크립트 지연 로드 라이브러리)의 비교입니다.

이미지 크기 속성 제공

브라우저는 이미지를 로드할 때 명시적으로 지정되지 않는 한 이미지의 크기를 즉시 알 수 없습니다. 브라우저에서 이미지를 위한 페이지 공간을 충분히 예약하고 중단을 야기하는 레이아웃 변경을 방지하려면 모든 <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> 요소에서 로드할 이미지를 결정하지만 loading를 대체 <img> 요소에 추가하기만 하면 됩니다.

항상 첫 번째 표시 영역에 표시되는 이미지 즉시 로드

사용자가 페이지를 처음 로드할 때 표시되는 이미지, 특히 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

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

이전에는 Android용 Chrome에서 라이트 모드가 사용 설정되어 있고 loading 속성이 제공되지 않거나 loading="auto"로 설정된 경우 지연에 적합한 모든 이미지가 Chromium에서 자동으로 지연 로드되었습니다. 하지만 라이트 모드와 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"와 함께 서드 파티 라이브러리를 계속 사용하는 한 가지 이유는 이 속성을 지원하지 않는 브라우저에 polyfill을 제공하거나 지연 로드가 트리거되는 시점을 더 세밀하게 제어하기 위한 것입니다.

지연 로드를 지원하지 않는 브라우저는 어떻게 처리하나요? {browsers-dont-support}

폴리필을 만들거나 서드 파티 라이브러리를 사용하여 사이트의 이미지를 지연 로드하세요. loading 속성을 사용하여 브라우저에서 이 기능을 지원하는지 확인할 수 있습니다.

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

예를 들어 lazysizes는 널리 사용되는 자바스크립트 지연 로드 라이브러리입니다. loading 속성 지원을 감지하여 loading가 지원되지 않는 경우에만 지연 크기를 대체 라이브러리로 로드할 수 있습니다. 다음과 같이 작동합니다.

• 지원되지 않는 브라우저에서 즉시 로드를 방지하기 위해 <img src>를 <img data-src>로 바꿉니다. loading 속성이 지원되는 경우 data-src를 src로 바꿉니다.
• loading가 지원되지 않는 경우 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에서 이 기능을 사용 설정했을 때 비정상적인 동작이 눈에 띄나요? 버그를 신고하세요.