브라우저 기반 이미지 압축의 작동 원리
모든 압축 처리는 완전히 JavaScript로 실행됩니다. 코덱 라이브러리를 다운로드하거나 서버를 거칠 필요가 없습니다. 브라우저 자체의 Canvas API가 이미지를 디코딩하고 낮은 품질로 재인코딩하여, 페이지가 미리보기·다운로드·ZIP 압축에 활용할 수 있는 Blob을 반환합니다. 모든 단계가 탭의 샌드박스 안에서 이루어지므로 원본 파일은 네트워크에 전혀 접촉하지 않습니다.
- 업로드된 각 파일을 Blob으로 읽고 객체 URL을 생성하여, 브라우저가 서버에 바이트를 복사하거나 디스크에 쓰지 않고 로컬에서 디코딩할 수 있게 합니다.
- 디코딩된 이미지를 원본 픽셀 크기 그대로 오프스크린 Canvas 요소에 그려 재인코딩 준비를 합니다.
- 픽셀 재인코딩을 위해
canvas.toBlob(callback, mimeType, quality)를 호출합니다. 품질 모드에서는 슬라이더 값이 인코더의 양자화 설정에 직접 매핑되고, 목표 크기 모드에서는 출력 Blob이 바이트 예산 이하가 될 때까지 품질 값을 이분 탐색합니다. - 원본 크기·압축 후 크기·절감 비율을 보여주는 비포/애프터 데이터를 표시하고, 이미지별 다운로드 또는 전체 배치를 위한 단일 ZIP 다운로드를 제공합니다. ZIP은 fflate(첫 사용 시 로드되는 8 KB 라이브러리)를 사용해 메모리에서 구성됩니다.
이미지를 압축해야 하는 이유
- 이미지가 작을수록 로딩이 빨라집니다. 4 MB 히어로 이미지를 600 KB로 줄이면 Largest Contentful Paint가 직접 개선되며, 이는 Google이 순위에 사용하는 Core Web Vitals 중 하나입니다. 여러 사진이 있는 페이지에서는 절감 효과가 누적되어 첫 화면 렌더링이 더욱 빨라집니다.
- 업로드·첨부 파일 크기 제한은 어디에나 있습니다. 많은 CMS 플랫폼, 티켓 도구, 이메일 시스템이 1 MB나 2 MB를 초과하는 파일을 거부합니다. 빠른 압축 한 번으로 전체 편집기를 열지 않고도 사진을 제한 이하로 줄일 수 있습니다.
- 대규모로 운영할 때 대역폭과 스토리지는 비용이 됩니다. 풀사이즈 PNG 대신 품질 0.8의 WebP를 제공하면 이미지 페이로드를 3분의 1 이상 줄여 CDN 데이터 전송 비용을 낮추고 방문자의 모바일 데이터 사용량을 절감합니다.
- 민감한 이미지에서는 개인정보 보호가 중요합니다. 모든 처리가 브라우저에서 이루어지므로 신분증 스캔·의료 영상·내부 스크린샷은 기기에 남아 있어, TinyPNG 같은 서드파티 서버 업로드를 걱정할 필요가 없습니다.
일반적인 활용 사례
이미지가 전송될 위치보다 클 때마다 압축이 필요합니다. 반복적으로 나타나는 세 가지 패턴을 소개합니다.
- 온라인 쇼핑몰용 제품 사진 준비. JPEG 원본을 품질 0.8(또는 200 KB 목표)로 압축하여 스토어프론트를 빠르게 유지하고 모바일에서 Core Web Vitals를 통과합니다.
- 버그 트래커나 위키에 첨부하기 전에 스크린샷 크기 줄이기. PNG 캡처 배치를 품질 0.85의 JPEG로 변환하면 수십 MB에서 수 MB로 줄어듭니다.
- 사진을 업로드 제한 이하로 만들기 — 1 MB 초과 파일을 거부하는 입사 지원 포털, 첨부 파일 제한이 엄격한 이메일 시스템, 또는 바이트 예산에 맞춰야 하는 포럼 아바타.
실전 예시: 4 MB JPEG → 400 KB
스마트폰 카메라로 찍은 4 MB JPEG는 업로드 제한을 초과하고 페이지를 느리게 만드는 흔한 파일입니다. 압축 효과를 측정하는 적절한 기준이 됩니다.
JPEG를 업로드 영역에 드롭하고, 형식은 JPEG로 유지하면서 품질 슬라이더를 0.7까지 내리거나 목표 크기 모드로 전환하여 400 KB를 입력합니다. 품질 모드에서는 Canvas 파이프라인이 한 번 재인코딩하고 결과를 표시하며, 사진에 따라 보통 500~700 KB가 됩니다. 목표 크기 모드에서는 페이지가 여러 품질 값을 시도하고 400 KB 이하를 유지하는 최고 품질을 선택하여 절감 비율을 보고합니다. 카드의 다운로드를 클릭해 단일 파일을 받거나, 여러 이미지를 압축했다면 .zip 다운로드를 클릭하세요. 이 크기의 이미지는 전체 과정이 1초 이내에 완료되며, 페이지 로드 후에는 대역폭을 전혀 소비하지 않습니다.
품질 모드와 목표 크기 모드의 차이는 무엇인가요?
품질 모드는 0.1에서 1.0까지의 슬라이더를 제공하며 JPEG 또는 WebP 인코더의 양자화 설정에 매핑됩니다. 수치가 낮을수록 파일이 작아지고 아티팩트가 더 눈에 띕니다. 목표 크기 모드는 이를 반대로 접근합니다. 킬로바이트 단위의 크기를 지정하면 페이지가 품질 값을 이분 탐색하여 예산 이하에 맞는 최고 품질을 찾을 때까지 몇 번 인코딩합니다. 업로드 제한 1 MB처럼 엄격한 상한이 있을 때는 목표 크기 모드가 편리하고, 예측 가능한 시각적 결과만 원한다면 품질 모드가 더 빠르고 적합합니다. PNG는 무손실이므로 어떤 모드도 적용되지 않습니다.
처리가 내 기기에서 이루어지나요?
예, 완전히 그렇습니다. 페이지는 브라우저의 네이티브 Canvas API와 Web File API를 사용하여 각 이미지를 메모리에서 디코딩하고 재인코딩합니다. 이미지 데이터는 서버로 전송되지 않으며, 임시 업로드도 없고 클라우드 왕복도 없습니다. 직접 확인하려면 DevTools를 열고 네트워크 패널로 전환한 다음 압축을 실행해 보세요. 보이는 유일한 외부 요청은 초기 페이지 로드와 광고 호출뿐입니다. 이미지와 관련된 어떤 것도 탭을 벗어나지 않습니다.
PNG를 압축해도 거의 줄어들지 않는 이유는 무엇인가요?
PNG는 무손실 형식이므로 Canvas API는 세부 정보를 버려서 파일을 작게 만들 수 없습니다. 같은 픽셀을 다시 패킹할 수 있을 뿐입니다. 사진의 경우 PNG는 이미 크고 무손실 재인코딩으로는 거의 절약되지 않습니다. 진정한 효과는 출력 형식을 JPEG나 WebP로 전환할 때 나타납니다. 이 형식들은 사진에 적합한 손실 압축을 사용하여 보통 4~10배 작아집니다. 무손실 품질이나 투명도가 필요한 경우에만 PNG를 사용하세요. 그 외에는 사진에는 JPEG를, 최적의 크기 대 품질 균형을 위해서는 WebP를 선택하세요.
어떤 형식을 선택해야 하나요?
사진의 경우, 품질 0.8의 WebP가 최적의 크기 대 품질 균형을 제공하며 2021년 이후 출시된 모든 브라우저에서 지원됩니다. 대상 환경이 구형이거나 제한이 엄격할 경우 JPEG가 안전한 범용 대안입니다. PNG는 무손실 품질이나 알파 채널이 필요한 경우에만 선택하세요 — 선화, UI 스크린샷, 투명도가 있는 로고. 페이지 속도를 최적화하고 있고 사용자가 최신 브라우저를 사용한다면 WebP가 거의 항상 정답입니다. 구형 CMS나 WebP를 거부하는 인쇄 파이프라인에 공급한다면 JPEG를 사용하세요.
이미지를 드롭하고, 품질 수준 또는 목표 크기를 선택하고, 압축하세요. 모든 것이 탭 안에서 실행됩니다. 업로드 없음, 계정 없음, 서버 대기 없음.