파일 ↔ Base64 변환 도구 (data URI 지원, 양방향 변환)
이미지·PDF 등 어떤 파일이든 Base64 문자열이나 data URI로 변환하거나, 반대로 Base64 문자열·data URI를 파일로 복원해 다운로드할 수 있는 무료 도구입니다. 모든 변환은 브라우저 안에서 처리되며 파일은 서버로 전송되지 않습니다.
파일↔Base64 변환이란
Base64는 이미지·PDF 등 어떤 형식의 바이너리 데이터든 A~Z, a~z, 0~9, +, / 이렇게 64가지 출력 가능한 문자만으로 표현하는 인코딩 방식입니다. 개발자는 JSON 페이로드나 CSS 스타일시트, HTML처럼 텍스트만 안전하게 다룰 수 있는 곳에 파일 내용을 넣어야 할 때 이 방식을 사용합니다. 인코딩된 문자열 앞에 data:image/png;base64,...처럼 MIME 타입 정보를 붙이면 data URI가 되며, 브라우저는 별도의 파일 요청 없이 이를 곧바로 이미지로 해석할 수 있습니다.
이 도구는 양방향 변환을 모두 지원합니다. 임의의 파일을 Base64 문자열이나 data URI로 변환하거나, 반대로 Base64 문자열이나 data URI를 원본 파일로 복원해 다운로드할 수 있습니다. 모든 변환은 FileReader·Blob API를 사용해 브라우저 안의 JavaScript에서 완결되므로, 파일 내용이 외부 서버로 전송되는 일은 없습니다. 다른 사람의 소스 코드에 등장한 알 수 없는 Base64 데이터를 빠르게 확인하고 싶을 때는 물론, 어디에도 업로드하고 싶지 않은 민감한 파일을 다룰 때도 안심하고 사용할 수 있습니다.
파일↔Base64 변환 사용법
- 변환 방향을 선택합니다 목적에 따라 "파일 → Base64" 또는 "Base64 → 파일" 모드를 선택하세요.
- 파일 또는 Base64 문자열을 입력합니다 파일 → Base64 모드에서는 파일을 드래그하거나 선택하고, Base64 → 파일 모드에서는 Base64 문자열이나 data URI를 붙여넣으세요.
- 자동 변환을 기다립니다 파일을 선택하거나 텍스트를 붙여넣는 즉시 브라우저 안에서 변환이 실행됩니다.
- 감지된 MIME 타입을 확인합니다 (Base64 → 파일) 완전한 data URI 형식이 아니면 MIME 타입 선택란이 표시되므로, 원본 파일 형식에 맞게 선택하세요.
- 결과를 복사하거나 파일을 다운로드합니다 변환된 문자열을 복사하거나 복원된 파일을 다운로드해 작업을 마무리하세요.
더 잘 활용하기 위한 팁
- 파일 → Base64 모드에서는 이미지·PDF·오디오 등 파일 종류에 관계없이 업로드할 수 있으며, data URI 형식과 일반 Base64 문자열을 모두 복사할 수 있습니다.
- Base64 → 파일 모드에서는
data:로 시작하는 완전한 data URI를 붙여넣으면 MIME 타입이 자동으로 감지됩니다. 일반 Base64 문자열만 있는 경우 MIME 타입을 직접 선택하세요. - 모든 변환 처리는 브라우저 안의 JavaScript에서 완결되며, 업로드한 파일이나 Base64 문자열이 서버로 전송되는 일은 전혀 없습니다. 민감한 파일도 안심하고 사용할 수 있습니다.
- CSS나 HTML에 작은 아이콘 이미지를 삽입하고 싶다면 data URI 형식의 출력을 그대로
background-image: url(...)나<img>태그의src에 붙여넣어 사용할 수 있습니다. - Base64 인코딩으로 인해 원본 파일보다 약 33% 크기가 커지므로, 수십 MB 이상의 큰 파일을 변환하면 브라우저 동작이 느려질 수 있습니다.
이런 상황에 활용할 수 있습니다
CSS에 작은 아이콘을 직접 삽입하고 싶을 때
아이콘 이미지를 data URI로 변환해 background-image 속성에 직접 지정하면, 별도의 HTTP 요청 없이 작은 이미지를 표시할 수 있습니다.
JSON 형식의 API 요청에 파일을 담고 싶을 때
이미지나 첨부 파일을 Base64 문자열로 인코딩해, JSON 요청 또는 응답 본문에 일반 문자열 값으로 담아 전송할 때 사용합니다.
소스 코드 속 Base64 데이터의 내용을 확인하고 싶을 때
HTML이나 CSS 소스에 등장한 낯선 Base64 문자열을 붙여넣어 복원함으로써, 실제로 어떤 이미지·파일인지 눈으로 확인할 수 있습니다.
이메일에 이미지를 인라인으로 삽입하고 싶을 때
HTML 이메일 본문에 로고 같은 이미지를 Base64로 인코딩해 삽입할 때, 변환 결과를 그대로 복사해 사용할 수 있습니다.
용어집
- Base64
- 바이너리 데이터를 A~Z, a~z, 0~9, +, / 이렇게 64가지 출력 가능한 ASCII 문자만으로 표현하는 인코딩 방식입니다. 암호화가 아니라, 임의의 바이트를 안전한 텍스트로 표현하기 위한 변환 방식일 뿐입니다.
- data URI
- 파일의 Base64 인코딩 내용을 URL 안에 직접 담는 형식입니다. MIME 타입 정보도 함께 포함하므로 이미지 소스나 CSS 배경으로 바로 사용할 수 있습니다.
- MIME 타입
image/png나application/pdf처럼 "대분류/세부분류" 형식으로 파일 형식을 나타내는 식별자입니다. 브라우저는 이 정보를 보고 파일을 어떻게 처리할지 결정합니다.- 인코딩
- 데이터를 한 표현 형식에서 다른 형식으로 변환하는 과정입니다. Base64 인코딩은 구체적으로 바이너리 데이터를 출력 가능한 텍스트 문자열로 변환합니다.
- 클라이언트 사이드 처리
- 서버로 전송하지 않고 사용자의 브라우저 안에서만 데이터를 처리하는 방식입니다. 이 도구의 모든 변환은 클라이언트 사이드에서 완결되므로 파일이 기기 밖으로 나가지 않습니다.
- 페이로드 크기 증가
- Base64 인코딩으로 인해 데이터 크기가 원본보다 약 33% 커지는 현상입니다. 8비트 단위의 바이너리를 6비트 단위의 문자로 다시 채워 넣는 구조상 피할 수 없는 특성입니다.
자주 묻는 질문
data:image/png;base64,iVBOR...처럼 파일 내용을 Base64로 인코딩한 문자열 형태로 URL 안에 직접 담는 형식입니다. MIME 타입 정보도 함께 포함되어 있어 <img> 태그의 src 속성이나 CSS의 background-image에 그대로 지정해 이미지를 표시할 수 있습니다.data:로 시작하는 완전한 data URI 형식이 아닌 일반 Base64 문자열을 붙여넣으면 MIME 타입 선택란이 표시되므로, 원본 파일 형식(이미지·PDF·텍스트 등)을 직접 선택한 뒤 다운로드하세요.
여담 ― Base64가 파일 크기를 33%나 키우는 이유
Base64 인코딩이 등장한 배경에는 이메일·JSON·URL 등 많은 통신 경로가 "출력 가능한 ASCII 문자만 안전하게 다룰 수 있다"는 제약이 있습니다. 이미지나 실행 파일 같은 임의의 바이너리 데이터를 그대로 보내면 제어 문자가 섞여 손상될 위험이 있기 때문에, A~Z, a~z, 0~9, +, / 이렇게 64가지 출력 가능한 문자만으로 바이너리를 표현하는 Base64 방식이 고안되었습니다.
Base64는 3바이트(24비트)의 바이너리 데이터를 6비트씩 4개로 나누어 4개의 Base64 문자로 변환합니다. 8비트 단위의 바이너리를 6비트 단위의 문자로 다시 채워 넣기 때문에, 원본 데이터보다 약 4/3배, 즉 약 33% 커지는 트레이드오프가 발생합니다. 텍스트로 안전하게 전달할 수 있는 대가로 크기 증가는 피할 수 없습니다.
이 특성을 역으로 활용한 사례가 HTML·CSS 안에 작은 이미지를 data:image/png;base64,... 형태로 그대로 삽입하는 data URI입니다. 추가 HTTP 요청 없이 아이콘 같은 작은 이미지를 표시할 수 있어 페이지 로딩 속도를 높이는 방법으로 널리 쓰입니다. 다만 약 33%의 크기 증가와 브라우저 캐시를 활용할 수 없다는 단점이 있어, 큰 이미지 파일을 삽입하는 데는 적합하지 않습니다.