이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

드디어 기본 제공 지연 로드가 출시되었습니다.

애디 오스마니

후세인 지르데

마티아스 바인스

Barry Pollard

이제 웹에서 지연 로드 이미지에 대한 브라우저 수준의 지원이 지원됩니다. 이 동영상은 이 기능의 데모를 보여줍니다.

loading 속성을 사용하면 맞춤 지연 로드 코드를 작성하거나 별도의 JavaScript 라이브러리를 사용하지 않고도 이미지를 지연 로드할 수 있습니다. 그럼 본론으로 들어가도록 하겠습니다.

브라우저 호환성

브라우저 지원

77
79
75
15.4

loading 속성을 지원하지 않는 브라우저는 부작용 없이 이 속성을 무시합니다.

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

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

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

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

두 옵션 모두 개발자는 지연 로드 기능을 포함할 수 있으며 많은 개발자가 서드 파티 라이브러리를 빌드하여 훨씬 더 쉽게 추상화를 제공합니다. 그러나 브라우저에서 직접 지원하는 지연 로드를 사용하면 외부 라이브러리가 필요하지 않습니다. 또한 브라우저 수준의 지연 로드를 사용하면 클라이언트에서 자바스크립트가 사용 중지된 경우에도 이미지의 지연된 로드가 계속 작동합니다.

`loading` 속성

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

loading 속성을 사용하여 스크롤을 통해 연결되는 오프스크린 이미지의 로드를 완전히 지연시킬 수 있습니다.

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

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

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

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

eager 값은 이미지가 화면 밖에 있는 경우 로드를 더 지연시키지 않고 평상시처럼 이미지를 로드하는 명령일 뿐입니다. loading="eager" 속성이 없는 다른 이미지보다 이미지가 더 빨리 로드된다는 의미는 아닙니다.

브라우저는 다양한 휴리스틱을 기반으로 리소스의 우선순위를 지정하며, loading 속성은 이미지 리소스가 큐에 추가되는 시점만 명시하고 큐에서 이미지 리소스의 우선순위는 어떻게 명시하지 않습니다. eager는 브라우저가 기본적으로 사용하는 일반적인 즉시 실행 대기열을 암시합니다.

중요한 이미지 (예: LCP 이미지)의 가져오기 우선순위를 높이려면 fetchpriority="high"와 함께 Fetch Priority를 사용해야 합니다.

loading="lazy" 및 fetchpriority="high"가 있는 이미지는 화면을 벗어나면 계속 지연되고 표시 영역 내에 거의 있을 때 높은 우선순위로 가져옵니다. 이 경우 높은 우선순위로 가져올 가능성이 높으므로 이 조합은 실제로 필요하지도 사용되지 않습니다.

표시 영역으로부터의 거리 임계값

스크롤 없이 볼 수 있는 부분, 즉 스크롤하지 않아도 바로 볼 수 있는 모든 이미지는 정상적으로 로드됩니다. 기기 표시 영역 훨씬 아래에 있는 알림은 사용자가 해당 표시 영역 근처로 스크롤할 때만 가져옵니다.

Chromium의 지연 로드 구현은 오프스크린 이미지가 사용자가 이미지 근처로 스크롤하면 로드가 완료될 수 있을 정도로 일찍 로드되도록 합니다. 주변 이미지가 표시 영역에 표시되기 훨씬 전에 가져오므로 이미지가 표시될 때 이미 로드될 가능성이 극대화됩니다.

스크롤해야 볼 수 있는 이미지를 가져오는 임곗값은 JavaScript 지연 로드 라이브러리와 비교할 때 보수적인 것으로 간주될 수 있습니다.

거리 기준은 고정되어 있지 않으며 여러 요인에 따라 달라집니다.

가져올 이미지 리소스의 유형입니다.
유효 연결 유형

Chromium 소스에서 다양한 유효 연결 유형의 기본값을 확인할 수 있습니다. Chrome 팀이 로드 시작 시점을 결정하기 위해 휴리스틱을 개선함에 따라 이러한 수치와 표시 영역으로부터 특정 거리에 도달할 때만 가져오는 접근 방식도 향후 변경될 수 있습니다.

