이미지를 Base64 Data URL, CSS 인라인, HTML img 태그로 변환합니다. 반대 방향(디코딩)도 지원.
이미지 Base64 변환 사용법
- 인코딩 탭에서 이미지를 선택(또는 드래그)합니다.
- Data URL·CSS·HTML 3가지 포맷이 자동 생성됩니다.
- 원하는 포맷의 복사 버튼을 누르고 코드에 붙여넣습니다.
- 반대로 디코딩 탭에서 Base64 문자열을 이미지로 복원할 수도 있습니다.
- 완성된 코드를 CSS·HTML·React·Vue에 바로 사용합니다.
주요 기능
- 이미지 → Data URL / CSS / HTML 3포맷 동시 변환
- 반대 방향 디코딩 (Base64 → 이미지 파일)
data:접두사가 없는 순수 Base64도 자동 감지- 파일 크기·MIME 타입·Base64 길이 정보 표시
- 완전 로컬 처리 — 이미지가 서버로 전송되지 않음
활용 예시
- CSS 인라인 배경 — 작은 아이콘·패턴을 단일 파일로 번들
- 이메일 HTML — 외부 이미지 차단 우회 (일부 클라이언트)
- React·Vue 컴포넌트 — 빌드 없이 이미지 즉시 임베드
- JSON·localStorage 저장 — 이미지를 텍스트로 직렬화
- API 테스트·디버깅 — 이미지 필드 샘플 데이터 생성
Base64란? 언제 써야 할까?
Base64는 바이너리 데이터를 영문자·숫자·일부 기호(A-Z, a-z, 0-9, +, /)로 인코딩하는 방식입니다. 원본 대비 약 33% 크기가 증가하는 대신, 텍스트로만 전송 가능한 환경(JSON·이메일·HTML)에 직접 담을 수 있습니다. 작은 이미지(10KB 이하 아이콘·패턴)에 적합하며, 수백 KB 이상의 큰 이미지는 일반 파일 참조가 캐싱·성능 면에서 유리합니다.
자주 묻는 질문
이미지가 서버에 업로드되나요?
아니요. 모든 변환은 브라우저 내부에서만 이루어지며 외부 서버로 전송되지 않습니다. 민감한 이미지도 안심하고 사용하세요.
큰 이미지도 변환되나요?
기술적으로는 수 MB까지 가능하지만, 결과 텍스트가 매우 길어지고 성능·캐싱이 나빠집니다. 일반적으로 10~30KB 이하의 작은 이미지만 Base64로 임베드하는 것을 권장합니다.
왜 Base64 이미지가 느리게 느껴질까요?
Base64 이미지는 HTML·CSS 안에 직접 포함되어 브라우저 캐시가 적용되지 않고, 매번 페이지를 새로 파싱해야 하기 때문입니다. 동일 이미지를 여러 페이지에서 쓴다면 일반 파일 참조가 훨씬 빠릅니다.
SVG도 Base64로 변환할 필요가 있나요?
SVG는 원래 텍스트 형식이라 url("data:image/svg+xml;utf8,...") 형태로 직접 인라인하는 것이 더 효율적입니다. Base64로 변환하면 크기만 커지고 이점이 없습니다.