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

loading 속성을 사용하면 별도의 작업 없이도 이미지를 지연 로드할 수 있습니다. 커스텀 지연 로드 코드를 작성하거나 별도의 JavaScript 라이브러리를 사용할 수 있습니다. 이 데모를 실행합니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

브라우저 수준의 지연 로드인 이유

HTTP Archive에 따르면 이미지는 대부분의 웹사이트에서 가장 많이 요청되는 애셋 유형이며 일반적으로 다른 어떤 리소스보다 더 많은 대역폭을 차지합니다. 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 속성이 없는 다른 이미지보다 더 높은 비율을 나타냅니다.

중요한 이미지 (예: LCP 이미지)에서 다음과 함께 가져오기 우선순위를 사용합니다. fetchpriority="high"입니다.

loading="lazy" 및 fetchpriority="high" 이미지가 있는 경우 이미지가 여전히 지연되고 있습니다. 화면 밖에 있다가 해당 시간 안에 거의 다 왔을 때 높은 우선순위로 있습니다. 이 조합은 그리 필요하지 않습니다. 왜냐하면 브라우저가 어쨌든 높은 우선순위로 이미지를 로드할 수 있습니다.

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

스크롤 없이 즉시 볼 수 있는 모든 이미지는 정상적으로 로드됩니다. 이미지 기기 표시 영역 매우 아래에 있는 정보는 사용자가 그 근처로 스크롤할 때만 가져옵니다.

Chromium의 지연 로드 구현은 화면 밖 이미지가 사용자가 스크롤할 때쯤이면 로드가 완료될 때까지 표시 영역에 표시되기 한참 전에 가져와서 미리 가져옵니다.

거리 임계값은 다음 요소에 따라 달라집니다.

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

다양한 유효 연결 유형의 기본값은 다음에서 확인할 수 있습니다. Chromium 소스를 참고하세요. 이러한 다양한 임곗값으로 실험하려면 네트워크를 제한하여 찾을 수 있습니다.

데이터 절약 및 표시 영역으로부터의 거리 임곗값 개선

2020년 7월, Chrome은 개발자의 기대를 더욱 효과적으로 충족할 수 있도록 표시 영역으로부터의 이미지 지연 로드 거리 기준을 맞추기 위해 상당한 개선 작업을 진행했습니다.

빠른 연결 (4G)의 경우 Chrome의 표시 영역으로부터의 거리 기준을 3000px에서 1250px로 줄이고 연결 속도가 느린 경우 (3G 이하) 기준을 4000px에서 2500px로 변경했습니다. 이 변경으로 다음과 같은 두 가지 이점을 얻을 수 있습니다.

• <img loading=lazy>가 JavaScript 지연 로드 라이브러리에서 제공하는 환경과 더 가깝게 동작합니다.
• 새로운 표시 영역으로부터의 거리 기준은 사용자가 스크롤할 때쯤이면 이미지가 이미 로드되었을 것입니다.

다음에서 고속 연결 (4G)에 대한 데모 중 하나에서 표시 영역으로부터의 거리 임계값과 이전 임계값을 비교해 볼 수 있습니다.

<ph type="x-smartling-placeholder">

</ph>

LazySizes (인기 JavaScript 지연 로드 라이브러리) 대비 새로운 기준점은 다음과 같습니다.

<ph type="x-smartling-placeholder">

</ph>

이미지에 크기 속성 추가하기

브라우저가 이미지를 로드하는 동안 이미지의 현재 이미지 또는 명시적으로 지정된 경우를 제외하고 모두 포함됩니다. 브라우저에서 페이지에 이미지를 위한 충분한 공간을 마련하고 업무에 지장을 주는 레이아웃 변경 모든 <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에서 이미지를 자동으로 지연 로드할 수 있나요?

이전에는 Chromium에서 적합한 이미지를 자동으로 지연 로드했습니다. 라이트 모드일 경우 이(가) Android용 Chrome에서 사용 설정되어 있고 loading 속성이 설정되지 않았습니다. 제공되거나 loading="auto"로 설정됩니다. 하지만 라이트 모드 및 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
}

예를 들어 latencysizes는 자바스크립트 지연 로드 라이브러리입니다. 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에서 이 기능을 사용 설정할 때 비정상적인 동작이 발생했나요? 버그 신고