웹용 이미지 압축 방법 (화질을 망치지 않고)

이미지 압축이 중요한 이유

숫자가 분명히 말해 줍니다:

• 모바일 사용자의 53%는 로딩이 3초를 넘는 페이지를 떠납니다 (Google)
• 로딩 시간이 100ms 줄어들 때마다 전환율이 1% 오릅니다 (Deloitte)
• Core Web Vitals는 Google 순위에 직접 영향을 주며, LCP(Largest Contentful Paint)는 거의 항상 이미지입니다
• 평균적인 웹 페이지는 1.5 MB의 이미지를 내려받게 하며, 대부분은 최적화되지 않았습니다

이미지 압축 체크리스트

1. 알맞은 형식 선택: 웹에는 WebP, 사진에는 JPG, PNG는 투명도가 필요하고 WebP를 쓸 수 없을 때만
2. 먼저 크기 조정: 800px 영역에 4000px 이미지를 넣지 마세요. 표시 크기(레티나는 2배)에 맞게 이미지 크기를 조정하세요.
3. 압축: 손실 형식은 화질 75-85를 사용하세요. 대부분의 사용자는 차이를 알아채지 못합니다.
4. WebP 사용: WebP로 변환하면 바로 25-35% 줄어듭니다.
5. 지연 로딩: 첫 화면 아래의 이미지에 loading="lazy"를 추가하세요.
6. 크기 지정: 레이아웃 이동을 막으려면 항상 width와 height 속성을 넣으세요.

무료 이미지 압축 도구

브라우저 기반 (업로드 필요 없음)

• WebP Buddy 스마트 압축: 최적의 화질 설정을 자동으로 찾습니다. 전적으로 브라우저에서 작동하므로 이미지가 기기 밖으로 나가지 않습니다.
• WebP 압축: WebP 이미지의 화질을 직접 조절합니다.
• 일괄 변환: 여러 이미지를 한 번에 변환하고 압축합니다.

명령줄

# Convert and compress with cwebp
cwebp -q 80 photo.jpg -o photo.webp

# Compress existing WebP
cwebp -q 75 image.webp -o image-compressed.webp

# Batch convert a folder
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

화질 설정 요약표

자주 묻는 질문