🔗 이미지 Base64 변환
이미지를 텍스트(Base64)로 바꿔 HTML·CSS에 파일 없이 바로 심을 수 있게 합니다.
사용 방법
- 이미지를 끌어다 놓거나 클릭해서 선택합니다.
- 생성된 data URI 문자열과 원본 대비 용량을 확인합니다.
- 용도에 맞게 순수 Base64, HTML <img> 예시, CSS background 예시 중 하나를 복사합니다.
이럴 때 유용해요
- 이메일 서명이나 단일 HTML 파일에 이미지 파일 없이 로고를 심어야 할 때
- CSS 스프라이트 대신 작은 아이콘을 스타일시트에 인라인으로 넣어 요청 수를 줄일 때
- 이미지 업로드가 막힌 환경(사내 위키, 마크다운 등)에 그림을 문자열로 전달할 때
알아두면 좋은 팁
- Base64는 원본보다 약 33% 커집니다. 수 KB짜리 아이콘·로고에만 쓰고 큰 사진은 일반 파일 참조가 낫습니다.
- data URI는 브라우저 캐시가 별도로 되지 않아 여러 페이지에서 반복 사용하면 오히려 손해일 수 있습니다.
자주 묻는 질문
Base64 인코딩이 뭔가요?
이미지 같은 이진 데이터를 알파벳·숫자 64개 문자만으로 표현하는 방식입니다. 'data:image/png;base64,...' 형태의 문자열이 되어 HTML·CSS·JSON 등 텍스트 문서 안에 이미지를 직접 넣을 수 있습니다.
어느 정도 크기까지 넣는 게 적당한가요?
보통 5~10KB 이하의 아이콘·작은 로고까지가 적정선입니다. 인코딩 후 33% 커지는 데다 HTML 파싱도 느려지므로, 100KB가 넘는 사진은 일반 이미지 파일로 두는 것이 성능에 유리합니다.
인코딩하면 화질이 변하나요?
아니요. Base64는 압축이 아니라 표현 방식만 바꾸는 무손실 인코딩이라 디코딩하면 원본과 비트 단위로 동일합니다. 화질 저하는 전혀 없습니다.
변환한 문자열을 다시 이미지 파일로 되돌릴 수 있나요?
네. 브라우저 주소창에 data URI를 붙여넣으면 이미지가 열리고, 우클릭 저장으로 파일화할 수 있습니다. 개발 시에는 atob() 함수나 fetch(dataUri)로 디코딩합니다.
