이미지를 Base64로 변환하는 방법 (CSS와 HTML용)

이미지를 별도 파일이나 추가 네트워크 요청 없이 CSS나 HTML에 직접 넣는 가장 빠른 방법은 Base64 data URI로 변환하는 것입니다. Image to Base64 도구에 파일을 넣으면 스타일시트나 <img> 태그에 그대로 붙여넣을 수 있는 문자열을 만들어 줍니다.

data URI의 모습

data URI는 이미지 전체를 하나의 텍스트 문자열에 담습니다:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

세 부분으로 이루어집니다: data: 스킴, MIME 타입(image/png, image/jpeg, image/svg+xml), 그리고 쉼표 뒤의 Base64로 인코딩된 바이트입니다. 브라우저는 이 텍스트를 다시 픽셀로 디코딩합니다 — 이미지 자체가 곧 문자열이므로 HTTP 요청이 필요 없습니다. (Base64는 암호화가 아니라 인코딩이라서 누구나 디코딩할 수 있습니다. 이 구분이 왜 중요한지는 Base64는 암호화인가요?에서 다룹니다.)

변환해서 사용하기

1. Image to Base64 도구를 열고 이미지를 업로드합니다.
2. 생성된 data:... 문자열을 복사합니다.
3. URL이 들어갈 자리에 붙여넣습니다:

/* CSS */
.icon { background-image: url("data:image/png;base64,iVBOR..."); }

<!-- HTML -->
<img src="data:image/png;base64,iVBOR..." alt="logo">

변환은 브라우저 안에서 이루어지므로 이미지가 업로드되지 않습니다. SVG의 경우 SVG to Base64 도구가 마크업을 깔끔하게 처리하며, 반대로 어떤 문자열이든 Base64 to Image로 다시 파일로 되돌릴 수 있습니다.

인라인이 실제로 도움이 되는 경우

인라인은 작고 고정된 자산에서 빛을 발합니다: 1~2 KB짜리 아이콘, 작은 배경 텍스처, 화면 상단에 쓰이는 스프라이트 같은 것들입니다. 이런 자산을 CSS에 접어 넣으면 왕복 요청 하나가 사라져 초기 렌더링 경로의 지연을 줄일 수 있습니다. 원본이 JPG이거나 특이한 포맷이라면 먼저 Image to PNG로 깔끔한 PNG로 변환한 뒤 인코딩하세요.

이미지를 인라인하면 안 되는 경우

Base64는 사람들이 생각하는 것보다 훨씬 자주 잘못된 선택입니다:

• 큰 이미지. Base64는 데이터를 약 33% 부풀립니다. 그래서 400 KB짜리 사진이 참조하는 모든 페이지마다 약 530 KB의 텍스트로 박혀 — 가벼워지는 게 아니라 무거워집니다.
• 캐시되거나 재사용되는 자산. 일반 이미지 파일은 한 번 내려받아 여러 페이지에서 캐시되지만, 인라인된 이미지는 따로 캐시될 수 없어 매번 HTML과 함께 다시 내려받습니다.
• 자주 바뀌는 자산. 인라인된 이미지를 수정하려면 HTML이나 CSS를 수정하고 다시 배포해야 합니다.
• alt, 지연 로딩, CDN 전송이 필요한 콘텐츠 이미지. 이런 것들은 실제 파일로 두세요.

경험칙: 아주 작은 아이콘 몇 개만 인라인하고, 나머지는 요청 절감이 용량 증가를 확실히 넘어설 때만 Image to Base64로 처리하되 그 외에는 일반 파일로 연결하세요.