개선된 데이터 절약 및 표시 영역으로부터의 거리 기준점

2020년 7월 현재, Chrome은 개발자의 기대치를 더 효과적으로 충족하기 위해 이미지 지연 로드 표시 영역으로부터의 거리 기준점을 조정하는 데 상당한 노력을 기울였습니다.

빠른 연결(4G)에서는 Chrome의 표시 영역 거리 임계값을 3000px에서 1250px(으)로, 속도가 느린 연결(3G 이하)에서는 임계값을 4000px에서 2500px(으)로 변경했습니다. 이 변경사항에 따라 다음 두 가지 작업이 이루어집니다.

<img loading=lazy>는 JavaScript 지연 로드 라이브러리에서 제공하는 환경과 더 가깝게 동작합니다.
새로운 표시 영역 거리 기준점을 사용하면 사용자가 이미지를 스크롤하는 시점까지 이미지가 로드되었음을 보장할 수 있습니다.

아래에서 고속 연결 (4G)에 대한 데모에서 이전 표시 영역과 새 표시 영역 거리 임계값을 비교해 볼 수 있습니다.

이전 기준과 새 기준 비교:

이미지 지연 로드의 새롭고 개선된 기준점으로 빠른 연결의 표시 영역 거리 기준점을 3000픽셀에서 1250픽셀로 줄임

새로운 기준점과 LazySizes (널리 사용되는 JS 지연 로드 라이브러리)의 비교:

동일한 네트워크 조건에서 70KB의 LazySizes로 로드하는 것과 비교하여 Chrome의 새로운 표시 영역 거리 기준점은 90KB의 이미지를 로드하는 것입니다.

Google은 다양한 브라우저에서 표시 영역 거리 기준점에 접근하는 방식을 더욱 효과적으로 조정할 수 있도록 웹 표준 커뮤니티와 협력하고 있습니다.

이미지에 크기 속성이 포함되어야 합니다.

브라우저에서는 이미지를 로드할 때 명시적으로 지정되지 않는 한 이미지의 크기를 즉시 알 수 없습니다. 브라우저에서 페이지에 이미지를 위한 충분한 공간을 예약하도록 하려면 모든 <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> 태그에 적용됩니다. 지연 로드를 사용하면 관련성이 더 높아질 수 있습니다. 최신 브라우저의 이미지에 width 및 height를 설정하면 브라우저가 고유 크기를 추론할 수도 있습니다.

대부분의 경우 크기가 포함되지 않으면 이미지가 여전히 지연 로드되지만, 알아야 할 극단적인 사례가 몇 가지 있습니다. width 및 height를 지정하지 않으면 처음에는 이미지 크기가 0×0픽셀이 됩니다. 이러한 이미지의 갤러리가 있는 경우, 브라우저에서는 시작 시 모든 이미지가 표시 영역 내에 들어가는 것으로 결론을 내릴 수 있습니다. 각 이미지가 사실상 공간을 차지하지 않고 이미지가 화면 밖으로 밀려나지 않기 때문입니다. 이 경우 브라우저는 사용자에게 모든 항목이 표시되어 모든 항목을 로드하기로 결정합니다.

또한 이미지 크기를 지정하면 레이아웃이 변경될 가능성이 줄어듭니다. 이미지의 크기를 포함할 수 없는 경우 이미지 지연 로드를 사용하면 네트워크 리소스 절약과 레이아웃 변경의 위험이 더 큰 위험 사이에서 균형을 잡을 수 있습니다.

Chromium의 지연 로드는 이미지가 표시되면 로드될 가능성이 높은 방식으로 구현되지만, 이미지가 아직 로드되지 않을 수도 있습니다. 이 경우 이러한 이미지에서 width 및 height 속성이 누락되면 레이아웃 변경 횟수에 미치는 영향이 증가합니다.

