Base64 이미지 디코더 | 온라인에서 이미지 디코딩 및 미리보기

base64 이미지 디코더란?

base64 이미지 디코더는 base64로 인코딩된 텍스트 문자열을 다시 이미지로 변환하는 도구입니다. Base64는 이미지 파일의 바이트와 같은 이진 데이터를 64개의 일반 텍스트 문자(문자, 숫자, 패딩에 사용되는 +, /, =)만으로 표현하는 방식입니다. 브라우저, 이메일, 여러 API는 이미지가 별도 파일이 아니라 일반 텍스트 안에서 전송되도록 이런 방식으로 이미지를 저장합니다. 디코더는 이 과정을 되돌립니다. 문자열을 붙여 넣으면 원본 이미지가 나타납니다.

데이터 URL 형식

웹에서 base64 이미지는 보통 데이터 URL로 작성됩니다. 형식은 다음과 같습니다.

예:

각 부분에는 역할이 있습니다.

• data:는 일반 웹 주소가 아니라 데이터 URL임을 나타냅니다.
• image/png는 MIME 유형으로, 브라우저에 파일의 종류를 알려 줍니다.
• ;base64는 쉼표 뒤의 데이터가 base64로 인코딩되었음을 나타냅니다.
• 쉼표 뒤의 모든 내용이 인코딩된 이미지 자체입니다.

디코더의 작동 방식

디코딩은 네 단계로 진행됩니다.

1. 도구는 문자열이 data:로 시작하는지 확인합니다. data:text/plain처럼 이미지가 아닌 미디어 유형을 지정하는 데이터 URL은 이미지로 표시할 수 없으므로 즉시 거부됩니다.
2. 긴 base64 문자열은 여러 줄로 나뉘어 작성되기도 하므로 공백, 탭, 줄 바꿈을 제거합니다. RFC 2397에서 허용하는 방식처럼 base64 대신 퍼센트 인코딩을 사용하는 페이로드는 변경하지 않고 그대로 전달합니다.
3. base64 텍스트를 다시 원시 바이트로 디코딩합니다.
4. 결과의 처음 몇 바이트를 확인합니다. 일반적인 이미지 형식은 모두 시그니처 또는 "매직 넘버"라고 하는 고정된 바이트 시퀀스로 시작합니다. PNG 파일은 89 50 4E 47로 시작하고 JPEG 파일은 FF D8 FF로 시작하는 식입니다. 디코더는 이러한 시그니처를 대조하여 시그니처가 식별하는 유형으로 이미지에 표시를 붙입니다.

레이블보다 바이트를 우선합니다. 데이터 URL이 data:image/png라고 지정되어 있어도 바이트가 FF D8 FF로 시작하면 디코더는 URL을 data:image/jpeg로 다시 구성합니다. 따라서 "이미지 URL 복사" 버튼이 제공하는 문자열이 자신의 내용을 잘못 설명하는 일이 없습니다.

문자열에 data: 접두사가 없으면 디코더는 이를 원시 base64 데이터로 처리하고 디코딩한 뒤 같은 방식으로 시그니처를 읽습니다. 바이트가 알려진 이미지 시그니처와 일치하지 않고 SVG 텍스트처럼 보이지도 않으면 문자열이 이미지가 아닌 것 같다고 보고합니다. 형식을 추측하거나 기본 유형으로 대체하지 않습니다.

SVG는 이진 형식이 아니라 텍스트 형식(XML)이므로 고정된 바이트 시그니처가 없어 다르게 처리됩니다. 디코더는 디코딩된 텍스트의 처음 1024바이트에서 <svg 태그, 그 뒤에 해당 태그가 나오는 <?xml version="1.0"?>와 같은 XML 선언, 또는 그 뒤에 해당 태그가 나오는 SVG 문서 유형 선언을 확인합니다. 일부 편집기가 UTF-8 파일에 추가하는 파일 맨 앞의 바이트 순서 표시는 무시합니다. SVG는 바이트 시그니처로 식별할 수 없으므로 image/svg+xml을 선언한 데이터 URL은 선언된 유형을 그대로 유지합니다.

Base64 이미지 크기 공식

Base64는 이진 데이터 3바이트마다 텍스트 문자 4개로 변환합니다. 인코딩된 길이의 공식은 다음과 같습니다.

⌈ ⌉ 기호는 "다음 정수로 올림"을 뜻합니다. base64는 항상 4문자 단위로 처리하고, 남은 그룹은 = 기호로 패딩하기 때문입니다.

큰 파일에서는 대략 33% 크기 증가가 발생합니다. 4 ÷ 3 ≈ 1.33이기 때문입니다. 작은 파일은 처음부터 데이터가 많지 않을 때 다음 4문자 그룹으로 올림하는 효과가 더 커서 증가율이 더 높게 나타날 수 있습니다.

풀이 예시

위의 PNG 예는 이미지 데이터 85바이트로 디코딩됩니다. 공식을 사용하면 다음과 같습니다.

base64 문자열의 길이는 실제로 116자이며, 이는 계산 결과와 일치합니다. 원래 85바이트보다 36% 증가한 것입니다(116 ÷ 85 ≈ 1.36). 파일이 매우 작기 때문에 33%라는 수치보다 약간 높습니다.

지원되는 이미지 형식

디코더는 디코딩된 데이터의 바이트 시그니처를 읽어 형식을 식별합니다. 다음 유형을 인식합니다.

base64 이미지 디코딩 방법

