이미지 압축 — 웹사이트 속도를 높이는 파일 용량 줄이기

이미지 압축 도구 바로 사용하기 →

이미지가 웹 속도에 미치는 영향

웹페이지에서 이미지가 차지하는 용량 비중은 평균 50~70%다. 구글의 Core Web Vitals 지표 중 LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정한다. 대부분의 경우 이 '가장 큰 콘텐츠'가 이미지다. LCP 2.5초 이내가 '양호' 기준이고, 이를 초과하면 구글 검색 순위에 불리하게 작용한다.

손실 압축과 무손실 압축의 차이

무손실 압축(Lossless): 이미지 데이터를 손상시키지 않고 파일 구조만 최적화해 크기를 줄인다. PNG 파일에 주로 적용된다. 로고, 아이콘, 텍스트가 많은 이미지에 적합하다.

손실 압축(Lossy): 사람 눈에 잘 인식되지 않는 데이터를 제거해 파일 크기를 크게 줄인다. JPEG 파일에 주로 쓰인다. 품질 75~85% 수준에서는 육안으로 원본과 차이를 느끼기 어렵고 용량은 50~70% 줄일 수 있다.

이미지 형식 선택 기준

JPEG: 사진과 복잡한 색상을 가진 이미지에 최적화되어 있다. 투명 배경은 지원하지 않는다.

PNG: 투명 배경이 필요하거나 로고처럼 선명한 선으로 구성된 이미지에 적합하다. 같은 내용이면 JPEG보다 용량이 크다.

WebP: 구글이 개발한 형식으로, 같은 품질 기준에서 JPEG보다 25~35% 용량이 작다. 모든 주요 브라우저에서 지원된다.

AVIF: WebP의 후속 형식으로, WebP보다 추가로 20~30% 더 작은 파일을 만들 수 있다. 인코딩 속도가 느려 대량 처리 시 주의가 필요하다.

SVG: 벡터 그래픽. 아이콘이나 일러스트처럼 확대해도 깨지지 않아야 하는 이미지에 최적이다.

실무에서 권장하는 압축 설정

• 사진: JPEG 품질 75~85%, 또는 WebP 변환
• 일러스트·다이어그램: 단순 아이콘은 SVG, 복잡한 도식은 PNG 무손실 압축
• 업로드 전 리사이즈: 실제 표시 크기에 맞게 사전 조정. 4000px 원본을 800px로만 표시한다면 미리 줄여서 올린다

Next.js, WordPress 등에서 자동화하기

Next.js: next/image 컴포넌트를 쓰면 이미지를 자동으로 WebP로 변환하고, 표시 크기에 맞게 리사이즈하며, lazy loading을 적용한다.

WordPress: Imagify, ShortPixel, Smush 같은 플러그인이 업로드 시 자동 압축을 처리한다.

Squoosh CLI: 구글이 만든 오픈소스 CLI 도구로, 빌드 프로세스에 이미지 최적화를 통합할 때 유용하다.

Tooly 이미지 압축 도구 사용 방법

1. 이미지 파일(JPG, PNG, WebP 등)을 업로드하거나 드래그 앤 드롭한다
2. 압축 품질을 슬라이더로 조정한다. 기본값은 품질 80%다
3. 미리보기에서 원본과 압축 결과를 비교한다
4. 만족스러우면 다운로드한다

로고나 선명도가 중요한 이미지는 품질을 90% 이상으로 유지하는 것이 좋다. 배경 사진처럼 디테일보다 분위기가 중요한 이미지는 70~75%까지 낮춰도 시각적 차이가 크지 않다.