이미지 Base64 변환기란?
이미지 Base64 변환기는 PNG·JPG·GIF·WebP·SVG 같은 이미지 파일을 텍스트 문자열(Base64)과 Data URI로 바꿔, 별도의 이미지 파일 없이 HTML·CSS·Markdown 안에 이미지를 직접 포함할 수 있게 해주는 개발자 도구입니다. 이미지를 끌어다 놓거나 클립보드에서 붙여넣기만 하면, 브라우저의 FileReader가 즉시 'data:image/...;base64,...' 형태의 Data URI를 만들어 줍니다.
범용 Base64 인코더가 단순히 문자열만 출력하는 것과 달리, 이 도구는 '이미지를 웹에 임베딩'하는 작업에 특화되어 있습니다. MIME 타입을 자동 감지한 Data URI는 물론, 바로 붙여넣을 수 있는 HTML ＜img＞ 태그, CSS background-image, Markdown 스니펫을 포맷별 탭으로 제공하고, 실시간 미리보기와 원본 대비 약 33% 용량 증가 안내까지 한 화면에서 확인할 수 있습니다. 작은 아이콘·로고를 인라인으로 넣어 HTTP 요청을 줄이려는 프런트엔드 개발자에게 최적입니다.
주요 기능
드래그·붙여넣기·다중 업로드
이미지를 끌어다 놓거나 파일을 선택하고, 클립보드에서 Ctrl+V로 붙여넣을 수 있습니다. 여러 장을 한 번에 올려 썸네일에서 하나씩 골라 변환합니다.
출력 포맷 5종 탭
순수 Base64, Data URI, HTML ＜img＞, CSS background-image, Markdown을 탭으로 전환하며 필요한 형식의 코드를 즉시 생성합니다. MIME 타입은 자동 감지됩니다.
미리보기 + 용량 안내
변환된 Data URI를 실시간으로 렌더링해 인코딩을 확인하고, 원본 대비 증가율과 인라인 임베딩 권장 여부(50KB 기준)를 함께 보여 줍니다.
원클릭 복사·다운로드
포맷별 결과를 한 번에 복사하거나 .txt·.html·.css·.md 파일로 내려받을 수 있습니다. 모든 처리는 브라우저 안에서만 이뤄집니다.
사용 방법
- 변환 영역에 이미지를 끌어다 놓거나 파일 선택 버튼을 누르거나, 클립보드에서 Ctrl+V로 붙여넣습니다. 여러 장을 동시에 올릴 수 있습니다.
- 필요한 출력 포맷 탭(Base64 · Data URI · HTML · CSS · Markdown)을 선택합니다. MIME 타입은 자동으로 감지됩니다.
- 미리보기에서 이미지가 정상적으로 렌더링되는지 확인하고, 원본 대비 용량 증가율과 임베딩 권장 안내를 확인합니다.
- 다중 업로드한 경우 썸네일에서 변환할 이미지를 선택해 결과를 전환할 수 있습니다.
- 복사 버튼으로 코드를 클립보드에 담거나 다운로드로 파일(.txt/.html/.css/.md)로 저장합니다.
활용 예시
작은 아이콘·로고 인라인 임베딩
버튼 아이콘이나 로고를 Data URI로 HTML·CSS에 직접 넣어 별도 이미지 요청 없이 렌더링해 초기 로딩을 빠르게 합니다.
이메일 HTML 이미지 삽입
외부 이미지가 차단되기 쉬운 이메일에서, 작은 이미지를 Data URI로 본문에 직접 포함해 안정적으로 표시합니다.
CSS background-image 작성
스프라이트나 배경 패턴을 CSS background-image: url()로 인라인 처리해 스타일시트 한 파일로 묶습니다.
문서·README에 이미지 첨부
외부 호스팅 없이 Markdown  형태로 작은 이미지를 문서에 직접 넣어 깨짐 없이 공유합니다.
자주 묻는 질문
이미지 Base64 변환이란 무엇인가요?
이미지의 이진 데이터를 텍스트 문자열(Base64)로 변환하는 것입니다. 변환된 문자열 앞에 'data:image/png;base64,'와 같은 접두어를 붙이면 Data URI가 되어, 별도의 이미지 파일 없이 HTML·CSS·Markdown 안에 이미지를 직접 포함할 수 있습니다. 작은 아이콘이나 로고를 인라인으로 넣어 HTTP 요청을 줄일 때 유용합니다.
어떤 이미지 형식을 지원하나요?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO를 지원합니다. MIME 타입을 자동으로 감지해 'data:image/...;base64,' 접두어를 형식에 맞게 생성하므로, 변환 결과를 그대로 브라우저에서 사용할 수 있습니다. 여러 장을 한 번에 업로드해 하나씩 선택하며 변환할 수도 있습니다.
변환하면 파일 용량이 늘어나나요?
네, Base64는 3바이트를 4개의 문자로 표현하기 때문에 원본보다 약 33% 커집니다. 도구가 원본 대비 증가율을 함께 보여 줍니다. 그래서 큰 사진보다는 1~2KB 수준의 작은 아이콘·로고를 인라인으로 임베딩할 때 가장 효과적입니다. 50KB가 넘으면 별도 파일 링크를 권장하는 안내가 표시됩니다.
Data URI, HTML, CSS 코드는 어떻게 다른가요?
Data URI는 'data:image/...;base64,...' 형태의 순수 데이터 URL입니다. HTML은 이를 ＜img src="..."＞ 태그로 감싼 코드, CSS는 background-image: url("...") 형태로 감싼 코드, Markdown은  형태입니다. 사용할 위치(HTML 본문/스타일시트/문서)에 맞는 탭을 골라 바로 복사해 붙여넣으면 됩니다.
업로드한 이미지가 서버로 전송되나요?
아니요. 모든 변환은 브라우저의 FileReader API로 기기 안에서만 처리되며, 이미지나 변환 결과가 서버로 전송·저장되지 않습니다. 인터넷 연결이 끊긴 상태에서도 동작하므로, 사내 자산이나 민감한 이미지도 안심하고 변환할 수 있습니다.
SVG도 Base64로 변환할 수 있나요?
네, SVG도 동일하게 Base64 Data URI로 변환됩니다. 다만 SVG는 텍스트 기반이라 원본 자체가 이미 가벼운 경우가 많고, CSS의 url() 안에서 URL 인코딩 방식으로 넣는 편이 가독성이 좋을 때도 있습니다. 인라인 임베딩이 꼭 필요한 경우에 Base64 변환을 활용하세요.
개인정보 안내
업로드한 이미지와 변환 결과는 모두 브라우저(클라이언트) 안에서 FileReader API로만 처리되며, 어떤 데이터도 서버로 전송되거나 저장되지 않습니다. 인터넷 연결이 끊긴 상태에서도 동작하므로 사내 자산이나 민감한 이미지도 안전하게 변환할 수 있습니다.
댓글과 질문