정확한 가로·세로 픽셀로

언제 쓰나

SNS 업로드 규격 (Instagram 1:1·4:5·스토리, X 16:9), Open Graph 카드, 이력서 증명사진 3×4 처럼 정확한 가로·세로 픽셀이 필요할 때 씁니다. 이미지 압축이 "용량을 줄인다" 면, 이쪽은 "치수를 정확히 맞춘다" 입니다.

가두기 · 채우기 · 그대로

세 가지 모드의 차이는 비율 처리입니다.

• 가두기 (contain) — 비율 유지. 결과가 지정 크기 안으로 들어옵니다. 세로가 더 긴 사진을 1080×1080 으로 가두면 결과는 810×1080 (가로 짧음) 처럼 한 변이 작아집니다.
• 채우기 (cover) — 비율 유지. 지정 크기를 가득 채우고 가운데를 잘라 정확한 치수를 맞춥니다. 인물·중앙 피사체에 적합.
• 그대로 (stretch) — 비율 무시. 지정 가로·세로로 늘리거나 줄여 픽셀이 정확히 일치합니다. 비율이 다르면 왜곡됩니다.

프리셋

자주 쓰이는 7 종을 미리 박아두었습니다 — Instagram 1:1, 4:5, 9:16, X / Twitter 16:9, OG 1.91:1, 증명사진 3×4 (295×413), 아바타 256. 직접 입력으로 임의 가로·세로도 가능하고, 비율 고정을 켜면 한쪽만 바꿔도 다른 쪽이 원본 비율로 따라옵니다.

로컬 처리

리샘플링은 @jsquash/resize 의 Lanczos3 WASM, 크롭은 OffscreenCanvas. 디코드·리샘플·크롭·인코드 모두 브라우저 안에서 일어나고, 원본 파일과 결과 모두 서버로 전송되지 않습니다. 한 번에 50장까지 큐에 넣을 수 있고 Web Worker 2개를 병렬로 사용해 큰 사진도 UI 가 멈추지 않습니다.

이럴 땐 안 맞습니다

• 인쇄용 고해상도 — 인쇄소는 보통 원본 그대로 또는 별도 DPI 규격을 요구합니다. 화면 픽셀 기준 리사이즈와 다릅니다.
• HEIC (아이폰) — 브라우저가 디코드하지 못합니다. 먼저 JPG 로 내보내기 한 뒤 처리하세요.
• GIF 애니메이션 — 첫 장면만 남고 움직임은 사라집니다.
• 얼굴 정확히 가운데에 — 채우기 모드의 크롭은 항상 기하학적 중앙 입니다. 얼굴 위치가 위쪽이면 크롭 후 잘릴 수 있습니다.