Base64 이미지란
Base64는 이진 데이터를 텍스트로 인코딩하는 방식입니다. 이미지를 Base64로 변환하면 긴 텍스트 문자열이 되어 HTML/CSS에 직접 삽입할 수 있으며, 별도의 이미지 파일이 필요 없습니다. 이런 방식을 "인라인 이미지"라고 합니다.
Base64 이미지를 언제 사용하나요
인라인이 적합한 경우
- 작은 아이콘: 몇 KB짜리 작은 아이콘을 인라인하면 HTTP 요청을 줄여 로딩이 빨라집니다
- 이메일 템플릿: 이메일 클라이언트는 외부 이미지 제한이 많아 인라인이 더 안정적입니다
- 단일 파일 전달: HTML 보고서, 데모를 하나의 파일로 패키징하고 싶을 때
- 데이터 URI: CSS 배경 이미지, SVG 참조
인라인이 부적합한 경우
- 큰 이미지: Base64 인코딩 후 크기가 원본보다 33% 커지며, 큰 이미지는 인라인이 오히려 더 느립니다
- 캐시가 필요한 이미지: 인라인 이미지는 브라우저에서 개별 캐시할 수 없어 HTML을 로드할 때마다 다시 다운로드합니다
- 빈번하게 재사용되는 이미지: 여러 페이지에서 공유하는 이미지는 외부 파일 + 캐시가 더 효율적입니다
변환 방법
DocsAll 이미지를 Base64로 변환 도구로 원클릭 변환:
- 이미지를 Base64로 변환 열기
- 이미지 업로드
- Base64 문자열과 Data URL 자동 생성
- 복사해서 사용
반대로 Base64에서 이미지를 복원하려면 Base64를 이미지로 변환 도구를 사용하세요.
사용 방법
변환된 Data URL 형식은 data:image/png;base64,iVBORw0KGgo... 같은 긴 문자열입니다.
- HTML에 넣기: img 태그의 src 속성에 직접 작성
- CSS에 넣기: background-image의 url() 안에 작성
장단점 비교
| 항목 | 외부 이미지 파일 | Base64 인라인 |
|---|---|---|
| HTTP 요청 | 이미지마다 한 번 | 추가 요청 없음 |
| 크기 | 원본 크기 | 33% 더 큼 |
| 캐시 | 개별 캐시 가능 | HTML과 함께 캐시 |
| 적용 | 큰 이미지, 재사용 이미지 | 작은 아이콘, 단일 파일 |
권장 사항
아이콘류 작은 이미지(4KB 미만)는 인라인, 사진 큰 이미지는 외부 파일을 사용하세요. 이미지 압축으로 먼저 용량을 줄인 후 인라인 여부를 결정하면 가장 효과적입니다. 더 많은 Base64 지식은 Base64 인코딩 디코딩 가이드를 읽어보세요.