🖼️이미지 압축 품질 가이드

사용 목적을 선택하면 포맷별 최적 압축 설정과 권장 사항을 확인할 수 있습니다.

사용 목적

이미지 포맷별 특징과 선택 기준

올바른 이미지 포맷과 압축 설정 선택은 웹 성능, 시각 품질, 파일 용량에 큰 영향을 미칩니다. 상황에 맞는 포맷을 선택하면 같은 품질에서 최대 50~70% 용량을 절약할 수 있습니다.

포맷별 간단 비교

JPEG는 사진에 적합한 손실 압축 포맷으로 가장 호환성이 좋습니다. PNG는 투명도를 지원하는 무손실 포맷으로 로고·아이콘·스크린샷에 적합합니다. WebP는 JPEG와 PNG의 장점을 모두 가지며 용량이 더 작아 웹에서 가장 권장됩니다. AVIF는 최신 포맷으로 WebP보다 더 작지만 구형 브라우저 지원이 제한됩니다. SVG는 벡터 그래픽으로 모든 크기에서 선명하며 아이콘·로고에 최적입니다.

웹 성능 최적화 팁

next-gen 포맷(WebP, AVIF)을 우선 제공하고 <picture> 태그로 JPEG 폴백을 추가하세요. 이미지에 loading="lazy" 속성을 추가하면 뷰포트 밖 이미지의 초기 로드를 지연시켜 LCP(Largest Contentful Paint)를 개선할 수 있습니다. srcset으로 해상도별 이미지를 제공하는 것도 중요합니다.

자주 묻는 질문

이미지 압축 도구는 무엇을 쓰나요?

Squoosh(구글 무료), TinyPNG, ImageOptim(Mac) 등이 많이 사용됩니다. 빌드 파이프라인에서는 Sharp(Node.js), Imagemin 등을 사용해 자동화할 수 있습니다.

GIF 대신 다른 포맷을 쓸 수 있나요?

네, 애니메이션에는 WebP(animated) 또는 MP4/WebM 동영상이 GIF보다 훨씬 작은 용량으로 더 좋은 품질을 제공합니다. Lottie(JSON 기반 애니메이션)도 UI 애니메이션에 효과적입니다.

AVIF는 언제부터 안전하게 쓸 수 있나요?

2024년 기준 Chrome, Firefox, Safari 16.4+에서 지원됩니다. 사용자의 브라우저 분포를 파악하고 <picture> 태그로 AVIF → WebP → JPEG 순으로 폴백을 제공하면 안전하게 활용할 수 있습니다.