이미지 압축의 작동 원리
이 도구는 브라우저 내장 Canvas API를 사용해 낮은 품질 설정으로 이미지를 재인코딩해요. 품질 슬라이더를 80%로 설정하면 브라우저가 원본의 시각적 품질을 약 80% 유지하면서 보통 40~70% 더 작은 JPEG 또는 WebP 파일을 만들어요.
압축 처리 과정
- 이미지가 보이지 않는 HTML Canvas 요소에 그려져요 (메모리에서 처리되며, 브라우저 탭 밖으로 나가는 게 없어요).
- Canvas가
toBlob(callback, mimeType, quality)를 호출해요. quality는 슬라이더 값을 100으로 나눈 값이에요.
- 압축된 blob이
ObjectURL로 메모리에 저장돼요 — 직접 다운로드할 수 있는 로컬 참조예요.
- "전체 삭제"를 클릭하면 모든 ObjectURL이 취소되고 메모리가 해제돼요.
EXIF 제거 — 개인정보 보호 기능
Canvas 재인코딩은 소스 파일의 메타데이터를 복사하지 않아요. 즉, GPS 좌표, 기기 모델, 카메라 설정, 타임스탬프를 포함한 모든 EXIF 데이터가 자동으로 출력에서 제거돼요. 이것은 클라이언트 측 Canvas 처리의 고유한 개인정보 보호 혜택이에요.
PNG vs JPEG vs WebP
JPEG는 사진에 가장 적합한 형식이에요. 품질 80~85에서 JPEG 파일은 거의 보이지 않는 품질 손실로 비압축 원본보다 5~15배 작아요. 웹용 사진에는 JPEG를 사용하세요.
WebP는 동등한 시각 품질에서 JPEG보다 보통 25~35% 우수한 현대적 형식이에요. 투명도도 지원해요. 매우 오래된 브라우저 (IE11)를 지원할 필요가 없다면 웹 이미지에 WebP를 사용하세요.
PNG는 무손실이며 스크린샷, 로고, 텍스트가 포함된 이미지에 이상적이에요. Canvas는 기본적으로 팔레트 색상을 줄이지 않으므로 Canvas PNG 출력이 원본보다 작아지지 않을 수 있어요. 상당한 PNG 압축을 원한다면 위의 형식 선택기로 WebP로 변환하세요.
어떤 품질 설정을 사용해야 하나요?
- 85~95%: 최소 압축, 최고 품질. 전문 사진이나 인쇄용 출력에 사용하세요.
- 70~80%: 기본 범위. 웹 이미지에 이상적. 40~60% 더 작은 크기로 원본과 시각적으로 거의 동일해요.
- 50~65%: 중간 압축. 파일 크기가 화질보다 중요한 이메일 첨부파일이나 SNS에 적합해요.
- 10~45%: 강한 압축. 썸네일, 미리보기, 또는 빠른 로딩이 품질보다 중요한 경우에 적합해요.
자주 묻는 질문
-
아니요. 모든 이미지 압축은 Canvas API를 사용해 브라우저 내부에서 완전히 이루어져요. 파일은 기기를 벗어나거나 어떤 서버로도 전송되지 않아요.
-
JPEG, PNG, WebP, GIF (첫 번째 프레임만). 형식 간 변환도 가능해요 — 예를 들어 PNG를 WebP로 변환해 파일 크기를 줄일 수 있어요.
-
품질은 슬라이더 설정에 따라 달라요. 80% (기본값)에서 대부분의 이미지는 원본과 동일하게 보이면서 파일 크기가 40~70% 절감돼요. 낮은 값은 압축이 증가하지만 눈에 보이는 아티팩트가 생길 수 있어요.
-
PNG는 무손실 압축을 사용하며 브라우저 Canvas API가 원본 인코더만큼 적극적으로 PNG를 재압축하지 않을 수 있어요. 상당한 크기 감소를 원한다면 WebP나 JPEG로 변환해 보세요.
-
네. Canvas 재인코딩으로 GPS 좌표와 카메라 정보를 포함한 모든 EXIF 메타데이터가 제거돼요. 이것은 브라우저 측 처리의 자동적인 개인정보 보호 혜택이에요.
-
배치당 최대 20장. 처리는 순차적으로 이루어져 브라우저 응답성이 유지돼요. 다운로드 후 대기열을 지우고 새 배치를 시작할 수 있어요.