
이미지를 압축해야 하는 상황이 생겼어요. 가능하면 지금 당장, 계정을 만들지 않고, 파일을 내가 통제하지 못하는 서버에 업로드하지 않고, “압축 완료!”라고만 뜨고 아무것도 알려주지 않는 도구와 품질 도박을 하지 않으면서요. 흔히 알려진 도구들은 무료 플랜에서 5MB 제한을 걸거나, 결과물에 워터마크를 붙이거나, 실제로 파일에 무슨 짓을 했는지 전혀 보여주지 않는 경우가 많아요.
Squoosh는 이 모든 문제를 해결해줘요. 브라우저 탭에서 열고, 이미지를 드래그해서 놓고, 설정을 조정한 뒤 결과물을 다운로드하면 끝이에요. 로그인 불필요, 원격 서버 업로드 없음. 압축 처리는 실제 프로덕션 시스템에서 사용하는 코덱——MozJPEG, libavif, OxiPNG, libwebp——을 컴파일한 WebAssembly 모듈을 통해 브라우저 안에서 실행돼요.
이 가이드에서는 Squoosh를 효과적으로 사용하는 방법을 다뤄요. 어떤 상황에서 어떤 포맷을 선택할지, 실제로 차이를 만드는 설정은 무엇인지, 그리고 아무것도 영구 설치하지 않고 배치 작업을 처리하는 방법까지요.
Squoosh가 실제로 하는 일 (그리고 그게 왜 특별한가)
대부분의 온라인 압축 도구는 파일을 백엔드 서버에 업로드하고, 그곳에서 압축을 실행한 뒤 더 작아진 파일을 돌려줘요. 그 말은 고객 사진, 기밀 목업, 공개 전 제품 이미지 등이 일정 기간 동안 누군가의 서버에 머문다는 의미예요. 그쪽의 보존 정책을 믿어야 하고, 그쪽의 보안도 믿어야 하죠.
Squoosh는 압축 코덱을 WebAssembly로 컴파일해서 브라우저 탭 안에서 로컬로 실행해요. 파일이 기기 밖으로 나가지 않아요. 이건 마케팅 문구가 아니라 구조적 특성에서 나오는 결과예요. 업로드할 서버 자체가 없거든요.
Google Chrome Labs가 만들고 유지하며, Apache 2.0 라이선스로 오픈 소스예요. TinyPNG나 Convertio 같은 대안과 Squoosh를 비교한 전체 분석은 이 사이트의 Squoosh 리뷰에서 확인할 수 있어요. 이 가이드는 실용적인 내용에 집중해요. 설정, 워크플로, 선택의 기준이요.
어떤 포맷을 선택해야 할까요?
첫 번째로 결정해야 할 건 출력 포맷이에요. 이건 품질 슬라이더 그 어떤 것보다 중요해요. 포맷마다 근본적으로 다른 강점이 있거든요.
| 포맷 | 적합한 용도 | 브라우저 지원 | JPEG 대비 크기 |
|---|---|---|---|
| MozJPEG | 사진, 색상 복잡도 높은 이미지 | 범용 | 기준값 |
| OxiPNG | 투명 그래픽, 스크린샷 | 범용 | 더 큼 |
| WebP | 일반 웹 이미지 | 모든 최신 브라우저 | ~25% 작음 |
| AVIF | 웹 이미지, 최고 압축률 | Chrome, Firefox, Safari, Edge | ~50% 작음 |
| JPEG XL | 미래 지향 | 제한적 (실험적) | ~60% 작음 |
2026년 기준으로 대부분의 웹 이미지에는 AVIF가 기본 선택지예요. 동등한 시각적 품질에서 WebP보다 30-50% 더 작은 파일을 만들어내고, 브라우저 지원도 이제 모든 주요 브라우저를 커버해요. 매우 오래된 브라우저를 지원해야 하거나 최신 포맷을 처리하지 못하는 도구에 이미지를 출력해야 한다면, WebP가 안전한 대안이에요. JPEG는 범용 호환성——어떤 플랫폼, 어떤 뷰어——이 필요할 때 여전히 유효해요.
PNG는 무손실이에요. 투명도가 필요할 때 OxiPNG를 선택하면 돼요. 아이콘, 투명 배경의 로고, 픽셀 수준의 텍스트 렌더링이 중요한 UI 스크린샷 등이 여기에 해당해요. 사진에는 절대 PNG를 쓰지 마세요. 파일 크기가 어마어마해져요.
JPEG XL은 기술적으로 인상적이지만 브라우저 지원이 아직 일관성이 없어서 대부분의 프로덕션 용도로는 건너뛰는 게 좋아요.
실제로 차이를 만드는 설정들
포맷을 고르고 나면 품질 슬라이더가 주요 조절 도구예요. 그런데 “품질”이 코덱마다 다른 의미를 가지고, 숫자도 직접 비교가 되지 않아요.
웹 사진과 히어로 이미지: AVIF 품질 60-70부터 시작하세요. 공격적으로 들릴 수 있지만, AVIF는 낮은 품질 설정을 JPEG보다 훨씬 우아하게 처리해요. JPEG의 품질 60에서는 블로킹 아티팩트가 눈에 띄게 나타나지만, AVIF는 같은 명목 설정에서도 훨씬 깔끔하게 보여요. 비교 슬라이더로 확인해보세요(아래에서 더 자세히 다뤄요).
이커머스 제품 사진: WebP 품질 75-80, 또는 포맷 호환성이 최우선이라면 MozJPEG 75. 제품 이미지는 가장자리와 질감의 세밀한 디테일이 필요해요. 품질 70 아래로 내리면 보통 직물, 엠보싱 텍스트, 복잡한 형태에서 흐릿함이 눈에 띄기 시작해요.
스크린샷과 UI 캡처: OxiPNG, 압축 레벨 3. 레벨을 높이면 파일 크기가 더 줄어들지만 시간이 눈에 띄게 길어져요. 레벨 3이 대부분의 스크린샷에서 실용적인 최적 지점이에요. 단색 영역이 넓은 이미지(UI 캡처에 흔해요)라면 OxiPNG가 AVIF를 능가할 때도 있어요. 무손실 압축이 균일한 영역을 효율적으로 처리하거든요.
썸네일과 아바타: WebP 품질 80, 실제 표시 크기로 리사이즈. Squoosh에 리사이즈 패널이 있으니 꼭 사용하세요. 3024픽셀 원본을 120px로 표시하는 건 가장 흔한 이미지 성능 실수 중 하나예요. 아무리 압축해도 근본 문제는 해결이 안 돼요.
배경 이미지와 텍스처: 이런 이미지는 시각적으로 집중도가 낮은 상태에서 보여서 공격적인 압축을 잘 견뎌요. AVIF 품질 50-60이면 보통 충분해요. 이미지가 텍스트 뒤에 깔릴 때 품질 차이를 알아채기가 쉽지 않아요.
일반 규칙: AVIF/WebP는 품질 75, JPEG는 80부터 시작하세요. 그런 다음 비교 슬라이더로 얼마나 낮출 수 있는지 확인해요.
비교 슬라이더를 효과적으로 사용하기
비교 슬라이더가 바로 Squoosh를 “결과물만 던져주는” 도구들과 구별해주는 요소예요. 왼쪽에 원본, 오른쪽에 압축 결과물이 나오고, 하단에는 실시간 파일 크기 수치가 표시돼요. 구분선을 드래그해서 양쪽을 확인할 수 있어요.
팁: 슬라이더를 중앙에 놓고, 압축이 가장 힘든 부분——날카로운 가장자리, 작은 텍스트, 부드러운 색상 그라디언트, 사람 얼굴——에 집중하세요. 아티팩트가 가장 먼저 나타나는 곳이 바로 여기예요. 이 영역에서 의미 있는 차이가 보이지 않는다면 현재 품질 설정이 적절한 거예요. 흐릿함, 블로킹, 색상 밴딩이 보인다면 품질을 높이세요.
특히 AVIF에서는 가장자리뿐만 아니라 색상 전환도 살펴보세요. AVIF는 낮은 품질 설정에서 부드러운 그라디언트에 미묘한 색상 밴딩을 일으킬 수 있어요. 하늘 사진이나 색감이 부드럽게 변하는 배경에서 가장 눈에 띄고, 디테일이 많은 제품 사진에서는 덜해요.
OxiPNG의 경우, 비교 슬라이더는 주로 무손실 압축이 제대로 작동했는지 확인하는 용도예요. 출력물이 원본과 동일하게 보여야 해요. 그렇지 않다면 예상치 못한 일이 벌어진 것이고(드문 일이지만, 빠르게 확인해볼 가치는 있어요).
품질이 괜찮아 보이면, Squoosh 인터페이스에서 파일 크기 감소율을 확인해요. 웹 이미지의 합리적인 결과는 원본 대비 60-80% 감소예요. JPEG 사진을 AVIF로 변환했을 때 40% 미만으로 줄었다면 품질을 더 낮춰보세요. 거의 확실하게 절약할 여지를 남겨두고 있는 거예요.
리사이즈: 사람들이 건너뛰는 단계
품질 설정만이 유일한 레버는 아니에요. 실제 표시 크기로 리사이즈하면 품질 조정보다 더 큰 파일 크기 절약을 얻을 때가 많아요.
Squoosh의 리사이즈 패널에서 목표 너비나 높이를 설정할 수 있어요. 알고리즘 옵션에 대해 몇 가지 말씀드리면: Lanczos3이 최소한의 앨리어싱으로 가장 선명한 결과를 내서 대부분의 사진에 적합한 선택이에요. Triangle은 더 빠르지만 덜 선명해요. Mitchell은 그 중간이에요.
품질 슬라이더를 건드리기 전에, 원래 해상도가 필요한지 물어보세요. 블로그 포스트 이미지를 800px 너비로 보여준다면, 3024픽셀 원본을 제공하는 건 최대 압축 상태에서도 낭비예요. 먼저 리사이즈하고, 그 다음 압축하세요. 두 가지를 함께 적용한 절약량은 각각을 따로 한 것보다 거의 항상 더 크거든요.
Squoosh는 리사이즈를 압축 전에 적용하는데, 이게 올바른 순서예요. 리사이즈 패널에서 최종 크기를 설정하고, 압축 패널에서 품질을 조정하면, 다운로드된 파일에 두 변경 사항이 모두 반영돼요.
파일 하나씩 처리하는 것을 넘어서
Squoosh 웹 UI는 한 번에 이미지 하나를 처리해요. 폴더 전체를 한 번에 압축하려면 Squoosh CLI가 답이에요. 영구 설치도 필요 없어요.
Node.js가 설치돼 있다면 이렇게 실행하세요.
npx @squoosh/cli --avif '{"quality":65}' *.jpg
현재 디렉토리의 모든 JPEG를 품질 65로 AVIF로 압축해서 원본 파일 옆에 .avif 확장자로 출력 파일을 만들어요. WebP는 --webp '{"quality":80}', MozJPEG는 --mozjpeg '{"quality":75}'를 사용하면 돼요. 압축하면서 리사이즈하려면 --resize '{"width":1200}'를 추가하세요.
CLI는 웹 UI와 동일한 WebAssembly 모듈을 사용하기 때문에 출력물이 동일해요. CMS에 업로드하거나 퍼블리싱 파이프라인에 올리기 전에 원본 사진 폴더를 웹용으로 준비해야 하는 워크플로에 특히 유용해요. 영구 설치도, 구독도, 서버도 필요 없어요.
Squoosh가 적합하지 않은 경우
Squoosh는 래스터 이미지를 처리해요. SVG 파일에는 SVGOMG가 동등한 도구예요. 브라우저에서 로컬 실행, 파일 크기 제한 없음, 계정 불필요예요. SVG를 Squoosh에 넣지 마세요.
1억 픽셀 이상의 파노라마, 중형 카메라 TIFF 파일처럼 매우 큰 파일은 브라우저 메모리가 부족할 수 있어요. 이런 건 데스크톱 도구가 더 잘 처리해요.
파일 개인정보를 걱정하지 않고 품질 제어 없이 빠른 JPEG나 PNG 압축이 필요하다면, TinyPNG가 그 특정 용도에서 더 빠를 수 있어요. 결정을 자동화하고 슬라이더를 건너뛰어요. 트레이드오프를 신경 쓰지 않고 그냥 더 작아지기를 원한다면 유용해요.
이미지 이외의 포맷 변환(문서, 동영상, 오디오)에는 Squoosh가 도움이 안 돼요. 이미지 압축에 특화된 도구거든요.
채택할 만한 몇 가지 습관들
다운로드하기 전에 파일 이름을 바꾸세요. Squoosh는 image-compressed.avif처럼 이름을 생성해요. 한 세션에서 여러 파일을 이름 변경 없이 처리하면, image-compressed (1).avif, image-compressed (2).avif 같은 파일들이 가득한 폴더가 생겨요.
원본을 보관하세요. AVIF와 WebP 압축은 손실 방식이에요. 나중에 다른 품질 수준이나 출력 포맷이 필요하면 원본에서 시작하고 싶을 거예요. 이미 압축된 파일을 다시 압축하면 품질 손실이 누적돼요.
모든 이미지에 같은 품질 숫자를 적용하지 마세요. 디테일이 풍부한 클로즈업 사진은 같은 명목 설정에서 넓은 풍경 사진과 다르게 압축돼요. 어떤 이미지에서는 눈에 보이지 않는 품질 값이 다른 이미지에서는 확연히 눈에 띌 수 있어요. 슬라이더가 답을 알려주니 고정 숫자보다 그걸 신뢰하세요.
이미지 최적화는 제대로 할 가치가 있는 작업이에요. 올바른 도구는 무료이고, 계정 없이 작동하며, 브라우저에서 완전히 실행돼요. 그런 도구들——로그인 없음, 업로드 없음, 추적 없음——의 더 많은 목록은 nologin.tools에서 사용 사례별로 수백 가지를 찾아볼 수 있어요.