Base64 DataURL 변환

GeekFormat 정보

순수 Base64

0글자

순수 Base64

0글자

DataURL 산출

0글자

Base64와 DataURL 형식을 상호 변환하는 온라인 도구. MIME 유형 자동 인식과 공백 제거를 지원합니다.

Base64 DataURL이란 무엇인가요?

DataURL은 데이터를 URL에 직접 임베드하는 URI 방식으로, 형식은 data:[<MIME유형>];base64,<Base64데이터> 입니다. 이미지·PDF·폰트 같은 작은 리소스를 추가 HTTP 요청 없이 HTML·CSS·JavaScript에 직접 인라인할 수 있습니다.

**순수 Base64와 DataURL의 차이점:** 순수 Base64는 인코딩된 문자열일 뿐입니다(예: iVBORw0KGgo...). DataURL은 data: 접두사와 MIME 유형을 포함한 완전한 URI이며, src·href·url() 등의 값으로 바로 사용할 수 있습니다.

**이 도구의 용도:** 「순수 Base64 문자열」과 「완전한 DataURL」 사이를 서로 변환합니다. 기존 Base64에 자동으로 data: 접두사와 MIME 유형을 붙이거나, DataURL에서 순수 Base64 부분만 추출할 수 있습니다.

**대표적인 용도:** ① CSS 배경 이미지 임베드·② HTML <img> src 인라인·③ Markdown 이미지 인라인·④ 리치 텍스트 편집기에 이미지 붙여넣기·⑤ data URI Scheme 디버깅.

사용 사례

기존 Base64에 data: 접두사와 MIME 유형을 추가해 HTML에 바로 임베드 가능한 DataURL 얻기
기존 DataURL에서 순수 Base64 부분만 추출해 재조립이나 전송에 활용
프런트엔드 data: URI 리소스를 디버깅할 때 Base64 페이로드 완전성 확인
클립보드에 있는 Base64의 MIME 유형(PNG/JPEG/PDF 등) 자동 인식
CSS background-image 또는 HTML <img src>에 사용할 data URL 준비
이미지 Base64를 Markdown 리치 텍스트 편집기에서 붙여넣기 가능한 DataURL로 변환

이용 방법

방향 선택: 「헤더 추가」(순수 Base64 → DataURL) 또는 「헤더 제거」(DataURL → 순수 Base64).
왼쪽 입력창에 내용 붙여넣기: 추가 모드에서는 순수 Base64를, 제거 모드에서는 data:... 문자열을 붙여넣습니다.
추가 모드 선택사항: 「자동 인식」을 그대로 두거나 MIME 드롭다운에서 특정 유형 선택.
도구가 실시간으로 변환하여 오른쪽에 결과를 표시하며, 복사하거나 txt로 다운로드할 수 있습니다.

주요 기능

양방향 변환: 순수 Base64 ⇔ DataURL
11가지 MIME 유형: 이미지·문서·오디오/비디오·텍스트 지원
MIME 자동 인식: 매직 바이트로 PNG/JPEG/GIF/WEBP/PDF 판별
공백 제거: 줄바꿈과 공백 등 불필요한 문자를 자동 정리
실시간 변환: 입력 후 300ms 지연으로 자동 재계산
방향 자동 전환: 전환 시 입출력이 자동으로 서로 교체됨
원클릭 복사: 변환 결과를 클립보드에 바로 복사
txt 다운로드: dataurl-result.txt 파일로 저장
PC/모바일 반응형: 좌우 분할은 드래그 가능, 모바일은 탭 전환
브라우저 로컬 처리: 콘텐츠가 서버로 전송되지 않음

Best Practices

먼저 자동 인식 사용

MIME 유형이 불확실하면 기본 「자동 인식」을 그대로 두고, 인식 실패 시에만 수동으로 선택하세요.

크기 제한 주의

DataURL은 브라우저에서 2~4MB 제한이 있습니다. 큰 파일은 임베드가 아닌 URL 참조를 사용하세요.

불필요한 문자 제거

