이미지 압축 품질 옵션을 넓게 열어 두지 않은 이유

이 글은 img-compressor 저장소의 품질 옵션과 벤치마크 기록을 바탕으로 작성했습니다. 목표는 “가장 작은 파일 만들기”가 아니라, 사용자가 결과를 이해하고 다시 선택할 수 있는 압축 기준을 만드는 것입니다.

문제: 품질값을 전부 열어 두면 선택이 쉬워지지 않는다

이미지 압축 UI에서 품질을 1부터 100까지 자유롭게 고르게 만들 수 있습니다. 하지만 실제 사용자는 숫자 하나하나의 차이를 판단하기 어렵습니다. 품질 73과 76의 차이를 화면에서 바로 구분하기도 어렵고, 파일 종류에 따라 같은 숫자가 전혀 다른 결과를 만들 수 있습니다.

그래서 img-compressor의 콘텐츠와 벤치마크는 품질값을 좁은 비교 범위로 다룹니다. 사진 자산에서는 WebP 품질 60, 70, 80 결과를 함께 보여 주고, 사용자가 용량 차이를 보고 목적에 맞는 범위를 고를 수 있게 합니다. 너무 많은 옵션은 정교함처럼 보일 수 있지만, 실제 도구에서는 결정을 늦추는 소음이 되기도 합니다.

압축률 숫자만 앞세우지 않는다

고정 사진 자산은 원본 2,901,456바이트에서 WebP 품질 60 기준 148,680바이트까지 줄었습니다. 숫자만 보면 매우 큰 감소입니다. 하지만 이 결과를 모든 이미지에 일반화하면 안 됩니다. 스크린샷, 투명 그래픽, 이미 최적화된 파일은 전혀 다른 결과를 보입니다.

이 표는 품질 옵션을 고를 때 파일 종류를 먼저 봐야 한다는 점을 보여 줍니다. 큰 사진은 용량 차이가 사용자 경험에 직접 영향을 줄 수 있지만, 작은 아이콘은 몇 KB 차이보다 투명도, 선명도, 호환성이 더 중요할 수 있습니다.

최대 크기 옵션은 리사이즈 판단과 연결된다

압축률은 인코더 품질만으로 정해지지 않습니다. 원본 이미지가 너무 크면 먼저 가로·세로를 줄이는 것이 더 큰 효과를 만들 수 있습니다. img-compressor는 최대 너비와 높이를 기준으로 비율을 유지해 리사이즈한 뒤, 필요할 때 추가 압축을 수행합니다.

const resizedFile = await resizeImageFile(file, maxWidth, maxHeight);

if (resizedFile.size < 100 * 1024) {
  return resizedFile;
}

작아진 파일이 이미 100KB 미만이면 추가 손실 압축을 건너뛰는 조건도 같은 맥락입니다. 사용자가 기대하는 것은 “무조건 다시 인코딩한 파일”이 아니라, 목적에 맞게 충분히 줄어든 파일입니다. 작은 파일에 추가 압축을 반복하면 체감 이득보다 품질 변화와 처리 시간이 더 눈에 띌 수 있습니다.

더 큰 결과를 버리는 조건

압축이나 포맷 변환 결과가 원본보다 항상 작다는 보장은 없습니다. 그래서 구현에서는 변환 결과와 기준 파일의 크기를 비교합니다. 결과가 더 크거나 같으면 기존 파일을 유지합니다. 이 조건은 사용자가 “압축”이라는 단어에서 기대하는 최소한의 약속을 지키기 위한 장치입니다.

물론 용량만이 모든 품질 기준은 아닙니다. 어떤 경우에는 WebP 파일이 조금 더 커도 브라우저 호환성, 이미지 품질, 후속 처리 요구 때문에 선택될 수 있습니다. 그러나 현재 도구의 기본 목적이 “브라우저에서 가볍게 파일 크기를 줄이는 것”이라면, 더 큰 결과를 자동으로 제공하지 않는 편이 자연스럽습니다.

사용자에게 보여 줄 정보

• 원본 파일 크기와 출력 파일 크기를 함께 보여 줍니다.
• 감소율은 참고값으로 제공하고, 품질 보장처럼 표현하지 않습니다.
• 선택한 포맷과 품질값이 결과에 어떤 영향을 줬는지 확인할 수 있게 합니다.
• WebP 변환은 별도 다운로드로 제공해 사용자가 원래 형식과 구분할 수 있게 합니다.
• 이미 작은 파일은 추가 압축 이득이 제한적일 수 있음을 안내합니다.

옵션 설계 체크리스트

1. 품질 슬라이더의 최소·최대 값이 실제 사용 목적에 맞는지 확인합니다.
2. 압축률이 큰 예시만 보여 주고 있지 않은지, 작은 파일 사례도 함께 확인합니다.
3. 리사이즈 조건과 품질 조건이 서로 충돌하지 않는지 테스트합니다.
4. 결과가 더 커졌을 때 자동으로 채택하지 않는 방어 조건이 있는지 확인합니다.
5. 사용자가 다운로드하는 파일 형식을 버튼과 파일명에서 구분할 수 있는지 확인합니다.

원본 자료

• 품질별 벤치마크 데이터
• 품질 옵션과 처리 흐름