Html <img loading='lazy'> 😴

html의 클래스에서 img 태그에 loading='lazy'를 추가해주면 image의 lazy 로딩이 가능합니다.

<img loading="lazy" src="" width="200" height="200" />

lazy 로딩이란 이미지 태그가 뷰포트 내에 위치하게 되었을때 load를 하는 것을 의미합니다.

---

loading 속성이 추가되기 전에는 intersection Observer API 객체를 생성하고 observe를 하다가

viewport내에 들어오게 되면 src를 바꿔주는 식으로 lazy loading을 하였었습니다.

 

또는

 

scroll, resize 또는 orientationchange 같은 이벤트 핸들러를 사용한다고 하는데 이 방식은 제가 잘 모르겠습니다.

 

---

 

loading 속성에 들어가는 값은 아래 세개의 속성이 들어갑니다

• auto : 브라우저의 기본 lazy loading 동작입니다.
• lazy : 뷰포트에 위치하게 되었을때 load 됩니다
• eager : 페이지에서의 위치에 관계없이 리소스를 즉시 로드합니다.

auto 값은 사용하지 않는것이 좋다고 문서에는 나와있습니다.

 

---

lazy loading 사용할거면 width, height 꼭 지정해주어야 합니다.

inline으로 설정해주거나 inline 스타일에서 직접 값을 정의해주세요!!! 

이거 해주지 않으면 로딩되고 나서 레이아웃 발생하게 됩니다.

빈번한 레이아웃은 로딩을 느리게 만듭니다 ㅜㅜ

 

설정해주지 않은 상태면 default width, height이 0이기 때문에 로딩 이후에 img가 들어오게 되면 전체 레이아웃 다시 계산하여야 합니다.

 

---

반응형 작업을 주로 하실때 picture tag를 사용하시면 이미지 부분은 편리하게 반응형 작업을 할 수 있는데요

picture tag에도 lazy loading을 정의할 수 있습니다.

2022.03.31 - [markup/html] - Html picture tag 🏞

 

이때는 img 태그에만 loading="lazy"를 적용해주면 브라우저에서 알아서 처리해줍니다.

참고로 저 img 태그는 source의 media에서 해당하는 사항이 없을때 나타나는 default 사항입니다.

<pitcture>
  <source media="all" srcset="example1.jpg">
  <img src="example.jpg" loading="lazy" >
</picture>

---

화면에 바로 보이는 img 태그 요소들에는 loading="lazy" 속성을 사용하는 것을 피하는것이 좋다고 합니다.

loading="lazy"를 사용하면 브라우저에서 IntersectionObserver를 사용 가능 여부에 따라 이미지의 뷰포트 내 위치를 알때까지 기다려야 한다고 합니다.

 

아래의 예제는 즉시 보이는 이미지에는 loading 속성을 적용하지 않은 예시 입니다.

<!-- 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">

 

* css에서 설정하는 배경이미지에는 lazyLoading을 적용할 수 없다고 합니다....

 

---

 

https://web.dev/i18n/ko/browser-level-image-lazy-loading/

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