← 블로그

jSquash WASM vs Canvas toBlob

Squoosh 계열 코덱이 브라우저 기본 인코딩보다 나은 지점.

핵심 요약

canvas.toBlob('image/jpeg', quality)는 구현이 쉽지만, 브라우저마다 JPEG/WebP 인코더 구현이 달라 같은 quality 값이도 용량·화질이 들쭉날쭉합니다. AVIF는 지원 자체도 제각각입니다. jSquash(Squoosh WASM)는 MozJPEG·libwebp·libavif를 기기에 올려 예측 가능한 압축을 목표로 합니다.

ZXZX 압축·변환 파이프라인은 decode → process → encode 경로에서 jSquash를 사용하고, PNG는 oxipng로 추가 최적화합니다. 자세한 스택은 jSquash 압축 노트를 보세요.

Canvas toBlob이 약한 지점

  • 품질 슬라이더가 “절대 화질”이 아니라 브라우저 구현 의존
  • 모바일·데스크톱 간 결과 차이
  • 고급 인코더 옵션(MozJPEG 튜닝 등) 부재
  • AVIF 등 차세대 포맷의 불완전한 내장 지원

프로토타입·일시적 썸네일에는 toBlob로 충분합니다. 제품 페이지·반복 가능한 미디어 파이프라인에는 WASM 코덱이 유리합니다.

jSquash가 유리한 지점

동일 소스·동일 설정에서 재현 가능한 결과, Squoosh에서 검증된 코덱, Lanczos3 리사이즈와의 조합입니다. 대가로 첫 로드에 WASM 모듈을 받으며, 구형 기기에서는 인코딩 시간이 더 길 수 있습니다. ZXZX는 그 트레이드오프를 명시하고 로컬 처리로 프라이버시를 유지합니다.

직접 비교하는 방법

  1. 같은 사진을 압축에서 JPG 품질 80%로 처리합니다.
  2. 변환에서 WebP·AVIF로 바꿔 용량을 비교합니다.
  3. 다른 온라인 도구(Canvas 계열) 결과와 파일 크기·확대 시 블록 노이즈를 나란히 봅니다.
  4. 리사이즈가 필요하면 리사이즈의 Lanczos3 결과를 함께 확인합니다.

한계와 주의

WASM이 항상 더 작다는 보장은 이미지 내용에 따라 달라집니다. 이미 강하게 압축된 소스는 이득이 작을 수 있습니다. 무손실이 필요하면 PNG/oxipng 경로를, 사진이면 JPG/WebP/AVIF 손실 압축을 선택하세요.

개발자 관점 메모

toBlob은 메인 스레드·구현체 디폴트에 의존하기 쉽습니다. 워커로 옮겨도 인코더 자체 품질 문제는 남습니다. jSquash는 코덱을 WASM으로 고정하는 대신, 번들 크기와 초기화 비용을 감수합니다. 제품에서는 “첫 방문 로딩 vs 이후 캐시”를 UX 카피로 알려 주는 것이 중요합니다.

테스트 시에는 동일 픽스처 PNG/JPEG를 저장해 두고, 커밋 해시·브라우저 버전과 함께 출력 용량을 기록하세요. “체감으로 더 좋다”만으로는 회귀를 잡기 어렵습니다. ZXZX는 이 코덱 선택을 UI에 드러내 사용자가 이유를 이해할 수 있게 합니다.

포맷 선택 가이드 (짧은 버전)

  • 사진 위주 웹 — WebP 또는 AVIF, 폴백 JPG
  • 투명 로고 — PNG (oxipng) 또는 투명 WebP
  • 이메일·구형 환경 — JPG

변환과 압축을 한 번에 끝내려면 변환과 압축을 이어서 쓰면 됩니다.

정리하면

이 글의 목표는 완벽한 이론이 아니라, 오늘 바로 적용할 수 있는 판단 기준을 남기는 것입니다. 비율·메타데이터·코덱·배치·AI 확대는 각각 따로 최적화하기보다, “공개 전에 한 번 로컬에서 끝낸다”는 한 줄 원칙으로 묶는 편이 실수가 적습니다. ZXZX 도구는 그 원칙을 브라우저에서 실행하기 위한 구성이며, 한계가 보이면 데스크톱·원본 재촬영·전문 툴로 넘기면 됩니다.

검색과 광고 심사 관점에서는 빈 버튼만 있는 페이지보다, 왜 이 도구를 쓰는지·언제 쓰지 말아야 하는지·다음 단계 링크가 있는 문서형 페이지가 유리합니다. 아래 링크에서 바로 이어서 작업해 보세요. 결과가 기대와 다르면 설정을 낮추거나 파일 수를 줄인 뒤 다시 시도하는 것이 가장 빠른 디버깅입니다. 같은 원본으로 두세 번만 비교해도 팀에 맞는 기본 프리셋을 고정할 수 있습니다.

마지막으로, 로컬 처리라도 다운로드한 결과물을 어디에 올리느냐는 사용자의 책임입니다. 라이선스·초상권·상표가 있는 이미지는 별도의 법적 검토가 필요합니다. 도구는 기술 경로만 제공할 뿐, 콘텐츠의 권리 관계를 바꾸지 않습니다. 사내 가이드가 있다면 이 글의 체크리스트를 그 문서에 붙여 배포용 체크 항목으로 써도 좋습니다.

다음 액션

글을 읽은 직후 같은 원본 한 장으로 도구를 한 번만 실행해 보세요. 설정 값을 메모해 두면 다음 배치부터 결정이 줄어듭니다. 문제가 재현되면 브라우저·파일 크기·선택한 옵션을 문의에 남겨 주시면 문서 개선에 반영합니다. 반복되는 실패는 대개 한도·메모리·포맷 지원 문제이므로, 먼저 파일 수를 줄이고 포맷을 JPG/PNG/WebP로 맞춘 뒤 재시도하는 순서를 권장합니다. 팀 위키에 이 순서를 복사해 두면 신규 멤버 온보딩에도 도움이 됩니다.

추가로, 결과가 만족스러우면 같은 설정을 북마크해 두거나 팀 채널에 “기본: 품질 80 · WebP · EXIF 제거”처럼 남겨 두세요. 작은 규칙이 쌓일수록 배치 실수가 줄어들고, 공개 페이지의 이미지도 일관됩니다. 이 일관성은 브랜드 인상뿐 아니라 페이지 속도 측정에서도 유리합니다.

ZXZX에서 바로 쓰기

압축과 변환에서 바로 체감할 수 있습니다. 관련: Squoosh WASM 압축, JPG vs PNG vs WebP.