이미지→Base64 변환 — data URL 온라인
이미지를 Base64 텍스트, 또는 HTML·CSS·Markdown·문자열만 받는 설정용 전체 `data:image/...;base64,` data URL로 바꿉니다. 작은 아이콘·썸네일에 적합 — 수 MB 사진을 넣으면 페이지가 비대해지고 로딩이 느려집니다.
파일을 여기에 놓거나 클릭하여 선택
Base64는 바이너리를 읽을 수 있는 문자로 나타냅니다. data URL이면 추가 HTTP 요청 없이 이미지를 올릴 수 있지만, 문자열이 파일보다 약 1/3 크고 캐시도 잘 안 됩니다.
킬로바이트급 아이콘, 픽셀 아트, 작은 로고용입니다. 여행 사진을 CSS에 넣으면 스타일시트가 거대해집니다.
원본이 크면 먼저 압축하거나 리사이즈 — 인코딩된 문자열도 짧아집니다.
변환 방법
- 이미지를 고르고 미리보기 확인
- 필요에 따라 data URL 접두사 전환
- 출력 텍스트 복사
- HTML·CSS·설정에 붙여넣기
이미지 Base64가 맞는 때
- 단일 파일 데모·이메일 HTML에 인라인 아이콘이 필요할 때.
- 추가 에셋 없이 아주 작은 CSS 배경.
- 이미지를 텍스트 필드로만 받는 API·설정.
- data URL 접두사를 선택해 바로 붙여넣을 수 있음.
시나리오
- 컴포넌트 문서에 16×16 아이콘 임베드
- 이메일 템플릿의 작은 배지(총 용량 주의)
- Base64 이미지 데이터를 기대하는 폼 필드
팁
- CSS `url()`에는 data URL 접두사를 켜세요.
- 상대가 순수 Base64만 원하면 접두사를 끄세요.
- 문자열이 너무 길면 먼저 압축/리사이즈.
- 파일로 되돌리려면 Base64→이미지.
출력 형태
| 입력 | 출력 | 설명 |
|---|---|---|
| 작은 PNG 아이콘 | data:image/png;base64,... | 접두사 포함 |
| 같은 이미지 | 순수 Base64 문자열 | 접두사 끔 |
이미지→Base64 FAQ
- 어떤 이미지 유형이 되나요?
- 브라우저가 이미지로 읽는 흔한 형식: PNG, JPG, WebP, GIF 등.
- 왜 파일보다 「긴」가요?
- Base64 인코딩은 크기가 팽창합니다 — 정상이며 오류가 아닙니다.
- 폴더 전체를 일괄할 수 있나요?
- 여기서는 한 장씩입니다. 미리보기를 확인하기 쉽도록.
- 큰 사진에 적합한가요?
- 아니요 — 큰 이미지는 일반 URL로 호스팅하고 Base64는 작은 자산용으로.