사용 방법
1
방향 고르기'이미지 → Base64' 또는 'Base64 → 이미지'를 골라요.
2
넣기이미지 파일을 넣거나 Base64 문자열을 붙여 넣어요. data URI, CSS url(), <img> 태그째 붙여도 알아서 읽어요.
3
복사·저장필요한 형식으로 복사하거나 이미지 파일로 저장해요.
이럴 때 쓰면 좋아요
- 📧 HTML 이메일·단일 HTML 파일에 작은 아이콘을 넣을 때
- 🎨 CSS에 배경 아이콘을 파일 없이 넣을 때
- 🔍 API 응답·코드 속 Base64 이미지가 무엇인지 볼 때
Base64로 넣으면 좋은 점과 단점
이미지를 Base64 data URI로 넣으면 별도 파일 요청 없이 HTML·CSS 안에 이미지가 들어가요. 작은 아이콘 몇 개라면 요청 수가 줄어 유리해요. 하지만 Base64는 원본보다 약 33% 커지고, 브라우저가 따로 캐시하지 못해 큰 이미지에는 오히려 느려져요. 보통 수 KB 이하 아이콘에만 쓰는 것을 권해요.
형식 예시
| 형식 | 모양 |
|---|---|
| data URI | data:image/png;base64,iVBOR… |
| HTML | <img src="data:image/png;base64,…"> |
| CSS | background-image: url("data:…"); |
글자를 Base64로 바꾸려면 Base64 인코딩·디코딩을 쓰세요.
자주 묻는 질문
SVG도 되나요?
네. SVG는 Base64 대신 URL 인코딩으로 넣으면 더 작아지기도 해요.
형식을 모르는 Base64는요?
앞부분 글자로 JPG·PNG·GIF·WebP를 알아서 판단해요.
큰 사진도 되나요?
되지만 문자열이 매우 길어져요. 100KB 이상이면 파일로 쓰는 것이 좋아요.
서버로 보내지나요?
아니요. 모두 브라우저 안에서 처리돼요.