브라우저에서 100% 동작하는 이미지 압축기를 만들었다

출처: Dev.to

Most “이미지 압축” 웹사이트들은 사진을 서버에 업로드합니다. 필요 없습니다. 브라우저 자체 캔버스를 사용하면 품질에 관계없이 이미지를 재인코딩할 수 있습니다 — 제가 약 30줄 정도의 드래그‑앤‑드롭 압축기를 만들었고, 사진은 절대 기기 밖으로 나가지 않습니다.

🗜️ 사용해 보기 (사진 드롭): https://dev48v.infy.uk/solve/day9-image-compressor.html

drop.addEventListener("drop", e => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];    // 탭 내에서 stay, 0 bytes uploaded
  loadImage(file);
});

민감한 이미지(아이디, 스크린샷 등)는 “업로드되지 않음”은 실제 기능이며, 단순히 예의 차이는 아닙니다.

const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();

이제 브라우저는 원본 파일 포맷과 무관하게 원시 픽셀을 보유하고 있습니다:

canvas.width  = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext("2d").drawImage(img, 0, 0);

canvas.toBlob(blob => {
  preview.src = URL.createObjectURL(blob);
  showSize(blob.size);
}, "image/jpeg", 0.7);    // 0.7 = 70% quality

JPEG와 WebP는 손실 압축 포맷으로, 눈에는 거의 구분되지 않는 세부 정보를 버립니다. 세 번째 인자는 전체 압축 비율이며, 품질이 약간 낮아도 파일 크기가 절반으로 줄어들 수 있습니다.

link.href = URL.createObjectURL(blob);
link.download = "compressed.jpg";    // 브라우저가 저장하고 서버 없이

FileReader → Image → Canvas → toBlob은 놀랍게도 효율적인 로컬 이미지 파이프라인입니다. 이 네 단계만으로 리사이징, 포맷 변환, 자르기, 워터마크까지 모두 클라이언트에서 수행되며, 모든 과정이 개인적으로 처리됩니다. 백엔드가 필요 없는 “이미지 도구” 전체 카테고리가 존재합니다. 열어 사진을 드롭해 보세요.