Base64를 붙여넣을 때 줄바꿈이 포함되는 경우가 많은데, 도구가 자동 제거합니다. 민감한 경우 먼저 「Base64 정리」를 사용하세요.

비교 확인

변환 후 「Base64 검증」이나 브라우저 개발자 도구로 DataURL이 정상적으로 로드되는지 확인하세요.

복사 후 다시 확인

대상 위치에 붙여넣은 후 브라우저 콘솔에서 디코딩 결과가 기대와 일치하는지 확인하세요.

자주 묻는 질문

추가 모드는 기본적으로 자동 인식하나요?

예. 본 도구는 기본적으로 자동 인식이 켜져 있으며, Base64의 시작 바이트(매직 바이트)를 검사해 PNG·JPEG·GIF·WEBP·PDF 중 어느 것인지 판별합니다. 다른 MIME 유형(application/json, video/mp4 등)이 필요하면 드롭다운에서 수동 선택할 수 있습니다.

이미 data: 접두사가 있는 입력은 어떻게 되나요?

추가 모드에서 입력이 이미 data: 로 시작하면 도구는 그대로 반환하며 접두사를 중복 추가하지 않습니다. 제거 모드에서 입력이 DataURL 형식이 아니면, 도구는 공백 문자를 제거한 순수 Base64를 반환합니다.

자동 인식에 실패하면 어떻게 되나요?

Base64가 PNG/JPEG/GIF/WEBP/PDF 어느 매직 바이트와도 일치하지 않으면 자동 인식은 application/octet-stream 으로 폴백합니다. 다른 MIME 유형이 필요하면 수동으로 선택하세요.

어떤 MIME 유형을 지원하나요?

image/png, image/jpeg, image/gif, image/webp, image/svg+xml, application/pdf, application/json, text/plain, text/html, audio/mpeg, video/mp4 총 11가지 일반적인 유형을 지원합니다.

DataURL은 브라우저에서 크기 제한이 있나요?

예. 대부분의 브라우저는 DataURL 전체 길이에 제한(약 2MB~4MB, 브라우저에 따라 다름)이 있으며, 초과 시 리소스 로딩이 실패합니다. 큰 파일은 일반 URL로 참조하는 것을 권장합니다.

DataURL은 어디에 사용할 수 있나요?

HTML의 <img src>, CSS의 url(), <a href> 다운로드, JavaScript의 fetch, Markdown 이미지 구문, JSON 데이터 내 임베드 리소스 등에서 사용할 수 있습니다.

Base64 안의 줄바꿈과 공백은 자동으로 제거되나요?

예. 추가 모드에서는 접두사를 붙이기 전 줄바꿈과 공백을 제거하며, 제거 모드에서도 DataURL에서 추출한 후 공백 문자를 제거합니다.

방향을 전환하면 입력은 어떻게 되나요?

방향을 전환할 때 도구는 현재 출력 결과를 새 입력으로 자동으로 설정해 연속 작업을 매끄럽게 처리합니다.

콘텐츠는 서버로 전송되나요?

아니요. 모든 변환은 브라우저에서 로컬로 처리되며 입력과 출력은 모두 기기를 떠나지 않습니다.

용어집

DataURL: RFC 2397에서 정의한 데이터 URI 방식. 형식은 data:[<mime>];base64,<data>. src·href·url() 등의 값으로 바로 사용할 수 있습니다.
MIME 유형: 미디어 유형 식별자. 예: image/png, application/pdf. 본 도구는 11가지 일반적인 MIME 유형을 지원하며 자동 인식도 가능합니다.
매직 바이트: 파일 시작 부분의 고정 바이트로, 파일 형식을 식별합니다. 본 도구는 매직 바이트를 통해 PNG/JPEG/GIF/WEBP/PDF 등을 식별합니다.
Base64: 64개의 출력 가능한 문자로 이진 데이터를 표현하는 인코딩 방식. DataURL의 페이로드는 Base64로 표현됩니다.
Data URI Scheme: RFC 2397에서 정의한 data: URI 프로토콜. DataURL의 정식 명칭입니다.