도구
가이드

이미지 압축

이미지

Canvas 품질 제어로 이미지 크기를 조정하고 재인코딩하며, 압축 전후 크기를 비교합니다.

100% 클라이언트 백엔드 없음
이미지를 클릭하거나 놓으세요
이 페이지에서

이미지 압축기란?#

이 도구는 브라우저의 Canvas 파이프라인을 통해 이미지를 더 낮은 품질, 다른 포맷, 또는 더 작은 픽셀 크기로 다시 인코딩해서 파일 크기를 줄입니다. 어떤 조합을 선택하느냐에 따라 다릅니다. 결과물은 다운로드할 수 있는 새 파일이고, 전후 크기 비교가 함께 보여서 절충안이 한눈에 보입니다. 흔한 “이 사진은 첨부하기엔 너무 크다” 문제를 업로드 없이 로컬에서 해결합니다.

세 가지 조절계가 있고, 이들을 조합할 수 있습니다.

  • 출력 형식 — JPEG(손실, 불투명), WebP(손실, 최신 방식, 동일 품질에서 JPEG보다 약 25–35% 작음), 또는 PNG(무손실, 크기 감소는 리사이즈로만 가능하고 품질 손실로는 불가).
  • 품질 — 5–100 슬라이더로 인코더의 품질 설정에 대응됩니다. JPEG과 WebP에만 적용됩니다. PNG는 구조상 품질 손실이 불가능하므로 PNG에서는 슬라이더가 숨겨집니다.
  • 최대 너비 / 높이 — 인코딩 전에 이미지를 축소(화면비는 유지, 확대는 하지 않음)하는 선택적 상한입니다. 사진에서는 리사이즈가 압도적으로 가장 큰 크기 절감 효과를 냅니다.

작업은 createImageBitmap과 canvas.toBlob을 통해 <canvas>에서 이루어지므로, 이미지가 메모리에서 디코딩·변환·재인코딩됩니다. 원본 파일은 그대로입니다.

사용 방법#

  1. 점선 영역에 이미지를 끌어 놓으세요.
  2. 컨트롤 줄에서 다음을 선택합니다.
    • 출력 형식 — PNG/WebP는 원본 타입이 기본, 그 외는 JPEG이 기본입니다.
    • 최대 너비 / 최대 높이 — “자동”(리사이즈 없음)으로 두려면 비워 두거나, 픽셀 상한을 입력하세요. 왜곡 없이 상자 안에 맞게 축소됩니다.
    • 품질 — 슬라이더를 드래그(5–100)합니다. 현재 값이 옆에 표시됩니다. PNG에서는 무시됩니다.
  3. 압축을 클릭하세요. 통계 막대에 원본, 압축됨, 절감(바이트와 백분율)이 표시되고, 결과가 오히려 더 큰 경우 안내문도 나옵니다.
  4. 압축된 파일을 다운로드하세요. 미리보기에 결과가 보이므로 화질을 직접 판단할 수 있습니다.

주요 특징#

  • 포맷을 인식하는 기본값. PNG는 PNG로 유지되어(투명도와 날카로운 경계가 살아남) 알파 채널이 조용히 파괴되는 일이 없고, 사진은 JPEG이 기본입니다.
  • 화면비를 보존하는 리사이즈. 최대 너비와 높이는 경계 상자를 정의합니다. 이미지는 비율을 유지한 채 안에 맞춰지며, 절대 확대되지 않습니다.
  • 정직한 크기 보고. 재인코딩 결과가 더 큰 파일을 만들 때(PNG→PNG이나 이미 작은 JPEG에서 흔함), 공간을 절감한 척하지 않고 사실대로 알려줍니다.
  • WebP 출력. 최신 브라우저는 동일한 시각 품질에서 JPEG 대비 추가로 25–35%를 줄여줍니다. 웹 에셋에 유용합니다.
  • 로컬 파이프라인. Canvas API가 인코딩을 처리합니다. 아무것도 업로드되지 않습니다.

실제 예시#

4032×3024 해상도의 4.5 MiB 휴대전화 사진이 이메일에 너무 큽니다. 끌어 놓고, 출력 형식을 WebP로, 최대 너비를 1920로(높이는 자동으로 1440), 품질을 80으로 설정하세요. 압축을 클릭합니다. 통계 막대가 다음을 보고합니다.

항목값
원본4.5 MiB (4032×3024)
압축됨0.41 MiB (1920×1440)
절감91%

리사이즈가 대부분의 일을 했습니다(픽셀 수가 약 4배 감소). 품질 80의 WebP가 나머지를 처리했습니다. 결과는 0.5메가바이트 미만이며 화면에서는 시각적으로 차이가 나지 않습니다.

반면 동일한 원본을 PNG로, 품질 100에 리사이즈 없이 설정하면 압축된 파일이 더 크다고 보고하는 것이 일반적입니다. PNG는 무손실이라서 사진의 노이즈를 JPEG이나 WebP처럼 버릴 수 없기 때문입니다. 이 도구는 가짜 절감을 주장하는 대신 “더 큽니다” 안내로 표시합니다.

FAQ#

품질 슬라이더가 회색으로 비활성화돼요. 왜 그런가요?#

PNG는 무손실 포맷이라 품질 조절계가 없습니다. PNG를 선택하면 효과가 없으므로 슬라이더가 숨겨집니다. 품질을 조절하려면 JPEG이나 WebP로 전환하세요.

”압축된” 파일이 원본보다 큰데 어떻게 된 건가요?#

흔한 원인이 두 가지 있습니다. 이미 압축된 JPEG을 PNG으로 재인코딩한 경우(PNG은 사진에서 JPEG의 손실 압축을 따라갈 수 없습니다), 또는 원본이 아주 작고 고도로 압축된 이미지인데 PNG 재인코딩이 오버헤드를 더한 경우입니다. 손실 포맷(JPEG이나 WebP)을 선택하거나 리사이즈를 켜 보세요.

최대 너비를 아주 크게 입력하면 확대되나요?#

아니요. 최대 너비와 높이는 상한만 정합니다. 원본이 이미 더 작으면 원래 크기 그대로 통과합니다. 확대는 화질 이득 없이 파일만 부풀릴 뿐입니다.

WebP는 어디서나 안전한가요?#

최신 브라우저(Chrome, Edge, Firefox, Safari 14 이상) 모두 WebP를 지원합니다. 아주 오래된 브라우저나 특정 이미지 처리 파이프라인을 지원해야 한다면 JPEG으로 대체하세요.