Base64 이미지 인코딩 방법 - 온라인 변환부터 코드까지 한 번에 정리
이미지를 텍스트로 바꾸는 Base64 인코딩 방법을 온라인 도구, 명령어, 파이썬·자바스크립트 코드 3가지로 나눠 실제 예제와 함께 쉽게 설명합니다.
웹페이지에 작은 아이콘 하나를 넣으려고 이미지 파일을 따로 업로드하고, 경로를 맞추고, 서버에 올리는 과정이 번거로웠던 적 있으신가요. 이메일 서명에 로고를 넣었더니 받는 사람 화면에서 엑스박스로 깨져 보인 경험도 흔합니다. 이런 상황을 깔끔하게 해결하는 방법 중 하나가 Base64 이미지 인코딩입니다.
Base64는 이미지 같은 이진 데이터를 영문자, 숫자, 일부 기호로 이뤄진 텍스트 문자열로 바꿔 주는 인코딩 방식입니다. 변환된 문자열은 HTML, CSS, JSON 어디에든 일반 텍스트처럼 붙여 넣을 수 있습니다. 별도 이미지 파일 없이 코드 안에 그림을 품을 수 있다는 뜻입니다.
Base64 이미지 인코딩이 필요한 순간
모든 이미지를 Base64로 바꾸는 것이 정답은 아닙니다. 다음 같은 상황에서 특히 효과를 봅니다.
- 작은 아이콘이나 로고: 수 KB 정도의 작은 이미지는 별도 파일 요청 없이 코드에 박아 넣으면 서버 요청 수가 줄어듭니다.
- 이메일 HTML: 외부 이미지를 차단하는 메일 환경에서도 본문에 직접 포함된 이미지는 잘 표시됩니다.
- 단일 파일로 배포: HTML 한 장에 이미지까지 담아 전달할 때 편리합니다.
- API 데이터 전송: JSON 본문에 이미지를 텍스트로 실어 주고받을 수 있습니다.
변환의 핵심 원리는 단순합니다. 3바이트(24비트)의 이진 데이터를 6비트씩 4조각으로 나눠, 64개 문자표에 대응시킵니다. 그래서 이름이 Base64입니다. 다만 텍스트로 바뀌는 과정에서 데이터 크기가 원본보다 약 33% 늘어난다는 점은 기억해 둘 필요가 있습니다.
Base64는 압축이 아니라 표현 방식의 변환입니다. 용량을 줄이려는 목적이라면 오히려 역효과이며, 파일 요청을 줄이거나 텍스트 환경에 이미지를 끼워 넣으려는 목적일 때 빛을 발합니다.
온라인 도구로 이미지 인코딩하기
가장 빠른 방법은 웹 변환 도구입니다. 프로그램 설치 없이 브라우저에서 바로 처리할 수 있습니다.
기본 사용 순서
- Base64 이미지 인코딩 사이트에 접속합니다.
- 변환할 이미지 파일을 드래그하거나 선택합니다.
- 생성된 Base64 문자열 또는 데이터 URI를 복사합니다.
대부분의 도구는 data:image/png;base64,iVBORw0KGgo... 형태의 데이터 URI를 함께 만들어 줍니다. 이 문자열을 그대로 HTML img 태그의 src나 CSS background-image에 넣으면 바로 이미지가 표시됩니다.
image/png 부분을 MIME 타입이라고 합니다. JPG 이미지라면 image/jpeg, SVG라면 image/svg+xml로 자동 지정됩니다. 이 값이 실제 파일 형식과 다르면 이미지가 깨지므로 손으로 수정할 때 주의해야 합니다.다만 민감한 이미지를 외부 사이트에 올리는 것이 꺼려진다면, 아래의 명령어나 코드 방식을 쓰는 편이 안전합니다. 변환이 내 컴퓨터 안에서만 끝나기 때문입니다.
명령어로 직접 인코딩하기
운영체제 기본 명령어만으로도 이미지를 Base64로 바꿀 수 있습니다. 외부 사이트에 파일을 올리지 않아 보안 면에서 유리합니다.
| 환경 | 명령어 예시 | 설명 |
|---|---|---|
| macOS / 리눅스 | base64 logo.png > logo.txt | 결과를 텍스트 파일로 저장 |
| macOS / 리눅스 | base64 -i logo.png | 화면에 바로 출력 |
| 윈도우 (PowerShell) | [Convert]::ToBase64String([IO.File]::ReadAllBytes("logo.png")) | 파일을 읽어 문자열 변환 |
| 윈도우 (CMD) | certutil -encode logo.png logo.txt | certutil로 인코딩 |
리눅스나 맥에서 데이터 URI까지 한 번에 만들고 싶다면 다음처럼 접두어를 붙여 줍니다.
echo "data:image/png;base64,$(base64 -i logo.png)"
base64 -w 0 logo.png처럼 -w 0 옵션을 주면 줄바꿈 없는 한 줄짜리 결과가 나와 코드에 붙여 넣기 편합니다.코드로 자동화하기
여러 이미지를 반복 처리하거나 서비스에 인코딩 기능을 넣어야 한다면 코드가 가장 확실합니다.
파이썬
표준 라이브러리 base64 모듈만 있으면 됩니다.
import base64
with open("logo.png", "rb") as f:
encoded = base64.b64encode(f.read()).decode()
print(f"data:image/png;base64,{encoded}")
자바스크립트 (브라우저)
사용자가 업로드한 이미지를 화면에서 바로 변환할 때는 FileReader를 씁니다.
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsDataURL(file);
readAsDataURL은 결과를 데이터 URI 형태로 바로 돌려줍니다. 짧은 문자열을 다룰 때 쓰는 btoa() 함수는 한글이나 이진 데이터에서 오류가 나기 쉬우므로, 이미지에는 FileReader를 쓰는 편이 안정적입니다.
사용 시 주의할 점과 활용 팁
Base64 이미지 인코딩은 만능이 아닙니다. 큰 이미지에 무분별하게 쓰면 오히려 페이지가 무거워집니다.
- 10KB 이하의 작은 이미지에만 쓰는 것을 권장합니다. 큰 사진은 일반 파일로 두는 편이 캐시 활용에 유리합니다.
- 같은 이미지를 여러 페이지에서 쓴다면 파일로 분리해 브라우저 캐시를 활용하는 것이 더 효율적입니다.
- Base64 문자열은 사람이 읽기 어렵게 보일 뿐 암호화가 아닙니다. 누구나 다시 이미지로 복원할 수 있으니 보안 수단으로 착각하면 안 됩니다.
이런 단순 변환 도구는 개발이나 콘텐츠 작업 중에 자주 찾게 됩니다. 작업 시간을 재거나 휴식 간격을 관리할 때는 온라인 스톱워치를, 로그나 데이터에 적힌 유닉스 시간을 사람이 읽는 날짜로 바꿀 때는 타임스탬프 변환기 같은 가벼운 웹 도구를 함께 즐겨찾기에 두면 편리합니다.
정리하면, 한 번만 빠르게 변환할 때는 온라인 도구, 민감한 이미지나 자동화가 필요할 때는 명령어와 코드를 쓰는 것이 합리적입니다. 먼저 자신이 다루는 이미지가 10KB 이하의 작은 파일인지 확인하고, 맞다면 위 방법 중 하나로 데이터 URI를 만들어 코드에 바로 적용해 보시기 바랍니다.
