이미지 파일과 Base64(Data URI)를 상호 변환
간단한 3단계로 변환:
이미지 파일을 드래그 앤 드롭하거나 클릭하여 선택
지원 형식: PNG, JPEG, GIF, WebP, SVG (최대 10MB 권장)
이미지의 Base64 인코딩은 웹 개발에서 다음과 같은 경우에 활용됩니다:
작은 아이콘이나 로고 이미지를 HTML의 <img> 태그나 CSS의 background-image에 직접 임베드하면 HTTP 요청을 줄이고 페이지 로딩 속도를 향상시킵니다. 특히 아이콘 폰트의 대체로 유용합니다.
여러 작은 이미지를 하나의 파일로 묶는 「CSS 스프라이트」 대신 각 이미지를 Base64로 인코딩하여 CSS에 임베드하면 관리가 간편합니다.
메일 클라이언트에 따라 외부 이미지 로딩이 차단되는 경우가 있으므로, 중요한 이미지(로고 등)를 Data URI로 임베드하면 확실하게 표시할 수 있습니다.
JSON API로 이미지 데이터를 송수신할 때 Base64로 인코딩하면 바이너리 데이터를 텍스트 형식으로 처리할 수 있습니다. 멀티파트 통신을 사용하지 않고도 간단한 JSON 형식으로 이미지를 전송할 수 있습니다.
Progressive Web Apps (PWA)나 Electron 앱에서 이미지를 Base64로 인코딩하여 HTML에 임베드하면 오프라인 환경에서도 확실하게 이미지를 표시할 수 있습니다.
React Native, Ionic, Flutter 등의 크로스 플랫폼 프레임워크에서 Base64로 인코딩된 이미지를 사용하면 플랫폼 간 이미지 처리를 통일할 수 있습니다.
Data URI(데이터 URI, Data URL이라고도 함)는 URL 스킴의 일종으로, 이미지나 폰트 등의 작은 파일을 HTML이나 CSS에 직접 임베드하기 위한 구조입니다. 파일 내용을 Base64로 인코딩하여 텍스트화하고 URL의 일부로 표현합니다.
Data URI는 다음과 같은 형식으로 작성됩니다:
data:[MIME타입];[인코딩 방식],[인코딩된 데이터] 예(PNG의 경우): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
PNG, JPEG, GIF, WebP, SVG 등 브라우저가 지원하는 모든 이미지 형식을 변환할 수 있습니다. 가장 일반적인 것은 PNG와 JPEG입니다.
기술적으로는 제한이 없지만, 성능과 브라우저 메모리를 고려하여 10MB 이하를 권장합니다. 실용적으로는 5KB 이하의 작은 이미지 사용이 가장 효과적입니다.
Base64 인코딩으로 원본 파일 크기의 약 133%(약 33% 증가)가 됩니다. 예를 들어, 9KB 이미지는 약 12KB의 Base64 문자열이 됩니다.
네, 투명 PNG 이미지도 그대로 변환할 수 있습니다. 투명 정보도 유지되므로 HTML이나 CSS에 임베드해도 올바르게 투명 표시됩니다.
<img> 태그의 src 속성에 직접 붙여넣습니다. 예: <img src="data:image/png;base64,iVBORw0KG...">
background-image: url('data:image/png;base64,iVBORw0KG...');와 같이 url() 함수 내에 붙여넣습니다.
아니요, 모든 처리는 브라우저에서 완료됩니다. 이미지 데이터가 서버로 전송되는 일은 전혀 없습니다.
네, 이 도구는 완전 무료이며, 상업적·비상업적 용도 모두 자유롭게 이용할 수 있습니다.
Encode image data in Base64
Convert image file formats
Encode and decode Base64