참고: 이 데모에서 loading 속성이 사진 100장에서 어떻게 작동하는지 확인하세요.

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

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

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

첫 번째로 표시되는 표시 영역에 있는 이미지의 지연 로드 피하기

첫 번째로 표시되는 표시 영역에 있는 이미지에는 loading=lazy를 설정하지 않아야 합니다. 이는 특히 LCP 이미지와 관련이 있습니다. 자세한 내용은 너무 많은 지연 로드의 성능 영향 도움말을 참고하세요.

가능한 경우 스크롤해야 볼 수 있는 부분에 위치한 이미지에만 loading=lazy를 추가하는 것이 좋습니다. 빠르게 로드된 이미지는 즉시 가져올 수 있지만 브라우저에서 현재 느리게 로드되는 이미지는 페이지에서 이미지의 위치를 알 때까지 기다려야 하며, 이 경우 IntersectionObserver를 사용할 수 있어야 합니다.

일반적으로 표시 영역 내의 모든 이미지는 브라우저의 기본값을 사용하여 로드되어야 합니다. 표시 영역 내 이미지의 경우에는 loading=eager를 지정하지 않아도 됩니다.

<!-- 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> 태그와만 함께 사용할 수 있습니다.

기기 표시 영역 내에 있는 이미지의 지연 로드에는 단점이 있나요?

Chrome은 미리 로드 스캐너에 loading=lazy 이미지를 미리 로드하지 않고 모든 레이아웃이 완료될 때까지 이미지 가져오기를 지연시키므로 스크롤 없이 볼 수 있는 부분에 loading=lazy를 배치하지 않는 것이 안전합니다. 자세한 내용은 처음 표시되는 표시 영역에 있는 이미지 지연 로드 피하기를 참고하세요.

표시 영역에는 있지만 바로 표시되지 않는 이미지 (예: 캐러셀 뒤 또는 특정 화면 크기에서 CSS에 의해 숨겨짐)에서 `loading` 속성이 어떻게 작동하나요?

loading="lazy"를 사용하면 도어가 표시되지는 않지만 계산된 거리 내에 있는 경우 로드되지 않을 수 있습니다. 예를 들어 Chrome, Safari, Firefox는 이미지 요소 또는 상위 요소에서 display: none; 스타일 지정을 사용하여 이미지를 로드하지 않습니다. 그러나 이미지를 숨기는 다른 기술(예: opacity:0 스타일 지정 사용)의 경우에도 이미지가 로드됩니다. 구현을 철저히 테스트하여 의도한 대로 작동하는지 항상 확인해야 합니다.

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

이제 최신 브라우저에서 네이티브 지연 로드를 완벽하게 지원하므로 이미지를 지연 로드하는 데 서드 파티 라이브러리나 스크립트가 여전히 필요한지 다시 고려해 볼 수 있습니다.

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

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

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

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

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

지원되지 않는 브라우저에서 즉시 로드를 방지하기 위해 <img src>를 <img data-src>로 바꿉니다. loading 속성이 지원되는 경우 data-src를 src로 바꿉니다.
loading가 지원되지 않으면 대체 (지연 크기)를 로드하고 시작합니다. pausesizes 문서에 따라 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에 대한 지연 로드가 브라우저에서도 지원되나요?

브라우저 지원

77
79
121
16.4

<iframe loading=lazy>도 표준화되었으며 이미 Chromium과 Safari에서 구현되었습니다. 이렇게 하면 loading 속성을 사용하여 iframe을 지연 로드할 수 있습니다. 자세한 내용은 iframe 지연 로드 관련 전용 도움말을 참고하세요.

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

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

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

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

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

Lighthouse 6.0 이상은 다른 기준점을 사용할 수 있는 오프스크린 이미지 지연 로드 방식을 고려하여 화면 밖 이미지 연기 감사를 통과합니다.

결론

이미지 지연 로드를 지원하기 위해 베이킹하면 웹페이지의 성능을 훨씬 쉽게 개선할 수 있습니다.

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