예시
입력
user.jpg (1920×1080, 543 KB)
출력
user_600x400.jpg (600×400, 78 KB)
참고
원본 비율(1.78) ≠ 목표 비율(1.5) → crop 모드에서 중앙을 기준으로 잘라 정확히 600×400 으로 만듭니다.
사용 가이드
이런 작업에 유용해요
- 프로필 사진을 정해진 크기 (예: 600×400) 로 빠르게 맞추기
- SNS·블로그 업로드용 이미지 크기·용량 조정
- 회원가입·관리자 폼의 가로세로 제한에 맞춰 자동 fit
- 썸네일 일괄 생성 (원본 비율 유지)
- 모바일 데이터 절약 — JPEG 품질 낮춰 파일 크기 감소
자주 묻는 질문
- Q.원본 파일이 서버로 전송되나요?
- A.아니요. 모든 변환은 브라우저 안에서 Canvas API 로 처리됩니다. 파일은 어디로도 업로드되지 않습니다.
- Q.큰 파일도 처리되나요?
- A.20 MB 까지 받습니다. 4K · 큰 RAW 등은 브라우저 메모리·속도에 따라 느릴 수 있어 일반적으로 권장하지 않습니다.
- Q.JPEG / PNG / WebP 무엇을 선택?
- A.사진은 JPEG (압축률 ↑) · 투명 배경 필요하면 PNG (lossless) · 최신 브라우저 호환 + 더 작은 용량은 WebP.
재미있는 사실
이미지 리사이즈는 픽셀 보간 (interpolation) 알고리즘 선택이 핵심입니다. 빠르지만 거친 nearest-neighbor → 부드러운 bilinear → 더 선명한 bicubic → 가장 좋은 Lanczos. 브라우저 Canvas API 의 `drawImage` 는 기본 bilinear 또는 bicubic — quality 와 속도의 균형.
Wikipedia — Image scalingJPEG 의 'quality' 슬라이더는 실제로 DCT 계수 quantization table 의 강도 조절입니다. 80% 이하로 떨어뜨리면 블록 아티팩트가 명확히 보이기 시작 — 90~95% 가 '사람이 차이를 못 보면서 파일 크기는 가장 작은' sweet spot.
Wikipedia — JPEG qualityWebP 는 Google 이 2010년 발표한 포맷 — JPEG 보다 평균 25~35% 작고 PNG 처럼 lossless 도 가능. iOS 14 (2020) 가 늦게 지원하면서 모든 모던 브라우저 호환을 달성한 게 가장 큰 채택 모멘텀이었어요.
Google — WebP
관련 가이드
- 웹 이미지 최적화 — WebP·AVIF·srcset·올바른 압축
최신 이미지 포맷 비교, JPEG/WebP/AVIF 선택 기준, srcset 반응형 이미지, lazy loading, 압축의 동작 원리.
- SVG 최적화 — 편집 도구 50KB export 를 5KB 까지 줄이기
편집 도구 export 가 왜 부풀어 오르는지, SVGO 가 무엇을 제거하는지, inline vs 외부 참조, sprite 시트, 사용자 업로드 SVG 보안 체크리스트.
- 이미지는 어떻게 압축될까? (PNG · JPG · WebP · AVIF)
JPEG 안에 무엇이 들었는지, PNG 가 무손실인 이유, WebP·AVIF 가 어떻게 시각 손실 없이 더 작아지는지. DCT·Huffman·palette indexing·각 포맷의 트레이드오프.
관련 도구
- 컬러 변환
HEX·RGB·HSL을 양방향 변환합니다. 입력 형식을 자동 인식하고 컬러 미리보기를 함께 표시합니다.
- 이미지 → Base64 (Data URI)
이미지를 Base64 data URI로 변환합니다. HTML/CSS/Markdown에 인라인으로 삽입할 때 사용. 5 MB 이하 권장.
- 이미지 자르기
브라우저에서 바로 이미지를 자릅니다. 드래그로 영역 선택, 비율 고정(1:1·16:9 등), PNG/JPEG 저장. 업로드 없음.
- 이모지 피커
이모지를 클릭 한 번에 복사. 한·영 이름 검색, 카테고리 탐색, 최근 사용·즐겨찾기를 브라우저에 저장.
- QR 코드 생성기
텍스트나 URL로 QR 코드를 생성합니다. 에러 정정 단계(L/M/Q/H) 조정, SVG 출력, 다운로드 지원.
- 색 대비 검사기
전경색과 배경색 사이 WCAG 대비비를 계산하고 AA/AAA(일반·큰 글자) 통과 여부를 표시합니다. 실시간 샘플 미리보기.
- 색 팔레트 생성기
하나의 기준 색에서 팔레트를 생성합니다 — 명도 변형(shades/tints), 보색, 유사색, 삼색조, 사색조. HSL 기반, 0 dependency.
- CSS 그라디언트 생성기
선형·방사형·원뿔 CSS 그라디언트를 색상 정지점·각도와 함께 만듭니다. 실시간 미리보기 + 복사 가능한 CSS 출력.
- PDF 병합
여러 PDF 파일을 하나로 합칩니다. 순서 변경 가능. 모든 처리는 브라우저에서 — 파일이 외부로 전송되지 않습니다.
- PDF 분할
PDF에서 페이지 범위를 추출합니다. 예: 1-3,5,7-9. 모든 처리는 브라우저에서 — 파일이 외부로 전송되지 않습니다.
- PDF 회전
PDF 의 전체 또는 선택 페이지를 90°·180°·270° 회전. 스캔이 잘못된 방향일 때 유용. 모든 처리는 브라우저에서.
- PDF 워터마크
PDF 모든 페이지에 텍스트 워터마크 (CONFIDENTIAL, DRAFT 등) 추가. 투명도·회전·크기·색상 조절. 모든 처리는 브라우저에서.
- PDF 압축
PDF 를 object stream 압축 + 메타데이터 제거로 재인코딩. 텍스트 위주는 5-20% 감소. 이미지 위주 PDF 는 server-side 도구 필요. 모든 처리는 브라우저에서.
- 이미지 PDF 변환
JPG·PNG 등 여러 이미지를 PDF 한 파일로 — 브라우저에서. 순서 변경, A4/Letter/원본 크기 선택. 업로드 없음.
- 파비콘 생성기
이미지·이모지·텍스트로 파비콘을 만듭니다. 다중 크기 favicon.ico, apple-touch-icon, PWA 아이콘과 바로 쓰는 HTML·manifest 스니펫. 브라우저에서 바로.