실제 상황: 4.8MB 카메라 사진을 블로그 본문용으로 준비하기
원본은 4032×3024 JPEG지만 본문 최대 표시 폭은 1200px입니다. 품질만 낮추면 불필요한 픽셀을 계속 저장하고 세부가 뭉개질 수 있습니다.
판단 결과: 비율을 유지해 1200×900으로 먼저 줄인 뒤 WebP 78과 JPEG 82를 비교합니다. 오래된 편집 시스템 호환성이 중요하면 조금 더 큰 JPEG를 선택합니다.
단계별로 적용하는 방법
- 이미지가 실제로 표시될 최대 CSS 픽셀과 고밀도 화면 배율을 고려해 목표 가로 크기를 정합니다.
- 비율을 잠근 채 픽셀 크기를 줄이고 작은 글자와 얼굴이 여전히 읽히는지 확인합니다.
- JPEG 또는 WebP를 골라 높은 품질 값부터 시작해 5~10 단위씩 낮춥니다.
- 100% 확대와 실제 표시 크기에서 원본·결과를 번갈아 보며 허용할 경계를 찾습니다.
- 메타데이터 제거와 투명도 처리까지 확인하고 결과 용량이 목표에 맞으면 저장합니다.
비교해서 선택하기
| 방법 | 용량 효과 | 주요 손실 | 먼저 적용할 상황 |
|---|---|---|---|
| 가로세로 픽셀 축소 | 매우 큼 | 확대 시 세부 부족 | 표시 크기보다 원본이 클 때 |
| JPEG 품질 낮춤 | 중간~큼 | 블록·링잉·그라데이션 | 사진 호환성이 중요할 때 |
| WebP 품질 낮춤 | 중간~큼 | 세부 질감 감소 | 현대 웹 전달용 |
| PNG 유지 | 사진에서는 작음 | 픽셀 손실 없음 | 투명 로고·스크린샷 |
| 메타데이터 제거 | 작음~중간 | 촬영 정보 사라짐 | 위치 정보 노출을 피할 때 |
주의할 점
- 원본을 덮어쓰지 말고 다른 이름으로 저장해야 나중에 더 큰 크기나 다른 품질이 필요할 때 다시 만들 수 있습니다.
- 투명 픽셀이 있는 PNG를 JPEG로 압축하면 배경색 합성이 필요하며 원래 투명도를 되돌릴 수 없습니다.
- 의료·설계·증거 이미지처럼 픽셀의 정확성이 중요한 자료에는 손실 압축을 사용하지 마세요.
기술적 한계와 브라우저 차이
- 아주 큰 이미지 치수는 Canvas 최대 크기와 GPU 메모리를 넘어 빈 결과나 디코딩 오류가 날 수 있습니다.
- Canvas 색상 관리와 보간 알고리즘은 브라우저마다 미세하게 달라 전문 인쇄 색상 일치를 보장하지 않습니다.
- toBlob의 품질 값은 형식별 인코더에 전달되는 힌트라 같은 숫자가 Chrome, Safari와 Firefox에서 같은 용량을 뜻하지 않습니다.
FAQ
이미지 용량을 줄이면서 화질을 유지하는 방법 FAQ
품질 슬라이더는 몇이 가장 좋나요?
모든 이미지에 맞는 값은 없습니다. 사진은 75~85 부근에서 시작해 중요한 세부와 목표 용량을 보며 조정하는 것이 실용적입니다.
픽셀 크기와 파일 용량은 같은 뜻인가요?
아닙니다. 픽셀 크기는 가로세로 해상도이고 파일 용량은 압축 후 바이트 수입니다. 같은 1200×800 이미지도 형식과 품질에 따라 크기가 다릅니다.
결과가 원본보다 커질 수도 있나요?
네. 이미 잘 최적화된 원본을 더 비효율적인 형식이나 높은 품질로 다시 저장하면 커질 수 있으므로 전후 값을 확인해야 합니다.
압축하면 EXIF 위치 정보가 사라지나요?
Canvas로 다시 인코딩하면 일반적으로 EXIF가 이어지지 않지만 모든 환경을 개인정보 삭제 도구로 보장하지는 않습니다. 민감한 자료는 별도 메타데이터 검사도 하세요.
여러 이미지를 한꺼번에 처리할 수 있나요?
초기 버전은 한 장씩 처리해 메모리 사용과 결과 확인을 명확하게 합니다. 일괄 처리는 현재 지원 범위가 아닙니다.