이미지
이미지 Base64 변환
이미지를 Base64 문자열로 변환하거나, Base64를 붙여넣어 이미지로 미리봅니다.
파일은 서버로 업로드되지 않습니다
모든 처리는 브라우저 안에서만 진행됩니다.
이미지를 드래그하거나 클릭해 선택
PNG · JPG · GIF · WebP · SVG
Base64 결과
사용 방법
- 이미지 → Base64: 이미지를 드래그하거나 클릭해 업로드합니다. 변환된 Base64 문자열이 오른쪽에 즉시 표시됩니다.
- 출력 형식을 선택합니다. data URI 포함은 HTML
<img src="...">또는 CSSurl(…)에 바로 사용할 수 있는 형식입니다. - 복사 버튼으로 결과를 클립보드에 복사합니다.
- Base64 → 이미지 탭에서 Base64 문자열을 붙여넣으면 이미지를 바로 미리볼 수 있습니다.
이미지 Base64 변환 자세히 알아보기
이미지 Base64 변환기는 PNG·JPG·WebP·SVG 같은 이미지 파일을 텍스트 문자열인 Base64로 인코딩하거나, 반대로 Base64 문자열을 다시 이미지로 미리보고 다운로드하는 양방향 도구입니다. data URI 포함 옵션을 켜면 HTML <img src=...> 또는 CSS background:url(...)에 바로 붙여 쓸 수 있는 형식으로 출력합니다. 작은 아이콘을 외부 요청 없이 인라인으로 박거나, 이메일 HTML에 이미지를 임베드할 때 자주 쓰입니다.
더 알아보기접기
내부적으로 FileReader API의 readAsDataURL로 인코딩하기 때문에 정확하고 빠르며, 모든 처리는 브라우저에서만 이뤄져 이미지가 외부 서버로 전송되지 않습니다. 단, Base64는 원본보다 약 33% 더 커지므로 큰 이미지에는 적합하지 않습니다.
이럴 때 사용하세요
- •작은 아이콘·로고를 HTML/CSS에 인라인으로 임베드해 외부 요청을 줄일 때
- •이메일 HTML 본문에 이미지를 첨부 없이 직접 박아 넣어야 할 때
- •JSON·YAML 설정 파일에 이미지 데이터를 포함해야 할 때
- •받은 Base64 문자열이 어떤 이미지인지 빠르게 확인하고 싶을 때
- •테스트용 더미 이미지를 코드 안에 직접 넣어 의존성을 없애고 싶을 때
이미지 Base64 변환 자주 묻는 질문
data URI 포함 옵션은 무엇을 추가하나요?
"data:image/png;base64," 같은 prefix를 결과 앞에 붙여줍니다. 이 형태는 <img>의 src나 CSS의 url()에 바로 넣을 수 있는 완전한 형식입니다.
Base64로 만들면 파일 크기가 늘어나나요?
네. Base64는 3바이트를 4문자로 표현하므로 약 33% 커집니다. 큰 이미지에 사용하면 페이지 로딩이 오히려 느려질 수 있어 작은 아이콘에만 권장합니다.
어떤 이미지 포맷을 지원하나요?
브라우저가 인식하는 모든 이미지 포맷(PNG, JPG, WebP, GIF, SVG, ICO, BMP 등)을 지원합니다. 출력은 원본 MIME 타입을 그대로 유지합니다.
Base64 문자열이 깨졌는데 복원할 수 있나요?
Base64는 한 글자만 깨져도 디코딩에 실패할 수 있습니다. 줄바꿈·공백·data: prefix 누락이 원인일 수 있으니 형식을 다시 확인하세요.
큰 이미지를 처리할 수 있나요?
기술적으로는 가능하지만 브라우저 메모리에 따라 다르며, 인코딩 결과가 매우 길어져 클립보드 복사가 느려질 수 있습니다. 1MB 이내 이미지를 권장합니다.