이미지를 Base64로 바꾸는 이유
Base64는 이미지 같은 바이너리 파일을 영문·숫자로 이루어진 텍스트로 바꾸는 인코딩입니다. 'data:image/png;base64,...' 형태의 Data URI로 만들면 별도 이미지 파일 없이 HTML·CSS·JSON 안에 이미지를 직접 넣을 수 있습니다.
작은 아이콘이나 로고를 Data URI로 넣으면 HTTP 요청 수가 줄고, 이메일 서명이나 단일 HTML 파일처럼 외부 파일을 쓰기 어려운 곳에서도 이미지를 표시할 수 있습니다. 이 도구는 FileReader API로 브라우저 안에서만 변환하므로 사진이 외부로 전송되지 않습니다.
이미지→Base64 사용 방법
- 1'이미지 → Base64'를 선택하고 이미지를 끌어다 놓거나 클릭해 선택합니다.
- 2Data URI, Base64만, HTML <img>, CSS background, Markdown 중 필요한 형식을 고릅니다.
- 3복사 버튼으로 결과를 코드에 붙여넣습니다.
- 4반대로 Base64 문자열을 이미지로 확인하려면 'Base64 → 이미지'에 붙여넣고 다운로드합니다.
이럴 때 유용해요
- CSS·HTML에 작은 아이콘·로딩 이미지를 인라인으로 넣을 때
- API 요청 JSON에 이미지를 문자열로 담아 보낼 때
- 이메일 서명·뉴스레터에 이미지를 직접 삽입할 때
- 로그나 DB에 저장된 Base64 문자열이 어떤 이미지인지 확인할 때
알아두면 좋은 팁
- Base64는 원본보다 용량이 약 33% 커집니다. 10KB 이하의 작은 이미지에만 인라인 삽입을 권장합니다.
- 큰 사진은 먼저 이미지 압축 도구로 용량을 줄인 뒤 변환하세요.