Base64란 무엇인가요?
Base64는 이미지를 이루는 바이트 같은 이진 데이터를 순수한 텍스트 문자열로 바꾸는 인코딩 방식입니다. 대문자, 소문자, 숫자, +, /까지 서로 다른 64개의 문자만으로 어떤 데이터든 표현한다고 해서 붙은 이름입니다.
실제로는 어떤 이미지 파일이든 아래처럼 긴 텍스트 문자열로 바꿀 수 있다는 뜻입니다.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCC이 형식을 Data URI (또는 data URL)라고 부릅니다. 외부 파일을 가리키는 대신 URL 자체가 텍스트로 인코딩된 이미지 내용을 담고 있습니다. 브라우저는 이 문자열을 읽어 추가 HTTP 요청 없이 곧바로 이미지를 그립니다.
Data URI의 구조
이미지 Data URI는 모두 같은 형태를 따릅니다.
data:[tipo MIME];base64,[dados codificados]각 구성 요소는 다음과 같습니다.
- data: — 스킴을 나타내는 고정 접두사
- [MIME 타입] — 이미지 형식.
image/png,image/jpeg,image/svg+xml,image/gif등 - ;base64, — 내용이 Base64로 인코딩돼 있음을 알림
- [인코딩된 데이터] — 이미지의 이진 내용을 텍스트로 바꾼 긴 문자열
여기서 Base64 인코딩은 데이터 크기를 약 33% 늘린다는 점을 기억해야 합니다. 3KB 이미지는 약 4KB 문자열이 됩니다. 같은 바이트를 표현하는 데 더 많은 문자가 필요해서 생기는 비용입니다.
HTML에서 Base64 쓰는 법
HTML에서 Base64 이미지를 바로 표시하려면 <img> 태그의 src 속성에 Data URI를 넣기만 하면 됩니다.
<img src="data:image/png;base64,iVBORw0KGgo..." alt="아이콘">브라우저는 이 요소를 일반 이미지와 똑같이 다룹니다. CSS를 적용하고 너비와 높이를 지정할 수 있으며, <img> 태그를 쓸 수 있는 곳이라면 어디에나 넣을 수 있습니다.
CSS에서 Base64 쓰는 법
CSS에서는 주로 배경 이미지 속성에 Data URI를 씁니다.
.icone {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}이 방법은 특히 CSS로 색을 동적으로 바꿔야 하는 작은 SVG 아이콘 이나, 라이브러리에서 재사용하는 컴포넌트의 배경 이미지에 자주 쓰입니다.
💡 SVG 팁: SVG 파일은 Base64로 넣을 수도 있고, 인코딩 없이 HTML에 인라인 SVG로 바로 넣을 수도 있습니다. 인라인 SVG가 읽기 쉽고 CSS·자바스크립트로 다루기도 편한 반면, SVG가 외부 CSS 파일 안에 있다면 Base64 쪽이 낫습니다.
Base64를 쓸 때와 피할 때
Base64와 외부 파일 중 무엇을 고를지는 대체로 이미지 크기와 쓰임새로 갈립니다. 아래 표에 흔한 상황을 정리했습니다.
| 상황 | 권장 | 이유 |
|---|---|---|
| 작은 아이콘·스프라이트 (2KB 미만) | ✅ Base64 적합 | 체감될 만한 용량 증가 없이 HTTP 요청을 줄임 |
| CSS에 넣는 파비콘 | ✅ Base64 적합 | 간편하고 외부 파일에 기대지 않음 |
| 플레이스홀더와 로딩 스켈레톤 | ✅ Base64 적합 | HTML과 함께 즉시 표시돼 깜빡임이 없음 |
| HTML 이메일 | ✅ Base64 적합 | 많은 메일 클라이언트가 외부 이미지를 차단함 |
| 본문 이미지 (사진, 배너) | ❌ 피할 것 | HTML이 무거워지고 브라우저 캐시를 못 씀 |
| 5KB가 넘는 이미지 | ❌ 피할 것 | 33% 늘어나는 용량이 로딩을 갉아먹음 |
| 여러 페이지에서 재사용하는 이미지 | ❌ 피할 것 | 외부 파일은 캐시되지만 Base64는 페이지마다 다시 내려받음 |
이미지에 Base64를 쓸 때의 장점
맞는 자리에 쓰면 Base64에는 분명한 이점이 있습니다.
- 추가 HTTP 요청이 없음 — 이미지가 HTML이나 CSS 안에 들어 있어, 첫 화면에 바로 필요한 이미지의 로딩 지연이 줄어듭니다.
- 오프라인과 이메일에서도 표시됨 — 외부 서버에 기대지 않으므로 연결이 없어도(오프라인 앱) 또는 외부 콘텐츠를 막는 메일 클라이언트에서도 이미지가 보입니다.
- 완전한 이식성 — Base64 이미지를 담은 HTML 파일 하나만 주고받거나 보관해도 이미지가 깨지지 않습니다.
- 한 번에 함께 로딩 — HTML 요소가 그려지는 순간 이미지도 함께 나타나 지연이 없습니다. 인터페이스 아이콘이 잠깐 깜빡이는 현상을 막기에 좋습니다.
단점과 한계
Base64에는 신중히 따져 볼 비용도 따라옵니다.
- 용량이 33% 커짐 — 텍스트로 바꾸면 전송 데이터가 반드시 늘어납니다. 큰 이미지에서는 아무 이득 없이 수 킬로바이트만 더 나갑니다.
- 브라우저 캐시를 못 씀 — 외부 파일 이미지는 브라우저가 캐시해 두고 여러 페이지에서 재사용합니다. HTML에 박힌 Base64는 문서에 묶여 있어 방문할 때마다 다시 내려받습니다.
- 유지 보수가 번거로움 — 이미지를 바꾸려면 파일을 다시 변환해 긴 문자열을 HTML이나 CSS에 새로 붙여 넣어야 합니다. 손이 많이 가고 실수도 나기 쉽습니다.
- 코드 가독성이 떨어짐 — 긴 Base64 문자열이 CSS나 HTML에 들어가면 파일을 읽고 검토하기가 어려워집니다.
- gzip 압축 효율이 낮음 — gzip과 Brotli는 반복이 많은 텍스트를 잘 압축하지만, Base64 문자열은 엔트로피가 높아 압축 이득이 크지 않습니다. 이진 이미지 파일과는 다른 점입니다.
⚠️ 실무 기준: Base64는 2KB 미만 이미지에만 쓰세요. 그 밖의 경우에는 최적화한 외부 파일, 특히 WebP나 AVIF 형식이 사이트 성능에 가장 유리합니다.
Base64와 사이트 성능(PageSpeed)
Base64가 성능에 미치는 영향은 무엇을 인코딩하느냐로 갈립니다. 작은 아이콘이라면 HTTP 요청이 하나 사라지면서 체감 Time to First Byte 가 좋아지고 필요한 병렬 연결 수도 줄어듭니다. 이는 Core Web Vitals 지표, 특히 페이지의 주요 요소가 내장 아이콘일 때 LCP(Largest Contentful Paint)에 긍정적으로 반영될 수 있습니다.
반대로 큰 이미지를 Base64로 넣으면 HTML 문서 자체가 무거워져 렌더링 시작이 늦어집니다. 구글 PageSpeed Insights도 지나치게 무거운 HTML에는 점수를 깎는 편입니다. 사진과 배너는 언제나 최적화한 외부 파일이 정답입니다.
웹용 이미지를 최적화해야 한다면 우선 압축하고 가장 효율적인 형식으로 바꾸는 것이 시작입니다. ImageTools의 압축 도구가 파일을 어떤 서버로도 보내지 않고 브라우저 안에서 바로 처리해 줍니다.
이미지를 Base64로 변환하는 방법
이미지에서 Base64 문자열을 얻는 방법은 여러 가지입니다.
- 온라인 도구 — 가끔 쓸 때 가장 빠른 방법입니다. ImageTools의 이미지를 Base64로도구는 어떤 이미지든 브라우저에서 변환해 바로 복사할 수 있는 코드로 만들어 줍니다.
- 터미널 (리눅스/macOS) —
base64 image.png명령으로 인코딩된 문자열이 나옵니다. 전체 Data URI를 만들려면 이렇게 씁니다.echo "data:image/png;base64,$(base64 -w 0 image.png)". - 브라우저의 자바스크립트 —
FileReaderAPI를 쓰면 사용자가 고른 파일을 비동기 방식으로 Base64로 바꿀 수 있습니다. - Webpack과 번들러 — Webpack, Vite, Rollup에는 빌드 과정에서 설정한 용량 기준 이하의 작은 파일을 자동으로 인라인 Base64로 바꿔 주는 플러그인이 있습니다.
지금 이미지를 Base64로 변환하기
이미지를 올리면 HTML이나 CSS에 바로 넣을 수 있는 완성된 Data URI가 나옵니다. 처리는 전부 브라우저 안에서 이루어집니다.
Base64 도구 열기 →자주 묻는 질문
이미지의 Base64란 무엇인가요?
Base64는 이미지 같은 이진 데이터를 ASCII 텍스트로 바꾸는 방식입니다. 이미지 파일을 따로 불러오는 대신 내용을 긴 문자열로 변환해 HTML이나 CSS에 직접 넣고, 그렇게 Data URI가 만들어집니다.
이미지를 Base64로 바꾸면 사이트 성능이 나빠지나요?
쓰기 나름입니다. 아이콘, 파비콘, 플레이스홀더처럼 작은 이미지라면 HTTP 요청이 하나 줄어 오히려 빨라집니다. 큰 이미지는 페이지를 무겁게 만들고 브라우저 캐시도 못 쓰게 해서 성능이 떨어집니다.
Base64는 몇 KB까지 쓰는 것이 좋나요?
2KB 미만 이미지에만 쓰는 것이 실무 기준입니다. 그보다 크면 인코딩으로 늘어나는 용량(약 33%)과 캐시를 못 쓰는 손해 때문에 외부 파일이 더 효율적입니다.
Base64는 모든 브라우저에서 동작하나요?
동작합니다. Base64를 쓴 Data URI 형식은 크롬, 파이어폭스, 사파리, 엣지와 각 모바일 버전을 포함해 요즘 브라우저라면 모두 지원합니다. IE6처럼 아주 오래된 브라우저는 지원하지 않지만 지금은 신경 쓸 일이 아닙니다.
온라인으로 이미지를 Base64로 변환하려면 어떻게 하나요?
ImageTools의 이미지를 Base64로 도구를 쓰시면 됩니다. 이미지를 올리기만 하면 Base64 문자열과 HTML·CSS에 바로 붙여 넣을 Data URI 코드가 자동으로 만들어집니다.