빠른 웹 페이지 로딩을 위해 이미지를 효율적으로 로딩하는 것은 매우 중요합니다. 이를 위해 자바스크립트를 사용하여 이미지 로딩을 최적화하는 방법을 알아보겠습니다.

1. Lazy Loading 이미지

Lazy Loading은 페이지 로딩 시 필요한 이미지만 로드하여 초기 페이지 로딩 속도를 향상시키는 방법입니다. 사용자가 스크롤하거나 특정 이벤트가 발생할 때 이미지를 동적으로 로드합니다.

// Lazy Loading 이미지 구현 예제
var lazyImages = document.querySelectorAll('img[data-src]');

function lazyLoad() {
  lazyImages.forEach(function(img) {
    if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== 'none') {
      img.setAttribute('src', img.getAttribute('data-src'));
      img.removeAttribute('data-src');
    }
  });
}

document.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad);

위의 예제에서는 data-src 속성을 이용하여 이미지의 실제 URL을 설정합니다. 사용자가 스크롤하거나 윈도우 크기가 변경될 때 scroll, resize, orientationchange 이벤트가 발생하며, 해당 이벤트가 발생할 때마다 lazyLoad 함수가 호출됩니다. 이 함수는 화면에 보이는 이미지의 data-src 속성을 읽어와 src 속성에 설정하여 이미지를 로드합니다.

2. 이미지 압축과 최적화

웹 페이지에서 사용되는 이미지를 압축하고 최적화하여 파일 크기를 줄이는 것은 페이지 로딩 속도를 향상시키는 또 다른 방법입니다. 이미지를 최적화하려면 이미지 편집 도구나 온라인 이미지 최적화 도구를 사용할 수 있습니다.

이미지 압축 및 최적화 도구 예시:

• TinyPNG
• JPEGmini

이러한 도구를 사용하여 이미지 파일의 품질을 유지하면서 파일 크기를 줄일 수 있습니다.

위에서 소개한 방법들을 활용하여 웹 페이지의 이미지 로딩을 효율적으로 구현할 수 있습니다. Lazy Loading을 통해 초기 페이지 로딩 속도를 개선하고, 이미지 압축 및 최적화를 통해 파일 크기를 줄여 전체 페이지 로딩 속도를 향상시킬 수 있습니다.

#웹개발 #자바스크립트