이미지 압축기 · JPEG, PNG, WebP 온라인 압축

이미지 압축이란 무엇인가요?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

주요 기능

JPEG vs PNG vs WebP

압축 예시

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (품질 75에서 680 KB)

logo-transparent.png (450 KB, 1200×800)

logo-transparent.webp (품질 80에서 85 KB)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (품질 75에서 250 KB)

이미지 온라인 압축 방법

1. 1

   이미지 업로드

   업로드 영역에 이미지를 끌어다 놓거나 클릭하여 파일을 선택하십시오. 한 번에 최대 20장의 JPEG, PNG, WebP 이미지를 선택할 수 있으며 각 파일은 최대 10MB입니다.

2. 2

   품질 조정

   품질 슬라이더로 원하는 압축 수준(0~100)을 설정하십시오. 기본값은 75이며 양호한 균형을 제공합니다. 파일 크기와 압축률이 실시간으로 갱신되는 것을 확인하십시오.

3. 3

   결과 다운로드

   개별 파일의 다운로드를 누르거나 전체 다운로드로 모든 압축 이미지를 저장하십시오. 비교 버튼으로 다운로드 전에 품질을 시각적으로 점검할 수 있습니다.

활용 사례

웹사이트 성능 최적화

웹사이트에 업로드하기 전에 이미지 파일 크기를 줄이십시오. 작은 이미지는 로딩이 빨라 Core Web Vitals 점수(특히 Largest Contentful Paint)를 개선하고 대역폭 비용을 줄이며 SEO 순위에도 도움이 됩니다.

이메일 첨부 용량 축소

이메일 첨부 제한(보통 10~25MB) 이내로 맞추기 위해 이미지를 압축하십시오. 20장의 사진 묶음을 50MB에서 10MB 미만으로 줄이는 경우가 흔합니다.

소셜 미디어 업로드 준비

소셜 미디어 플랫폼에 올리기 전에 이미지를 미리 압축하십시오. 플랫폼이 자동으로 재압축하더라도, 최적으로 압축된 파일로 시작하면 최종 품질을 더 잘 제어할 수 있습니다.

앱 및 게임 에셋 최적화

모바일 앱, 게임, 프로그레시브 웹 앱의 UI 에셋, 텍스처, 스프라이트를 압축하십시오. 에셋이 작을수록 다운로드가 빠르고 저장 공간 사용이 적으며 사용자 경험이 부드러워집니다.

문서 및 프레젠테이션 최적화

PDF, Word 문서, 프레젠테이션에 포함된 이미지의 크기를 줄이십시오. 고해상도 사진이 들어간 50MB 슬라이드 덱을 가시적 품질 손실 없이 10MB로 줄이는 경우가 많습니다.

기술적 세부 사항

Canvas API 압축

본 도구는 HTML5 Canvas API의 toBlob() 메서드를 사용해 압축합니다. 이미지가 보이지 않는 canvas 요소에 그려진 뒤 지정한 품질 파라미터로 재인코딩됩니다. JPEG과 WebP는 품질 파라미터(0.0~1.0)가 손실 압축 수준을 제어합니다. PNG의 경우 Canvas API는 품질 파라미터를 완전히 무시하며, Canvas를 통한 PNG 인코딩은 항상 무손실입니다.

PNG에서 WebP로 변환

Canvas toBlob()은 PNG 이미지의 품질 파라미터를 무시하므로(출력은 항상 무손실), 품질 슬라이더가 100 미만일 때 본 도구는 PNG 파일을 WebP 포맷으로 변환합니다. WebP는 손실 압축(품질 제어 가능)과 투명도를 모두 지원하므로 PNG의 이상적인 손실 대안입니다. 품질이 100으로 설정되면 PNG 파일은 원래 포맷으로 보존됩니다.

품질 파라미터 동작

품질 슬라이더는 Canvas toBlob()의 품질 파라미터에 매핑됩니다. 100 = 1.0(최고 품질, 최대 파일), 0 = 0.0(최저 품질, 최소 파일)입니다. JPEG의 경우 품질 75(0.75)가 일반적으로 최적점이며, 50 아래로 내려가면 아티팩트가 눈에 띕니다. WebP는 동일한 품질 값에서 JPEG보다 파일이 약간 더 작으면서 비슷한 시각 품질을 제공합니다.

브라우저 메모리와 한도

각 이미지는 원본 File 객체와 압축된 Blob, 그리고 미리보기 표시용 오브젝트 URL 두 개로 메모리에 존재합니다. 20장이 각각 10MB라면 최대 메모리 사용량이 약 400MB에 이를 수 있습니다. 이미지가 지워지거나 페이지가 내려가면 오브젝트 URL이 해제되어 메모리 누수를 방지합니다.

모범 사례

JPEG/WebP는 품질 75에서 시작

품질 75는 대부분의 사례에서 권장되는 시작점입니다. 가시적 품질 손실은 최소이면서 파일 크기를 보통 60~80% 줄입니다. 의료 영상이나 인쇄용 사진처럼 세부 디테일 보존이 중요한 경우에만 품질 85 이상을 고려하십시오.

가능하면 WebP 사용

WebP는 동일한 시각 품질에서 JPEG보다 25~35% 작은 파일을 만들며 PNG처럼 투명도를 지원합니다. 2024년 기준 모든 최신 브라우저가 WebP를 지원합니다. 웹에서 최적의 압축-품질 비를 얻으려면 JPEG과 PNG를 WebP로 변환하십시오.

원본 파일 보관

항상 원본 비압축 이미지를 소스 파일로 보관하십시오. 손실 압축은 되돌릴 수 없으며, 이미 압축된 이미지를 다시 압축하면 큰 크기 감소 없이 품질만 더 나빠집니다(세대 손실이라고 합니다).

다운로드 전에 품질 확인

비교 버튼으로 다운로드 전에 압축 아티팩트를 시각적으로 점검하십시오. 텍스트, 선명한 경계, 미묘한 그라디언트가 있는 영역에 특히 주의하십시오. JPEG 아티팩트는 이러한 부분에서 가장 잘 드러납니다.

유사한 이미지끼리 묶어 처리

동일한 피사체 유형, 해상도, 색 심도처럼 특성이 비슷한 이미지는 같은 품질 설정에서 가장 잘 압축됩니다. 최적의 결과를 위해 사진과 그래픽/로고를 별도 배치로 처리하십시오.

자주 묻는 질문