사용 방법

Image → Base64를 선택한 다음 이미지 파일을 선택하거나, 반대로 변환하려면 Base64 → Image를 선택하세요.
필요한 출력 형식을 선택하세요. 데이터 URL, 일반 Base64, HTML img 태그, CSS background-image 규칙 또는 Markdown을 선택할 수 있습니다.
결과를 복사해 코드, 이메일 템플릿 또는 JSON에 붙여 넣으세요.
디코딩하려면 데이터 URL이나 일반 Base64를 붙여 넣으세요. 이미지 미리보기를 확인하고 다운로드할 수 있습니다.

작동 방식

Base64는 64개의 출력 가능한 문자로 바이너리 데이터를 나타내므로, 이미지 데이터를 텍스트 형식 안에 직접 넣을 수 있습니다. 데이터 URL은 앞부분에 미디어 유형을 추가합니다. 예를 들어 data:image/png;base64, 뒤에 인코딩된 바이트가 이어집니다. 브라우저에서는 이미지 URL을 사용할 수 있는 곳이면 어디든 데이터 URL을 사용할 수 있습니다. img 태그의 src, CSS의 url(), SVG 이미지 참조 등이 여기에 해당합니다.

인코딩된 텍스트는 원본 파일보다 항상 약 3분의 1 더 큽니다(바이트 3개당 문자 4개). 작은 아이콘이나 자리 표시자 이미지를 인라인으로 넣으면 별도의 네트워크 요청을 줄일 수 있습니다. 하지만 인라인 데이터는 별도로 캐시할 수 없고 이를 포함하는 페이지나 스타일시트를 불러올 때마다 다시 다운로드되므로, 용량이 몇 KB를 넘으면 대개 이점이 없습니다. 많은 이메일 클라이언트가 데이터 URL 이미지를 차단하거나 제거하므로 뉴스레터에 사용하기 전에 테스트하세요.

파일은 바이트 단위로 인코딩됩니다. 재압축되지 않으며 파일 안의 메타데이터(EXIF 등)도 유지됩니다. 디코딩할 때는 전체 데이터 URL, 일반 Base64, URL 안전 Base64, CSS url(…)로 감싼 텍스트를 입력할 수 있습니다. 이미지 유형은 레이블을 그대로 신뢰하지 않고 디코딩된 바이트에서 확인합니다.

예시

스타일시트의 작은 아이콘

600바이트 PNG 아이콘은 800자 Base64 문자열이 됩니다. CSS 출력을 사용하면 별도 파일을 호스팅하지 않고도 클래스에 붙여 넣을 background-image 규칙을 만들 수 있습니다.

API 응답의 이미지

API에서 "iVBORw0KGgoAAAANSUhEUg…"와 같은 JSON 필드가 반환됩니다. Base64 → Image에 붙여 넣으면 이미지를 확인하고 크기를 살펴본 다음 PNG로 다운로드할 수 있습니다.

HTML의 SVG 로고

SVG를 인코딩하면 img 태그에서 사용할 수 있는 data:image/svg+xml;base64 URL이 만들어집니다. SVG는 압축되지 않은 SVG 마크업이 Base64보다 짧은 경우가 많으므로 SVG를 직접 인라인으로 넣는 방법도 고려해 보세요.

자주 묻는 질문

Base64로 변환한 이미지가 더 큰 이유는 무엇인가요?

Base64는 바이트 3개를 텍스트 문자 4개로 저장하므로 데이터 URL 접두사를 제외해도 크기가 약 33% 커집니다. 웹 서버의 Gzip 또는 Brotli 압축으로 차이를 줄일 수는 있지만 없앨 수는 없습니다.

인코딩하면 이미지가 바뀌거나 압축되나요?

아니요. 메타데이터를 포함해 파일의 바이트가 그대로 인코딩됩니다. 문자열을 짧게 만들려면 먼저 이미지를 압축하거나 크기를 조정하세요.

데이터 URL과 일반 Base64는 어떻게 다른가요?

일반 Base64는 인코딩된 바이트일 뿐입니다. 데이터 URL에는 data:image/jpeg;base64,와 같은 접두사가 추가되어 브라우저에 파일 유형을 알려주므로 이미지 소스로 바로 사용할 수 있습니다.

파일 크기 제한이 있나요?

최대 10 MB 파일까지 여기서 인코딩할 수 있습니다. 문자열이 너무 길면 텍스트 입력란과 편집기가 느려질 수 있으며, 이처럼 큰 데이터 URL은 웹사이트에서 실용적이지 않습니다.

개인정보 보호

인코딩과 디코딩은 브라우저에서 처리됩니다. 이미지와 Base64 텍스트는 업로드되거나 저장되지 않으며 분석 데이터에 포함되지 않습니다.