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

브라우저 지원

  • Chrome: 77
  • Edge: 79
  • Firefox: 75.
  • Safari: 15.4

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

지연 로드된 이미지는 사용자가 페이지를 스크롤할 때 로드됩니다.

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

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

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

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

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

그러나 브라우저에서 직접 지연 로드를 지원하므로 외부 라이브러리가 필요하지 않습니다. 브라우저 수준의 지연 로드를 사용하면 클라이언트가 자바스크립트를 사용하지 않는 경우에도 이미지 로드가 계속 작동합니다. 그러나 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)에서 데모 중 하나의 이전 및 새 뷰포트 거리 기준점을 비교한 내용입니다.

이미지 지연 로드의 새로운 향상된 임곗값으로, 빠른 연결의 뷰포트 거리 임곗값을 3,000픽셀에서 1,250픽셀로 줄였습니다.
브라우저 수준 지연 로드에 사용된 이전 임곗값과 최신 임곗값 비교

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

동일한 네트워크 조건에서 70KB의 LazySizes 로드와 비교하여 Chrome의 새로운 표시 영역으로부터의 거리 기준점은 90KB입니다.
Chrome 및 LazySizes의 지연 로드에 사용되는 임곗값 비교

이미지에 크기 속성 지정

브라우저가 이미지를 로드하는 동안 이미지의 크기가 명시적으로 지정되지 않는 한 이미지의 크기를 즉시 알 수 없습니다. 브라우저가 페이지에서 이미지를 위한 충분한 공간을 확보하고 방해가 되는 레이아웃 전환을 방지할 수 있도록 모든 <img> 태그에 widthheight 속성을 추가하는 것이 좋습니다.

<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의 지연 로드는 이미지가 표시되는 즉시 로드될 가능성이 더 높도록 구현되지만 적시에 로드되지 않을 수도 있습니다. 이 경우 이미지에서 widthheight를 지정하지 않으면 누적 레이아웃 이동에 미치는 영향이 커집니다. 이미지 크기를 지정할 수 없는 경우 지연 로드를 사용하면 레이아웃 변경의 증가로 인해 네트워크 리소스를 절약할 수 있습니다.

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

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="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
}

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

  • 지원되지 않는 브라우저에서 조기 로드를 방지하려면 <img src><img data-src>로 대체합니다. loading 속성이 지원되는 경우 data-srcsrc로 전환합니다.
  • 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 지연 로드도 지원되나요?

브라우저 지원

  • Chrome: 77
  • Edge: 79
  • Firefox: 121.
  • Safari 16.4.

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

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

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

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

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

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

Lighthouse 6.0 이상에서는 다양한 기준점을 사용할 수 있는 오프스크린 이미지 지연 로드에 접근하여 오프스크린 이미지 지연 감사를 통과할 수 있습니다.

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

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

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