브라우저 기반 이미지 크기 조정의 작동 원리
모든 크기 조정은 JavaScript만으로 완전히 실행되는 짧은 파이프라인입니다. 코덱 라이브러리를 다운로드하지 않으며 서버도 관여하지 않습니다. 브라우저의 Canvas API가 파일을 디코딩하고 목표 크기로 재그리고 메모리에서 재인코딩한 다음 페이지가 미리 보기하거나 ZIP으로 묶을 수 있는 Blob을 넘겨줍니다. 모든 단계가 탭의 샌드박스 안에서 이루어지므로 원본 파일은 네트워크에 전혀 도달하지 않습니다.
- 업로드된 각 파일을 Blob으로 읽고 객체 URL을 생성해 브라우저가 서버에 바이트를 복사하거나 디스크에 기록하지 않고도 디코딩할 수 있도록 합니다.
- 선택한 모드(최장 변 상한, 정확한 너비와 높이, 또는 백분율 배율)에서 목표 치수를 계산합니다. 종횡비 잠금을 사용하면 단일 필드를 편집할 때 비율이 올바르게 유지됩니다.
- 목표 크기의 오프스크린 Canvas를 만들고
ctx.drawImage(source, 0, 0, width, height)를 호출해 디코딩된 픽셀을 재그립니다. 브라우저가 크기 조정 결과를 부드럽게 만드는 보간을 처리합니다. canvas.toBlob을 호출해 소스 형식으로 재인코딩합니다. PNG는 무손실을 유지하고, JPEG와 WebP는 고품질로 재인코딩됩니다. 그런 다음 페이지는 전후 비교 카드를 표시하고 이미지별 다운로드 또는 fflate로 메모리에서 구축한 단일 ZIP을 제공합니다.
이미지 크기를 조정해야 하는 이유
- 너무 큰 이미지는 페이지가 느려지는 가장 흔한 원인입니다. 4000×3000 스마트폰 사진을 600 픽셀 너비 레이아웃에 그대로 넣으면 화면이 표시할 수 있는 것보다 약 40배 많은 픽셀이 전송됩니다. 업로드 전에 최장 변을 1600 px로 제한하면 페이지 무게를 크게 줄이고 Core Web Vitals LCP를 개선할 수 있습니다.
- 업로드 폼은 엄격한 치수를 강제합니다. 아바타 슬롯, 증명사진 포털, 마켓플레이스 상품 목록, OG 소셜 카드는 모두 특정 픽셀 크기를 요구합니다: Open Graph 미리보기는 1200×630, 앱 아이콘은 512×512, 썸네일은 150×150. 정확한 수치를 맞추면 업로드 거부 루프를 피할 수 있습니다.
- 이메일과 채팅 도구는 큰 파일을 조용히 재압축하는 경우가 있어 깔끔한 스크린샷이 망가질 수 있습니다. 직접 적절한 너비로 크기를 조정하면 다른 사람의 손실 파이프라인에 맡기는 대신 결과를 예측 가능하게 유지할 수 있습니다.
- 갤러리와 카탈로그에서는 일괄 일관성이 중요합니다. 혼합된 크기의 사진 폴더를 단일 800×800 목표로 처리하면 모든 카드가 그리드에 정렬되어 레이아웃을 깨는 거대한 이미지가 생기지 않습니다.
일반적인 활용 사례
원본 치수와 목적지의 요구사항이 맞지 않을 때마다 크기 조정이 필요합니다. 같은 패턴이 반복해서 나타납니다.
- Shopify 또는 WooCommerce 쇼핑몰용 상품 사진 준비. 4000 픽셀 카메라 원본 폴더를 최장 변 1600 px로 제한하면 스토어프론트가 빠르게 로드되고 종횡비가 유지되어 이미지가 늘어나 보이지 않습니다.
- 하나의 마스터 파일에서 소셜 및 앱 에셋 생성. Open Graph 카드용으로 1200×630을 정확히 설정하고, 앱 아이콘용으로 512×512를 설정해 무거운 편집기를 열지 않고 몇 번의 클릭으로 내보낼 수 있습니다.
- QA 또는 지원 스크린샷을 티켓에 첨부하기 전에 일괄 압축. 50장 폴더를 50%로 크기 조정하면 보통 버그 트래커에 넣기 전 아카이브 크기를 약 4분의 3 정도 줄일 수 있습니다.
실전 예시: 4000 px 사진을 1600 px 웹 이미지로
스마트폰에서 바로 꺼낸 4000×3000 사진은 어떤 웹 레이아웃이 필요로 하는 것보다 훨씬 큰 일반적인 파일입니다. 크기 조정이 절약해 주는 것을 측정하는 공정한 기준입니다.
사진을 업로드 영역에 드롭하고, 모드를 최장 변 제한으로 유지하고, 값을 1600으로 설정합니다. Canvas 파이프라인이 종횡비를 유지하며 1600×1200으로 이미지를 재그리고 원본 형식으로 재인코딩합니다. 출력 카드에 새 치수와 파일 크기가 표시됩니다. 일반적인 JPEG의 경우 수 메가바이트에서 수백 킬로바이트로 줄어듭니다. 카드에서 다운로드를 클릭해 단일 파일을 받거나, 한 번에 여러 이미지를 크기 조정한 경우 Download .zip을 클릭하세요. 드롭에서 다운로드까지 전체 과정은 순식간에 완료되며 페이지 로드 후 대역폭을 전혀 사용하지 않습니다.
어떤 크기 조정 모드가 있나요?
세 가지입니다. 최장 변 제한은 너비 또는 높이의 긴 쪽을 픽셀 값으로 제한하고 다른 쪽을 맞춰 조정합니다. 변형이 없는 안전한 기본값입니다. 정확한 너비 × 높이는 두 수치를 모두 입력할 수 있으며 첫 번째 필드를 편집하면 소스 비율에서 두 번째 필드가 자동 계산되는 종횡비 잠금 기능이 있습니다 — 폼이 비비례 정확 크기를 요구할 때는 잠금을 끄세요. 백분율로 크기 조정은 두 치수를 단일 계수로 곱하며 전체 배치를 한 번에 절반으로 줄이거나 두 배로 늘리는 데 편리합니다. 1920×1080부터 150×150 썸네일까지 가장 흔한 목표를 커버하는 6개의 원클릭 프리셋도 있습니다.
처리가 내 기기에서 이루어지나요?
예, 완전히 로컬에서 처리됩니다. 페이지는 브라우저의 네이티브 Canvas API와 Web File API를 사용해 메모리에서 각 이미지를 디코딩, 재그리기, 재인코딩합니다. 이미지 데이터는 서버에 전송되지 않으며 임시 업로드도 클라우드 왕복도 없습니다. 직접 확인할 수 있습니다: DevTools를 열고 Network 패널로 전환한 뒤 크기 조정을 실행하세요. 보이는 유일한 외부 요청은 초기 페이지 로드와 광고 호출입니다. 이미지와 관련된 데이터는 탭을 벗어나지 않아 스캔된 신분증, 의료 이미지 등 업로드하고 싶지 않은 자료에도 안전합니다.
크기 조정으로 품질이 떨어지나요?
이미지를 줄이면(다운스케일) 결과가 훌륭합니다 — 브라우저가 소스 픽셀을 더 적은 픽셀로 평균화하므로 디테일이 선명하게 유지되고 파일도 훨씬 작아집니다. 소스 해상도를 넘어 확대하면(업스케일) 처음에 캡처되지 않은 디테일을 만들어 낼 수 없으므로 작은 이미지를 크게 키우면 흐릿해 보입니다. 이것은 이 도구만의 한계가 아니라 모든 리사이저에 공통된 한계입니다. 출력은 소스 형식을 유지합니다: PNG는 무손실, JPEG와 WebP는 고품질 설정으로 재인코딩되어 원본과의 시각적 차이를 거의 알아보기 어렵습니다.
어떤 파일 형식이 지원되나요?
입력 측에서는 브라우저가 디코딩할 수 있는 모든 형식이 허용됩니다: PNG, JPEG, WebP, GIF, BMP는 스마트폰, 카메라, 스크린샷 도구가 만드는 거의 모든 파일을 커버합니다. Canvas 인코더가 지원하는 경우 출력은 소스 형식을 유지합니다 — PNG, JPEG, WebP는 그대로 왕복됩니다. GIF와 BMP(Canvas API가 디코딩은 하지만 재인코딩은 못하는)는 무손실 PNG로 저장됩니다. 크기 조정된 파일명에는 새 치수가 포함됩니다(예: photo-1600x1200.jpg)므로 일괄 파일 정렬이 쉽습니다.
이미지를 드롭하고, 크기를 선택하고, 크기를 조정하세요. 모든 것이 탭 안에서 실행됩니다. 업로드 없음, 계정 없음, 서버 대기 없음.