Base64 이미지 인코딩 방법 총정리 - 변환 원리부터 HTML 적용, 실무 주의사항까지
이미지를 텍스트로 바꾸는 Base64 인코딩의 원리와 4가지 변환 방법을 정리했습니다. 온라인 변환기, 자바스크립트, 터미널 명령어 사용법부터 용량 33% 증가 같은 함정까지 한번에 확인해 보세요.
웹 페이지를 만들다 보면 작은 아이콘 몇 개 때문에 서버 요청이 늘어나거나, 파일 첨부가 불가능한 환경에서 이미지를 넣어야 하는 상황이 생깁니다. 이럴 때 가장 널리 쓰이는 해결책이 이미지를 텍스트 문자열로 바꾸는 것입니다. Base64 이미지 인코딩 방법은 원리만 이해하면 5분 안에 적용할 수 있고, 별도 프로그램을 설치할 필요도 없습니다.
Base64 인코딩이란 무엇인가
Base64는 이미지나 파일 같은 이진(바이너리) 데이터를 알파벳 대소문자 52자, 숫자 10자, 기호 2자(+, /)로 이루어진 총 64개의 문자만으로 표현하는 변환 규칙입니다. 문자열 끝에 종종 붙는 = 기호는 길이를 맞추기 위한 패딩입니다.
변환 원리는 단순합니다. 원본 데이터를 3바이트씩 잘라 4개의 문자로 바꿉니다. 정해진 규칙에 따라 표현 방식만 바꾼다는 점에서, 문자를 점과 선의 조합으로 바꾸는 모스 부호 변환기를 떠올리면 이해가 쉽습니다. 정보 자체는 그대로 두고 표기법만 바꾸는 것입니다.
Base64는 압축이 아니라 변환입니다. 3바이트가 4문자가 되므로 용량은 오히려 약 33% 늘어납니다. 이 사실 하나만 기억해도 언제 쓰고 언제 쓰지 말아야 할지 판단할 수 있습니다.
Base64 이미지 인코딩 방법 4가지
1. 온라인 변환 사이트
가장 빠른 방법입니다. 검색창에 base64 image encoder를 검색해 나오는 변환 사이트에 이미지를 올리면 즉시 문자열이 생성됩니다. 다만 사내 문서나 개인정보가 담긴 이미지는 외부 서버에 업로드하지 않는 것이 안전합니다.
2. 자바스크립트 FileReader
웹 서비스에 기능으로 넣을 때는 브라우저 내장 API인 FileReader를 사용합니다. 파일이 서버로 전송되지 않고 브라우저 안에서 처리되므로 보안 면에서도 유리합니다.
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsDataURL(file);3. 터미널 명령어
개발자라면 명령어 한 줄이 가장 빠릅니다. 운영체제별 명령어는 다음과 같습니다.
- macOS: base64 -i logo.png -o result.txt
- 리눅스: base64 logo.png > result.txt
- 윈도우: certutil -encode logo.png result.txt
4. 크롬 개발자 도구
이미 웹에 올라간 이미지라면 크롬 개발자 도구의 Network 탭에서 해당 이미지 요청을 찾아 미리보기 화면에서 우클릭하면 데이터 URI로 복사하는 메뉴를 사용할 수 있습니다. 파일을 따로 내려받을 필요가 없어 편리합니다.
| 방법 | 난이도 | 추천 상황 |
|---|---|---|
| 온라인 변환기 | 매우 쉬움 | 일회성 변환, 민감하지 않은 이미지 |
| 자바스크립트 | 보통 | 웹 서비스 기능으로 구현할 때 |
| 터미널 명령어 | 쉬움 | 개발 작업 중 빠른 변환 |
| 개발자 도구 | 쉬움 | 이미 배포된 이미지 재활용 |
HTML과 CSS에 적용하는 방법
인코딩된 문자열은 데이터 URI 형식으로 감싸야 브라우저가 이미지로 인식합니다. data:이미지타입;base64,문자열 순서로 작성합니다.
<img src="data:image/png;base64,iVBORw0KGgo..." alt="로고">
.icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }적용한 뒤에는 실제와 비슷한 조건에서 확인하는 것이 좋습니다. 레이아웃 점검용 더미 텍스트가 필요하다면 Lorem Ipsum 생성기로 본문을 채워 넣고, 인코딩한 이미지가 텍스트와 함께 정상적으로 렌더링되는지 확인하면 됩니다.
장점과 단점 한눈에 보기
Base64 인코딩은 만능이 아닙니다. 장단점을 정확히 알고 써야 성능 손해를 피할 수 있습니다.
- 장점 1: HTTP 요청 수가 줄어들어 작은 아이콘을 여러 개 쓸 때 유리합니다.
- 장점 2: HTML, CSS, JSON 같은 텍스트 파일 하나에 이미지를 포함할 수 있습니다.
- 장점 3: 파일 첨부가 막힌 환경에서도 이미지 전달이 가능합니다.
- 단점 1: 용량이 원본보다 약 33% 커집니다.
- 단점 2: 브라우저가 이미지를 별도로 캐싱하지 못해 문서를 불러올 때마다 함께 전송됩니다.
- 단점 3: 문자열이 수천 자 이상으로 길어져 코드 가독성이 떨어지고 수정이 번거롭습니다.
실무 활용 기준과 주의사항
실무에서는 대략 다음 기준으로 판단하면 실패가 없습니다. 몇 KB 수준의 작은 아이콘, 로고, 반복 사용되는 장식 이미지는 인코딩해서 CSS에 넣는 것이 효율적입니다. 반면 수백 KB가 넘는 사진은 일반 이미지 파일로 두고 브라우저 캐싱과 지연 로딩을 활용하는 편이 훨씬 빠릅니다.
이메일 템플릿에 쓸 때는 특히 주의가 필요합니다. 아웃룩을 비롯한 일부 메일 클라이언트는 Base64로 삽입한 이미지를 표시하지 않는 경우가 있으므로, 발송 전에 주요 클라이언트에서 반드시 테스트해야 합니다.
정리하면 두 가지만 실행해 보시면 됩니다. 먼저 지금 작업 중인 페이지에서 5KB 이하 아이콘 하나를 골라 터미널 명령어나 온라인 변환기로 인코딩해 CSS에 적용해 보세요. 그리고 적용 전후의 네트워크 요청 수와 로딩 속도를 개발자 도구로 비교해 보면, 어떤 이미지에 Base64를 쓰는 것이 맞는지 확실하게 감이 잡힙니다.
