웹사이트 이미지 최적화 기초 가이드

4원칙

1. 형식: 사진 WebP, 그래픽 WebP·PNG, 호환 필요시 JPG
2. 크기: 표시 크기(2배까지)보다 크게 올리지 않기
3. 압축: 화질 75~85, 썸네일은 더 낮게
4. 로딩: 첫 화면 외 이미지는 지연 로딩(lazy)

우선순위 정하기

용량 큰 순서대로 5장만 고쳐도 체감이 커요. 히어로 이미지 1장이 전체의 절반을 차지하는 경우가 흔해요.

측정은 숫자로

작업 전후로 페이지 속도 측정 도구(Lighthouse 등)의 LCP를 비교하세요. 이미지가 병목인지 다른 요소인지 구분돼요.