[web] image lazy loading 기법

https://imagekit.io/blog/lazy-loading-images-complete-guide/ 글을 요약했다. 100% 이해하려면 해당 글을 정독하길 바란다.

---

 

방법1

data-src 속성에 이미지 url를 넣고 viewport에 진입 시 data-src 속성을 src속성에 추가

 

viewport 진입을 어떻게 판단하나?

1) scroll, resize, orientationChange 이벤트를 받아 처리

2) intersection observer api를 이용해서 처리

<img src="" data-src="example.jpg" alt="..." />

이벤트 처리 demo: https://codepen.io/daewoong-kim/pen/eYapggv

intersection observer demo: https://codepen.io/daewoong-kim/pen/pomjRPb

 

방법2

img tag에 loading 속성을 이용해서 처리

본인이 cover해야할 browser를 확인하기 바란다. https://caniuse.com/loading-lazy-attr

<img src="example.jpg" loading="lazy" alt="..." />

 

demo: https://codepen.io/daewoong-kim/pen/gOJagoN

make sure to disable network cache to success this test whenever you run :)

 

 

주의사항

어떠한 방법을 쓰든 주의사항이 있다.

 

1) 페이지 로드시 바로 보여지는 것들은 lazy loading 할 필요 없다.

2) 이미지 지연로딩 전 후 콘텐츠 위치가 밀려나는 것을 방지해야한다. (width, height 값을 미리 설정)

 

 

Placeholder 설정 방법

1) 주요 색상 사용하기 

1x1 사이즈로 스케일을 감소 시키고 해당 픽셀로 원하는 사이즈 만큼 확대 시키는 로직

image saas에서 제공해주지 않는다면, 추천하는 방법은 아니다.

https://manu.ninja/dominant-colors-for-lazy-loading-images/

 

2) 저화질 이미지로 사용하기

처음에 저화질 이미지를 src 속성 값에 넣어주고 data-src에 원하는 이미지를 넣어준다. 원하는 시점에 data-src 값을 src에 넣는다.

image saas에서 저화질 이미지 url를 쉽게 얻을 수 없다면 추천하지 않는다.

 

https://www.youtube.com/watch?v=BXoNamwkqi0

 

3) default 이미지를 자체적으로 노출한다.

제일 쉬운방법이다.