이미지 → Base64

이미지 → Base64

이미지 파일

초기화

값을 입력한 뒤 계산하기를 눌러주세요.

파일은 브라우저에서만 읽고 서버로 업로드되지 않습니다.

핵심 개념

이미지 → Base64는 로컬 파일을 data:image/png;base64,... 같은 data URL로 바꾸는 작업입니다. 작은 파비콘·아이콘을 HTML에 인라인하거나, JSON·마크다운 초안에 썸네일을 넣을 때 씁니다. Base64는 원본보다 약 33% 길어지고, 큰 사진은 HTML 용량과 파싱 비용이 급증합니다. 파일만 고르면 바로 변환되며 별도 실행 버튼은 없습니다. 미리보기와 문자열이 함께 채워집니다.

읽기는 FileReader.readAsDataURL만 사용하고 업로드 API를 호출하지 않습니다. MIME이 image/가 아니면 안내만 나고 문자열이 비어 있습니다. 복사 버튼은 클립보드 API를 쓰고, 권한이 없으면 결과 칸을 직접 선택하면 됩니다. 민감한 스크린샷도 이 탭을 떠나지 않습니다. 인라인은 캐시·CDN 없이 페이지에 그림이 박히므로, 반복되는 큰 사진은 파일 URL이 더 낫습니다.

예시

작은 PNG 아이콘을 선택하면 미리보기가 뜨고 텍스트가 data:image/png;base64,로 시작합니다. 복사를 누른 뒤 <img src="…">에 붙이면 외부 파일 없이 그림이 보입니다. JPEG를 고르면 MIME이 jpeg로 바뀌고, 안내 줄의 추정 KB는 문자열 길이로 가늠한 값이므로 디스크 파일 크기와 조금 다를 수 있습니다. 같은 파일을 다시 고르면 내용이 갱신되니 다른 아이콘을 시험할 때 초기화 후 선택하세요. 추정 KB가 크면 HTML 인라인 대신 정적 파일 URL을 먼저 쓰는 편이 낫습니다.