·2분 읽기
Base64로 이미지 임베딩하기 — HTML에 이미지 직접 넣는 법
이미지 파일 없이 HTML에 바로 이미지를 넣고 싶으셨죠? Base64 인코딩으로 이미지를 텍스트로 변환해서 코드에 삽입하는 방법이에요.
🔤
Base64 인코더/디코더 바로 사용하기
텍스트를 Base64로 인코딩하거나 디코딩하세요
→
Base64 이미지 임베딩이 뭐예요?
보통 HTML에서 이미지를 넣으려면 img 태그에 파일 경로를 써야 하잖아요?
그런데 Base64를 쓰면 이미지 자체를 텍스트로 변환해서 HTML 코드 안에 직접 넣을 수 있어요.
이런 식이에요: data:image/png;base64,iVBORw0KGgo...
이 긴 텍스트가 이미지 전체 데이터예요. 별도 파일 없이 HTML 하나로 이미지가 표시되거든요.
이메일 템플릿이나 단일 HTML 파일을 만들 때 정말 유용하더라고요.
언제 Base64 이미지를 써야 할까?
모든 이미지를 Base64로 바꾸면 안 돼요. 적합한 상황이 따로 있거든요:
쓰면 좋은 경우:
- 아이콘, 로고 같은 작은 이미지 (5KB 이하)
- 이메일 HTML 템플릿 (외부 이미지가 차단될 수 있어요)
- CSS background-image에 작은 패턴 넣을 때
- 단일 HTML 파일로 배포해야 할 때
쓰면 안 좋은 경우:
- 사진처럼 큰 이미지 (Base64로 바꾸면 33% 더 커져요)
- 같은 이미지를 여러 페이지에서 쓸 때 (캐싱이 안 돼요)
핵심은 '작은 이미지, 독립적인 파일'일 때 쓰는 거예요.
Toolkio로 이미지를 Base64로 변환하기
변환 방법은 간단해요:
1. Toolkio의 Base64 도구로 이동
2. 인코딩 모드 선택
3. 이미지 텍스트나 바이너리 데이터 입력
4. 변환 결과를 복사
실제로 쓸 때는 이렇게 넣으면 돼요:
img 태그의 src에 data:image/png;base64, 뒤에 변환된 텍스트를 붙이면 끝이에요.
CSS에서도 background-image: url(data:image/png;base64,...) 이렇게 쓸 수 있어요.
Base64 이미지 사용 시 주의사항
실전에서 알아둬야 할 것들이에요:
- 파일 크기가 33% 늘어나요. 10KB 이미지가 약 13.3KB가 돼요
- HTML 파일 자체가 커져서 첫 로딩이 느려질 수 있어요
- 브라우저 캐싱이 안 돼요. 매번 HTML과 함께 다운로드돼요
- 이미지 수정하면 Base64 코드도 다시 만들어야 해요
그래서 5KB 이하의 작은 이미지만 Base64로 쓰는 게 좋아요. 그 이상은 일반 이미지 파일이 낫더라고요.
지금 프로젝트에서 아이콘 파일이 있다면 Toolkio에서 변환해보세요.