이미지 압축은 웹 성능을 위해 할 수 있는 가장 효과적인 최적화 중 하나입니다. 제대로 압축된 이미지는 원본과 똑같아 보이지만 50~80% 더 빠르게 로드됩니다. 올바르게 하는 방법을 알려드립니다.
"품질 손실"이 실제로 의미하는 것
사람들이 "품질 손실 없이 압축한다"고 말할 때, 보통 눈에 보이는 품질 손실이 없다는 뜻이지, 수학적으로 무손실 압축을 의미하지는 않습니다. 인간의 시각 체계는 완벽하지 않습니다. 밝기보다 색상 변화에 덜 민감하고, 평평한 영역보다 복잡한 영역의 디테일에 덜 민감하며, 텍스처가 있는 영역보다 매끄러운 그라데이션에서 아티팩트에 더 민감합니다.
스마트 압축 알고리즘은 이런 한계를 활용합니다. 품질 80으로 잘 압축된 JPEG는 일반적인 시청 거리에서 품질 100과 사실상 구별할 수 없습니다. 차이는 200% 이상 확대해서 나란히 비교할 때만 나타납니다.
포맷별 올바른 압축 설정
JPEG / JPG
JPEG 품질은 보통 1100 사이의 숫자로 표현됩니다. **웹 이미지에는 품질 8085가 표준 권장값입니다**:
- 품질 100: 무손실에 가까움, 파일 크기가 매우 큼
- 품질 85: 100보다 약 30% 작음, 눈에 보이는 차이가 거의 없음
- 품질 80: 약 45% 작음, 대부분의 사진에 여전히 우수함
- 품질 70: 약 60% 작음, 매끄러운 그라데이션에서 약간의 아티팩트가 보일 수 있음
- 품질 60: 약 70% 작음, 썸네일 및 중요하지 않은 이미지에 적합
사용 사례별로:
- 히어로 이미지: 품질 80~85
- 블로그 게시물 썸네일: 품질 70~75
- 제품 사진 (이커머스): 품질 80~85
- 소셜 미디어 내보내기: 품질 75~80
PNG
PNG는 무손실 압축을 사용하므로 "품질" 설정을 조정해서 품질을 낮출 수 없습니다. 하지만 다음은 가능합니다:
- 색상 깊이 줄이기: PNG가 16색이나 32색만 사용하는 경우 (로고, 아이콘), 8비트(256색) 팔레트 PNG로 저장하면 파일 크기가 크게 줄어듭니다.
- 더 나은 압축 알고리즘 사용: PNGQuant 같은 도구는 손실 팔레트 축소를 적용해 눈에 띄는 변화 없이 PNG 파일 크기를 60~80% 줄일 수 있습니다.
- WebP로 변환: PNG로 저장된 사진의 경우, WebP로 변환하면 PNG 압축보다 훨씬 더 많은 용량을 절약할 수 있습니다.
WebP
WebP 압축 품질은 JPEG와 비슷하게 작동하지만 같은 품질 수준에서 더 작은 파일을 만들어냅니다. 손실 WebP는 품질 75~80이 JPEG 품질 85와 시각적으로 비슷하면서도 파일 크기는 약 25~35% 더 작습니다.
단계별 가이드: 눈에 보이는 품질 손실 없이 압축하기
사진 (JPG/JPEG)의 경우
- 품질 80에서 시작해 100% 확대한 원본과 비교합니다
- 특히 다음 부분을 확인합니다: 매끄러운 그라데이션(하늘, 피부톤), 선명한 가장자리, 텍스트 오버레이
- 아티팩트가 보이지 않으면 75를 시도합니다
- 차이를 볼 수 없는 가장 낮은 품질에서 멈춥니다
그래픽과 로고 (PNG)의 경우
- 먼저 이미지가 색상 수가 제한된 인덱스 팔레트를 사용할 수 있는지 확인합니다
- PNG로 저장된 사진이라면 대신 WebP로 변환합니다
- 로고에는 PNGQuant 기반 압축을 사용합니다. 종종 60% 이상의 용량 감소를 달성합니다
모든 이미지의 경우: 압축하기 전에 크기부터 조정하세요
가장 간과되는 최적화: 압축하기 전에 이미지가 올바른 크기인지 확인하세요.
웹사이트가 이미지를 800px 너비로 표시한다면, 4000px가 아니라 800px로 업로드하세요. 표시 크기의 4배로 업로드하면 대역폭을 낭비하고 압축을 더 어렵게 만듭니다.
- 먼저 최대 표시 크기로 리사이즈합니다 (이미지 리사이즈 도구)
- 그런 다음 목표 파일 크기로 압축합니다
일괄 압축
압축해야 할 이미지가 수십 개 또는 수백 개 있다면 (제품 사진, 블로그 이미지, 갤러리 사진), 한 번에 여러 이미지를 업로드하고 동일한 품질 설정을 모두에 적용할 수 있는 이미지 압축기를 사용하세요.
최대 압축을 위한 올바른 포맷 선택
| 포맷 | 최적 용도 | PNG 대비 일반적인 압축률 |
|---|---|---|
| JPG (q80) | 사진 | 85~90% 더 작음 |
| WebP (q75) | 사진 + 그래픽 | 90~95% 더 작음 |
| PNG (8비트) | 색상이 적은 로고 | 40~60% 더 작음 |
| WebP 무손실 | 로고, 스크린샷 | PNG보다 20~35% 더 작음 |
| AVIF (q60) | 사진 | 92~97% 더 작음 |
결과 확인하기
압축 후, 브라우저나 이미지 뷰어에서 이미지를 100%로 확대해 다음을 확인하세요:
- 매끄러운 영역 (하늘, 피부, 그라데이션): 밴딩이나 블록 현상이 있는지 확인
- 선명한 가장자리 (텍스트, 선): 링잉이나 블러가 있는지 확인
- 복잡한 영역 (나뭇잎, 천): 아티팩트를 잘 숨겨줍니다. 보통 문제없습니다
- 단색 평면: 강한 압축 시 양자화 노이즈가 나타날 수 있습니다
아티팩트가 보이면 품질 설정을 5~10 높이고 다시 시도하세요.
웹용 목표 파일 크기
2026년 웹 이미지를 위한 실용적인 목표치입니다:
| 이미지 유형 | 목표 크기 |
|---|---|
| 히어로 / 배너 이미지 | 200 KB 미만 |
| 블로그 게시물 헤더 | 100 KB 미만 |
| 제품 썸네일 | 50 KB 미만 |
| 로고 | 20 KB 미만 (PNG) 또는 SVG 사용 |
| 소셜 미디어 게시물 | 300 KB 미만 |
PicsSizer의 이미지 압축기를 사용해 품질 설정을 완전히 제어하면서 이미지를 이런 목표치로 압축하세요. 계정도 필요 없고 서버 업로드도 없습니다.
자주 묻는 질문
- 이미지 압축 시 어떤 품질 설정을 사용해야 하나요?
- 사진의 경우 JPEG 품질 75~85가 최적의 지점입니다. 품질 100 대비 파일 크기가 40~60% 작으면서도 일반적인 시청 거리에서는 화질 차이가 눈에 띄지 않습니다. 웹 썸네일의 경우 품질 60~70도 괜찮은 경우가 많습니다. 설정을 확정하기 전에 항상 결과물을 눈으로 직접 비교해 보세요.
- 손실 압축과 무손실 압축의 차이는 무엇인가요?
- 손실 압축(JPG, WebP에서 사용)은 파일 크기를 줄이기 위해 일부 이미지 데이터를 영구적으로 버립니다. 버려지는 데이터는 시각적 영향을 최소화하도록 지능적으로 선택됩니다. 무손실 압축(PNG, WebP의 무손실 모드에서 사용)은 데이터를 버리지 않고 압축하므로 압축 해제된 이미지가 픽셀 단위로 원본과 동일합니다.
- 화질 저하 없이 이미지를 얼마나 압축할 수 있나요?
- 이는 이미지 내용에 따라 크게 달라집니다. 부드러운 그러데이션이 있는 사진은 품질 70까지 압축해도 아티팩트가 눈에 띄지 않을 수 있습니다. 선명한 텍스트나 단색이 있는 이미지는 품질 80에서도 아티팩트가 보일 수 있습니다. 항상 눈으로 확인하고 100%로 확대해 아티팩트 여부를 점검하세요.
- 이미지 크기를 조정하면 파일 용량도 줄어드나요?
- 네, 크게 줄어듭니다. 이미지 크기를 절반으로 줄이면(예: 가로 2000px에서 1000px로) 일반적으로 파일 크기가 4배 이상 줄어듭니다. 웹사이트에 가로 800px 이미지만 필요하다면 4000px로 업로드할 이유가 없습니다.
- 무료로 온라인에서 이미지를 압축하기 가장 좋은 도구는 무엇인가요?
- PicsSizer의 이미지 압축기를 사용하면 브라우저에서 직접 JPG, PNG, WebP 등 다양한 포맷을 품질 설정을 조정하며 압축할 수 있습니다. 무료로 제공되며 이미지를 로컬에서 처리하고(서버 업로드 없음), 일괄 압축도 지원합니다.