MultiKit
사용 방법
- 이미지를 상자에 끌어다 놓거나 Ctrl+V로 붙여 넣거나 파일을 선택합니다.
- 필요한 형태를 고릅니다. 전체 데이터 URI, Base64만, HTML img 태그, CSS background-image, 마크다운 이미지가 있습니다. SVG는 더 작은 URL 인코딩 형태도 있습니다.
- 복사를 누르거나 텍스트를 파일로 받습니다. 파일과 텍스트의 크기가 함께 표시됩니다.
예시
1×1 PNG
→ data:image/png;base64,iVBORw0KGgo…모든 PNG는 같은 8바이트로 시작하므로 Base64로는 항상 iVBORw0KGgo로 시작합니다.
3,000바이트 이미지
→ Base64 4,000자 (33% 큼)Base64는 3바이트를 4글자로 바꿉니다.
작은 SVG 아이콘, URL 인코딩 형태
→ data:image/svg+xml,%3Csvg … %23ff0000 …Base64 형태보다 짧고 읽을 수 있습니다.
계산 방식
파일을 데이터 URI로 바꾸는 일은 브라우저의 FileReader가 정확히 해 주므로 인코딩에 라이브러리가 필요하지 않습니다. 도구는 붙여 넣기 좋은 여러 형태, 크기 비교, 그리고 SVG의 더 짧은 URL 인코딩 형태를 더합니다. 이 형태는 주석과 불필요한 공백을 지우고 주소를 깨뜨리는 문자만 이스케이프합니다.
길이 계산, 데이터 URI 해석, 여러 형태의 코드, SVG 인코딩을 테스트하며, SVG 형태를 다시 풀면 동등한 SVG가 되는지도 확인합니다.
출처
자주 묻는 질문
- 데이터 URI가 무엇인가요?
- data:image/png;base64,AAAA…처럼 파일의 내용을 주소 자체에 넣는 방법입니다. 브라우저는 서버에 따로 요청하지 않고 일반 이미지처럼 보여 줍니다.
- 언제 쓰면 좋은가요?
- 수 킬로바이트 이하의 아이콘, 작은 배경 같은 아주 작은 이미지를 이메일 템플릿, 단일 HTML 파일, CSS에 넣을 때입니다. 요청 한 번을 줄여 줍니다.
- 언제 쓰면 안 되나요?
- 약 100KB보다 큰 이미지입니다. Base64는 파일보다 3분의 1 크고, HTML이나 CSS를 무겁게 만들며, 브라우저가 이미지를 따로 캐시하지 못합니다. 일반 파일 링크가 낫습니다.
- SVG 형태가 더 짧은 이유는요?
- SVG는 이미 텍스트라서 몇 글자만 이스케이프해서 주소에 넣을 수 있지만, Base64로 만들면 3분의 1이 커집니다. CSS url("...") 안에 넣을 수 있도록 큰따옴표는 작은따옴표로 바꿉니다.
- 이미지가 업로드되나요?
- 아니요. 브라우저가 파일을 읽어 그 자리에서 텍스트를 만듭니다.
- 크기 제한이 있나요?
- 5MB입니다. 그렇게 큰 이미지는 어떤 경우에도 텍스트로 만들지 않는 것이 좋습니다.
관련 도구
버전 기록
- 1.0.1 — 검색 제목에서 도구의 핵심 작업과 무료·온라인 사용 여부를 더 분명하게 안내합니다.
- 1.0.0 — 첫 공개.