이미지 파일을 Base64 문자열로 변환하세요
외부 파일 없이 이미지 삽입
스타일시트에 이미지 포함
JSON으로 이미지 데이터 전송
인라인 이미지로 이메일 작성
Base64는 이진(binary) 데이터를 ASCII 텍스트로 변환하는 인코딩 방식입니다. 64개의 안전한 문자(A-Z, a-z, 0-9, +, /)를 사용하여 이미지, 오디오 등 모든 이진 데이터를 텍스트로 표현할 수 있습니다. 이를 통해 텍스트만 지원하는 환경에서도 이진 데이터를 안전하게 전달할 수 있습니다.
이미지를 Base64로 변환하면 별도의 파일 없이 HTML, CSS, JSON 등 텍스트 기반 형식에 이미지를 직접 포함시킬 수 있습니다. 소규모 아이콘이나 로고처럼 자주 사용되는 작은 이미지의 경우, Base64로 내장하면 추가 HTTP 요청을 줄여 페이지 로딩 속도를 개선할 수 있습니다.
네, Base64로 인코딩하면 원본 파일보다 약 33% 크기가 증가합니다. 이는 3바이트의 이진 데이터를 4개의 문자로 표현하는 Base64의 특성 때문입니다. 따라서 대용량 이미지를 Base64로 변환하면 매우 긴 문자열이 생성되므로, 소규모 이미지에 적합한 방식입니다.
HTML의 img 태그 src 속성, CSS의 background-image 속성, JavaScript의 Canvas API, 이메일 HTML의 인라인 이미지 등 다양한 곳에 활용할 수 있습니다. 또한 REST API로 이미지 데이터를 JSON 형식으로 전송하거나, 외부 파일 참조 없이 독립적인 HTML 파일을 만들 때도 유용합니다.
Base64는 이진 데이터를 텍스트 형식으로 안전하게 전달하기 위해 고안된 인코딩 방식입니다. 이름에서 알 수 있듯이 64개의 문자를 사용하며, 이진 데이터를 6비트씩 나누어 각각을 하나의 문자로 표현합니다. 원본 데이터 3바이트(24비트)가 4개의 Base64 문자로 변환되므로 데이터 크기가 약 4/3배로 늘어납니다. 이미지 파일은 이진 데이터이기 때문에, 이를 Base64로 변환하면 텍스트 기반 시스템에서도 완벽하게 처리할 수 있습니다.
CSS에서는 background-image: url('data:image/png;base64,...') 형태로 이미지를 스타일시트에 직접 포함시킬 수 있습니다. 이메일 HTML에서는 외부 서버 차단 문제를 피하기 위해 이미지를 Base64로 인라인 삽입하는 방법이 널리 사용됩니다. Data URI 형식(data:[미디어타입];base64,[데이터])은 이미지뿐만 아니라 SVG, 폰트 등 다양한 리소스를 인라인으로 삽입할 때 활용됩니다.
장점으로는 외부 파일 없이 독립적인 단일 파일을 구성할 수 있고, HTTP 요청 수를 줄여 소규모 이미지의 로딩을 최적화할 수 있으며, 텍스트만 지원하는 환경에서도 이미지 데이터를 안전하게 전송할 수 있습니다. 단점으로는 데이터 크기가 약 33% 증가하고, 브라우저 캐싱이 적용되지 않아 대용량 이미지에는 오히려 성능이 저하될 수 있습니다. 일반적으로 1~2KB 이하의 작은 이미지에 Base64 사용을 권장합니다.