1. HTML, CSS, API 응답 또는 이메일에서 data:image/... 접두사가 있거나 없는 base64 문자열을 복사합니다.
2. 입력 상자에 붙여 넣습니다.
3. 입력을 멈춘 직후 이미지가 자동으로 디코딩되거나 디코딩 버튼을 누르면 디코딩됩니다.
4. 디코딩된 이미지는 미리 보기 영역에 나타납니다. "이미지 URL 복사" 버튼으로 데이터 URL을 복사할 수 있으며, 브라우저에서 일반 이미지 요소로 렌더링되므로 미리 보기에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 저장을 선택하면 이미지 자체를 저장할 수 있습니다.

base64 이미지의 일반적인 용도

• HTML, CSS 또는 JavaScript에 삽입: 이미지 데이터를 코드에 직접 넣으면 별도의 파일 요청이 필요하지 않습니다.
• 이메일 템플릿: 일부 이메일 클라이언트는 외부로 연결된 이미지를 기본적으로 차단하지만, 삽입된 base64 이미지는 계속 표시됩니다.
• 단일 파일 HTML 도구: 이미지가 포함된 전체 페이지를 하나의 독립 실행형 파일로 제공할 수 있습니다.
• API 응답: 이미지 전용 엔드포인트가 없어도 JSON 페이로드 안에서 이미지를 전송할 수 있습니다.
• CSS 배경 및 아이콘: 작은 아이콘은 데이터 URL로 스타일시트에 직접 작성되기도 합니다.

base64 이미지의 장단점

Base64 인코딩은 편리하지만 비용이 따릅니다.

• 인코딩된 텍스트는 원본 파일보다 대략 3분의 1 더 큽니다.
• 브라우저는 삽입된 이미지를 링크된 파일과 같은 방식으로 캐시할 수 없으므로, 이미지가 포함된 페이지나 스타일시트가 로드될 때마다 다시 다운로드합니다.
• 브라우저는 이미지를 표시하기 전에 base64 텍스트를 디코딩해야 하므로 소량의 추가 처리가 필요합니다.
• 크기가 증가하고 캐싱을 사용할 수 없으므로 base64 삽입은 아이콘이나 단순한 로고 같은 작은 이미지에 적합합니다. 큰 사진은 일반 이미지 파일로 제공하는 편이 보통 더 낫습니다.

자주 묻는 질문

base64 이미지 디코더란?

PNG, JPEG, GIF, WebP, BMP 또는 SVG 파일과 같은 base64 인코딩 텍스트 문자열을 다시 볼 수 있는 이미지로 변환하는 도구입니다.

base64 이미지는 어떻게 디코딩하나요?

data:image/... 접두사가 있거나 없는 base64 문자열을 디코더에 붙여 넣습니다. 디코더가 문자열을 읽고 디코딩하여 결과 이미지를 표시합니다.

데이터 URL 접두사 없이도 base64 문자열을 디코딩할 수 있나요?

예. 디코더는 이를 원시 base64 데이터로 처리하고 바이트를 디코딩한 뒤 처음 몇 바이트를 읽어 PNG, JPEG, GIF, WebP, BMP 또는 ICO와 같은 시그니처에서 형식을 식별합니다. SVG는 디코딩된 텍스트에서 <svg 태그를 찾아 식별합니다. 어느 것도 일치하지 않으면 형식을 추측하는 대신 문자열이 이미지가 아닌 것 같다고 보고합니다.

base64 이미지가 디코딩되지 않는 이유는 무엇인가요?

대부분의 경우는 세 가지 원인으로 설명됩니다. 문자열에 표준 base64 문자 집합에 없는 문자가 포함되었을 수 있습니다. 표준 문자 집합은 A–Z, a–z, 0–9, +, / 및 =입니다. 일부 웹 토큰에서 사용하는 base64url 변형은 대신 -와 _를 사용하므로 허용되지 않습니다. 문자열이 중간에서 잘려 길이가 4의 배수보다 1 큰 값이 되었을 수도 있는데, 유효한 base64 문자열의 길이는 절대 이렇지 않습니다. 또는 바이트가 지원되는 이미지 형식 중 하나가 아닐 수도 있습니다. = 패딩만 빠진 것은 문제가 되지 않으며, 디코딩 전에 공백과 줄 바꿈은 제거됩니다.

base64 인코딩은 보안이나 암호화의 한 형태인가요?

아닙니다. Base64는 바이트를 텍스트로 표현하는 방법일 뿐이며 아무것도 숨기지 않습니다. 누구나 무료 도구로 몇 초 안에 base64 문자열을 디코딩할 수 있으므로, 개인 이미지나 기타 데이터를 보호하는 데 사용해서는 안 됩니다.

base64 문자열은 원본 이미지보다 얼마나 더 큰가요?

큰 파일에서는 약 3분의 1 더 큽니다. 원본 데이터 3바이트마다 텍스트 문자 4개가 되기 때문입니다. 100KB 이미지가 인코딩되면 대략 133KB가 됩니다. 작은 이미지는 반올림 때문에 증가율이 다소 더 높게 나타날 수 있습니다.

역사

Base64는 일반 텍스트만 처리하는 메일 시스템을 통해 이진 데이터를 전송하기 위해 1970년대와 1980년대에 개발된 인코딩 방식에서 발전했으며, RFC 989(1987)와 이후 RFC 1421에서 이메일용으로 공식화되었습니다. 웹 페이지에 이미지를 삽입하는 데 사용된 것은 RFC 2397(1998)에서 data: URL 체계를 정의한 뒤부터 가능해졌고, 별도의 HTTP 요청을 줄이려는 개발자가 늘면서, 특히 느린 모바일 연결에서 2000년대 중반에 더 널리 사용되었습니다.

참고 문헌

1. RFC 4648: Base16, Base32 및 Base64 데이터 인코딩
2. RFC 2397: "data" URL 체계
3. MDN Web Docs: 데이터 URL
4. WHATWG MIME 스니핑 표준