사용법
- 이미지 → Base64: 이미지를 선택하면 data URI 문자열이 만들어집니다. 복사해 코드에 붙여넣습니다.
- Base64 → 이미지: data URI나 Base64 문자열을 붙여넣으면 미리보기가 뜨고 이미지로 저장할 수 있습니다.
- 탭으로 두 방향을 오갈 수 있습니다.
활용 팁
- 작은 이미지에만: 16~64px 아이콘이나 로고처럼 작은 이미지에 쓰면 외부 파일 요청을 줄일 수 있습니다. 큰 사진은 코드가 길어져 비효율적입니다.
- CSS에 바로: 'CSS background 복사'를 누르면 background-image 구문이 함께 복사되어 스타일시트에 즉시 붙여넣을 수 있습니다.
- SVG도 가능: 단순한 SVG 아이콘도 Base64로 만들어 두면 단일 HTML 파일 안에서 외부 의존 없이 표시할 수 있습니다.
자주 묻는 질문
Q. 이미지를 Base64로 만들면 어디에 쓰나요?
Base64 data URI는 이미지를 별도 파일 없이 코드 안에 글자로 직접 넣을 수 있게 해 줍니다. CSS의 background-image나 HTML의 img src에 그대로 붙이면 외부 파일 요청 없이 작은 아이콘·로고를 표시할 수 있어, 요청 수를 줄이거나 단일 파일로 배포할 때 유용합니다.
Q. 변환하면 파일 크기가 커지나요?
네. Base64로 인코딩하면 원본보다 약 33% 정도 용량이 커집니다. 그래서 작은 아이콘이나 로고에는 적합하지만, 큰 사진을 Base64로 넣으면 코드가 지나치게 길어지고 느려질 수 있습니다. 큰 이미지는 일반 파일로 두는 편이 좋습니다.
Q. 이미지나 입력한 문자열이 서버로 전송되나요?
아니요. 인코딩과 디코딩 모두 사용자의 브라우저 안에서 이뤄지며, 이미지나 Base64 문자열은 서버로 전송되거나 저장되지 않습니다. 민감한 이미지도 안심하고 변환할 수 있습니다.