지금은 웹 페이지에서 대용량 이미지를 사용하는 것이 일반적입니다. 그러나 이러한 이미지들은 페이지의 로딩 속도를 느리게 만들 수 있습니다. 이러한 문제를 해결하기 위해 Lazy Loading이라는 기술을 활용하여 이미지 로딩을 최적화할 수 있습니다.

Lazy Loading이란?

Lazy Loading은 웹 페이지에 있는 이미지들을 지연해서 로딩하는 방법입니다. 즉, 페이지가 로딩될 때 모든 이미지를 동시에 로딩하지 않고, 사용자가 스크롤하여 이미지가 나타나야 로딩되도록 합니다.

Lazy Loading의 장점

1. 로딩 속도 개선: 모든 이미지를 한 번에 로딩하지 않으므로 초기 페이지 로딩 시간을 줄일 수 있습니다.

2. 대역폭 절약: 사용자가 스크롤해서 이미지가 나타날 때에만 해당 이미지를 로딩하기 때문에 대역폭을 절약할 수 있습니다.

3. 사용자 경험 향상: 페이지가 더 빨리 로딩되고, 스크롤 속도가 향상되므로 사용자 경험이 개선됩니다.

Lazy Loading 구현 방법

1. Intersection Observer API

Intersection Observer API는 브라우저에서 뷰포트와 관찰 대상 요소 간의 교차 상태를 비동기적으로 감지하는 API입니다. 이를 활용하여 이미지의 로딩 여부를 관찰할 수 있습니다.

const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      io.unobserve(lazyImage);
    }
  });
});

const lazyImages = document.querySelectorAll('.lazy-image');
lazyImages.forEach((lazyImage) => {
  io.observe(lazyImage);
});

2. Lazy Loading 라이브러리 사용

위의 방법이 복잡하게 느껴질 수도 있으며, 여러 가지 고려해야 할 사항이 많을 수 있습니다. 이런 경우 Lazy Loading을 간편하게 구현할 수 있는 라이브러리를 사용하는 것이 좋습니다. 대표적인 라이브러리로는 LazyLoad.js가 있습니다.

<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.0/lazysizes.min.js" async></script>

<img data-src="image.jpg" class="lazyload" alt="Image">

위의 예시에서 img 태그에 data-src 속성을 사용하여 이미지의 실제 소스를 지정하고, class 속성에 lazyload 클래스를 추가하여 Lazy Loading을 구현합니다.

결론

Lazy Loading은 웹 페이지에서 대용량 이미지를 사용할 때 로딩 속도를 개선시키는 간편하고 효과적인 방법입니다. Intersection Observer API나 Lazy Loading 라이브러리를 통해 이미지 로딩 최적화를 구현해보세요.

#webdevelopment #lazyloading