이미지 최적화로 웹사이트 성능 향상 전략

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자 및 프론트엔드 엔지니어

• 난이도: 중간 (기본 웹 개발 지식 기반)

핵심 요약

• 이미지 최적화 중요성 : 웹 페이지의 60-70% 무게를 차지하며, 사용자 경험, SEO, 모바일 성능, 서버 비용에 직접적인 영향
• 최적화 기법 : WebP, AVIF 등 현대형 포맷 사용, lazy loading 구현, srcset 및 sizes 속성 활용
• 도구 및 모니터링 : Lighthouse, WebPageTest, Squoosh 활용, LCP, FCP 등 주요 성능 지표 추적

섹션별 세부 요약

1. 최적화의 필요성

• 사용자 경험 : 1초 지연으로 전환율 7% 감소
• SEO 영향 : 구글이 페이지 속도를 랭킹 요소로 고려
• 모바일 성능 : 느린 연결 환경에서 최적화 필수
• 서버 비용 절감 : 이미지 크기 감소로 대역폭 사용량 50% 감소 가능

2. 이미지 포맷 선택 전략

• JPEG : 색상이 많은 사진에 적합, 압축률 80-85% 권장
• PNG : 투명도가 필요한 로고/아이콘, 무손실 압축
• WebP : 25-35% 작은 파일 크기, 95% 이상 브라우저 지원
• AVIF : JPEG 대비 최대 50% 파일 크기 감소, 브라우저 호환성 검증 필요

3. 압축 및 품질 설정

• 고품질 (90-100%) : 주요 이미지에만 사용
• 중간 품질 (80-85%) : 대부분의 이미지에 적용 (권장)
• 저품질 (60-75%) : 썸네일, 배경 이미지에 사용

4. 반응형 이미지 구현

• srcset 및 sizes 속성 : 디바이스 기반 이미지 크기 자동 조정
• 예시 코드 :

5. 레이지 로딩 구현

• Intersection Observer API 사용 :

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
});
images.forEach(img => observer.observe(img));

• 모던 브라우저 지원 : loading="lazy" 속성 사용 가능

6. 성능 모니터링 및 도구

• Lighthouse : 포괄적 성능 분석
• WebPageTest : 워터폴 분석을 통한 로딩 시간 추적
• GTmetrix : 지속적인 성능 모니터링
• 메트릭 추적 :

- LCP (2.5초 이하)

- FCP (1.8초 이하)

- 총 페이지 무게 (모바일 1MB 이하)

- 이미지 무게 비율 (60% 이하)

결론

• 현대형 포맷 (WebP/AVIF) 사용 및 레이지 로딩 구현으로 성능 향상
• srcset과 sizes를 활용한 반응형 이미지 지원
• Lighthouse 등 도구로 지속적인 성능 모니터링 및 LCP/FCP 지표 관리
• 과도한 압축은 품질 저하로 피하고, 대체 이미지 및 리타일레이트 디스플레이 지원 필수