이미지 Base64를 HTML과 CSS에서 올바르게 사용하는 방법

Base64와 Data URL은 무엇이 다른가

Base64는 바이너리 데이터를 영문자, 숫자, +, / 같은 텍스트 문자로 표현하는 인코딩 방식입니다. 이미지 자체의 포맷을 바꾸는 압축 기술은 아니며, 같은 PNG나 JPEG 바이트를 텍스트로 운반하기 위한 표현에 가깝습니다.

Data URL은 Base64 문자열 앞에 미디어 타입과 인코딩 정보를 붙인 완성된 URL입니다. 브라우저가 이미지를 바로 표시하려면 data:image/png;base64, 같은 접두사가 필요합니다. 순수 Base64만 저장했다면 복원할 때 원본 MIME 타입을 별도로 알아야 합니다.

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

HTML img와 CSS 배경에 넣는 방법

HTML에서는 Data URL 전체를 src 속성에 넣습니다. 접근성을 위해 의미 있는 이미지라면 alt 텍스트를 작성하고, 장식 이미지라면 빈 alt를 사용합니다. CSS에서는 url() 안에 Data URL을 넣을 수 있습니다.

작은 아이콘이나 이메일 템플릿처럼 외부 파일 요청을 줄여야 하는 상황에는 유용하지만, 본문 사진과 큰 배경 이미지는 별도 파일로 제공하는 편이 대체로 관리와 성능에 유리합니다.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="상태 아이콘">

.status-icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

파일 크기와 캐시를 먼저 확인해야 하는 이유

Base64는 3바이트를 4개의 텍스트 문자로 표현하므로 원본 바이너리보다 대략 33% 커집니다. gzip이나 Brotli가 일부를 줄여 줄 수는 있지만, 큰 이미지를 HTML이나 CSS에 포함하면 문서 파싱과 다운로드가 끝날 때까지 함께 묶입니다.

별도 이미지 파일은 브라우저 캐시를 독립적으로 활용하고 필요한 시점에 로드할 수 있습니다. 반면 Data URL은 포함된 HTML이나 CSS가 바뀌면 함께 다시 내려받을 수 있습니다. 반복 사용되는 로고, 사진, 큰 일러스트에는 파일 URL과 CDN을 우선 검토하세요.

• 작고 한 번만 쓰는 아이콘은 Data URL 후보가 될 수 있습니다.
• 여러 화면에서 반복되는 이미지는 독립 파일 캐시가 유리합니다.
• 사용자가 업로드한 큰 이미지는 Base64보다 multipart 업로드나 객체 스토리지가 적합합니다.

API JSON에 이미지를 담을 때의 기준

프로토타입이나 작은 서명 이미지처럼 payload 하나로 전달해야 하는 경우 Base64를 JSON 필드에 넣을 수 있습니다. 이때 dataUrl처럼 접두사까지 포함할지, contentType과 data를 분리할지 API 계약에서 명확히 정해야 합니다.

큰 파일은 요청 본문 크기 제한, 메모리 사용량, 로그 노출 가능성을 함께 고려해야 합니다. 일반적인 업로드 API에서는 multipart/form-data 또는 사전 서명 URL을 사용하고, JSON에는 업로드된 파일 식별자만 전달하는 방식이 더 안정적입니다.

{
  "fileName": "avatar.png",
  "contentType": "image/png",
  "data": "iVBORw0KGgoAAAANSUhEUgAA..."
}

MIME 타입, SVG, 보안 주의점

파일 확장자만 믿지 말고 Data URL의 MIME 타입과 실제 파일 시그니처가 일치하는지 확인해야 합니다. 잘못된 접두사는 미리보기 실패나 잘못된 다운로드 확장자로 이어질 수 있습니다.

SVG는 XML 기반 문서이므로 신뢰할 수 없는 SVG를 HTML에 직접 삽입하지 않는 편이 안전합니다. 사용자 입력을 서버에 저장하거나 다른 사용자에게 제공한다면 허용 형식, 용량, 콘텐츠 검증과 Content Security Policy를 별도로 설계해야 합니다. JSON2Class 변환기는 파일을 서버로 전송하지 않고 현재 브라우저에서만 처리합니다.

실무 선택 체크리스트

Data URL이 적합한지는 요청 수 하나만으로 결정하지 않습니다. 이미지 크기, 반복 사용 여부, 캐시 수명, 변경 빈도, 사용 위치를 함께 비교해야 합니다. 변환 후에는 실제 빌드 결과와 네트워크 패널에서 문서 크기와 로딩 시점을 확인하세요.

• 이미지가 충분히 작고 한 문서에서만 사용되는가
• 독립 캐시와 지연 로딩의 이점이 크지 않은가
• 정확한 MIME 타입을 알고 있는가
• 외부 입력이라면 형식과 용량을 검증했는가
• 큰 이미지라면 파일 URL 방식과 성능을 비교했는가