페이지 안에 있는 이미지들이 화면에 보여지는 시점에 로딩을 할 수 있도록 하는 기법

• Lazy Loading을 다루는 방식은 페이지 내의 거의 모든 리소스에 적용 가능
• 코드 스플리팅과 비슷

이미지 Lazy Loading의 필요성

• 성능 향상 : 웹페이지 초기 로딩 시 필요로 한 이미지 수를 줄일 수 있어 로딩 성능 향상에 도움
• 비용 감소 : 데이터 통신 비용의 감소로, 서비스를 이용하는 유저의 비용 절감에 도움

이미지 Lazy Loading을 사용할 때 주의점

• 웹페이지가 처음 렌더링될 때 보여지는 이미지는 lazy loading을 적용하지 않는 것이 좋음
  • 성능상의 이점이 미미하며, 초기에 빠르게 로드되는 것이 사용자 경험에 도움

적용 방법

1. <img> 태그와 JS를 이용한 방법

1.1. 이미지 로딩을 사전에 막기

• src 속성 대신 다른 속성을 이용해 URL을 지정

• 이후 JS를 통해 브라우저에게 이미지를 언제 로드할 지 알려주어야 함

  <!-- data-src라는 속성에 url 지정 -->
  <!-- 이 경우 src 속성이 비워져 있으므로, 브라우저는 이미지 로드하지 않음 -->
  
  <img data-src="<https://ik.imagekit.io/demo/default-image.jpg>" />