·2분 읽기
Base64 이미지 변환 — 이미지를 텍스트로 인코딩하는 방법
이미지를 Base64로 변환하는 방법과 활용 사례를 정리했어요. 웹 개발에서 이미지를 텍스트로 임베딩하는 실전 가이드.
🔤
Base64 인코더/디코더 바로 사용하기
텍스트를 Base64로 인코딩하거나 디코딩하세요
→
Base64 이미지 변환이란?
이미지 파일(PNG, JPEG 등)을 긴 텍스트 문자열로 바꾸는 거예요. 변환된 텍스트는 이렇게 생겼어요:
data:image/png;base64,iVBORw0KGgo...
이 텍스트를 HTML이나 CSS에 직접 넣으면 별도 이미지 파일 없이 이미지를 표시할 수 있어요.
파일을 서버에 올리지 않아도 되니까 간단한 아이콘이나 작은 이미지를 임베딩할 때 유용해요.
Base64 이미지 변환 방법
Toolkio [Base64 변환기](/tools/base64)에서 바로 변환할 수 있어요.
1. Base64 인코딩 모드 선택
2. 이미지 파일을 텍스트로 변환
3. 결과 문자열 복사
또는 개발자라면 코드로도 가능해요:
JavaScript: btoa() 또는 FileReader.readAsDataURL()
Python: base64.b64encode()
CLI: base64 -i input.png
주의할 점은 Base64로 변환하면 원본보다 파일 크기가 약 33% 커진다는 거예요. 큰 이미지는 일반 파일 링크가 낫고, 1-2KB 이하의 작은 아이콘에만 쓰는 게 좋아요.
실전 활용 사례
Base64 이미지가 유용한 상황이에요:
1. 이메일 HTML 템플릿: 외부 이미지 차단되는 환경에서도 표시
2. CSS background-image: 작은 패턴이나 아이콘 인라인 삽입
3. API 요청/응답: JSON에 이미지 데이터 포함
4. 단일 HTML 파일: 외부 리소스 없이 완결된 문서
CSS 예시:
background-image: url('data:image/png;base64,iVBORw...');
[색상 코드 변환](/blog/color-code-converter-rgb-hex-guide)과 함께 CSS 작업할 때 자주 쓰이는 기법이에요.
주의사항과 대안
Base64 이미지의 단점도 알아두세요:
- 원본 대비 33% 크기 증가
- 브라우저 캐싱이 안 됨 (매번 다운로드)
- 큰 이미지에 사용하면 HTML 파일이 무거워짐
- 유지보수가 어려움 (이미지 수정 시 다시 인코딩)
대안:
- 10KB 이상 이미지: 일반 파일 링크 사용
- 아이콘: SVG 인라인 (크기 효율적)
- 반복 사용 이미지: CDN + 캐싱
결론적으로 Base64는 작은 이미지의 HTTP 요청을 줄이는 최적화 기법이에요. 무분별하게 쓰면 오히려 성능이 나빠지니 용도에 맞게 사용하세요.