STAGE 6 · Lv.31

이미지 최적화와 CDN 설정

WebP 변환, 지연 로딩(Lazy Loading), Cloudflare CDN 설정, 이미지 압축, 반응형 이미지, srcset 활용까지 미디어 최적화의 모든 것을 배웁니다.

이미지 최적화가 중요한 이유

웹 페이지에서 이미지가 차지하는 비중

이미지는 일반적인 웹 페이지 용량의 50-70%를 차지합니다. 최적화되지 않은 이미지는 페이지 로딩 속도를 크게 저하시키고, 사용자 경험과 SEO에 부정적인 영향을 미칩니다. Google은 Core Web Vitals의 LCP(Largest Contentful Paint) 지표에서 이미지 로딩 속도를 핵심 요소로 평가합니다.

이미지 최적화는 시각적 품질을 유지하면서 파일 크기를 줄이는 것이 목표입니다. 올바른 포맷 선택, 적절한 크기 조정, 효율적인 압축, 지연 로딩, CDN 활용 등의 기법을 조합하면 이미지 용량을 80% 이상 줄이면서도 눈에 띄는 품질 저하 없이 사이트를 운영할 수 있습니다.

📸

50-70%

웹 페이지에서 이미지 용량 비율

🚀

80%+

최적화 시 용량 절감률

📈

+20%

1초 빨라지면 전환율 향상

🙅

53%

3초 이상 걸리면 이탈하는 비율

1. 이미지 포맷 선택

웹에서 사용되는 이미지 포맷 비교

올바른 이미지 포맷을 선택하는 것은 이미지 최적화의 첫 번째 단계입니다. 각 포맷의 특성을 이해하고 용도에 맞게 선택하세요.

포맷	특징	용도	추천도
WebP	JPEG 대비 25-35% 작은 크기, 투명도 지원	대부분의 웹 이미지	최추천
AVIF	WebP보다 20% 더 작음, 최신 포맷	최신 브라우저 대상	추천
JPEG	손실 압축, 폴백용	사진, 복잡한 이미지	기본
PNG	무손실, 투명도 지원, 큰 파일	로고, 아이콘, 스크린샷	제한적
SVG	벡터, 무한 확대, 매우 작은 크기	로고, 아이콘, 일러스트	강추천
GIF	애니메이션 지원, 256색 제한	간단한 애니메이션	비추천

💡 WebP가 최선인 이유

WebP는 Google이 개발한 차세대 이미지 포맷으로, 현재 모든 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. JPEG 대비 25-35% 작은 파일 크기를 유지하면서 동일한 시각적 품질을 제공합니다. 또한 PNG처럼 투명도를 지원하므로, JPEG와 PNG를 모두 대체할 수 있습니다. WordPress 5.8부터 WebP 업로드를 기본 지원합니다.

🔒

여기까지는 미리보기입니다

이미지 최적화와 CDN 설정
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)