이미지 ↔ Base64
이미지를 Base64 데이터 URI로 변환하거나 복원
파일이 서버로 전송되지 않아요 · 브라우저에서만 처리
Base64·data URI란?
Base64는 이미지 같은 바이너리 데이터를 영문자·숫자·기호로만 이루어진 텍스트로 표현하는 인코딩 방식입니다. 이렇게 만든 문자열 앞에 data:image/png;base64, 같은 접두어를 붙이면 data URI가 되어, 이미지 파일 없이도 HTML·CSS 안에 이미지를 직접 담을 수 있습니다.
사용 방법
① 이미지 → Base64: 이미지를 선택하거나 끌어다 놓으면 자동으로 Base64 결과가 만들어집니다. data: 접두어 포함 여부와 스니펫 형태(원본 텍스트·<img>·CSS background)를 선택할 수 있습니다.
② Base64 → 이미지: Base64 문자열이나 data URI를 붙여넣으면 미리보기가 표시되고, 이미지를 다운로드할 수 있습니다.
용량 증가 안내
Base64로 인코딩하면 원본 바이너리보다 약 33% 정도 용량이 커집니다. 텍스트로 다루기 편해지는 대신 크기가 늘어난다는 점을 고려해 사용하세요.
참고: 큰 이미지를 Base64로 인라인 삽입하면 HTML·CSS 파일 자체가 무거워질 수 있으니 아이콘 등 작은 이미지에 주로 사용하세요.
개인정보 · 안전성
인코딩·디코딩·미리보기·다운로드까지 전 과정이 브라우저 안에서만 이루어지며, 파일은 서버로 전송되거나 저장되지 않습니다.
자주 묻는 질문
Base64란 무엇인가요?
Base64는 바이너리 데이터를 텍스트(영문자·숫자·기호)로 표현하는 인코딩 방식입니다. 이미지 같은 파일도 텍스트 문자열로 바꿀 수 있어 HTML·CSS·JSON 등 텍스트 기반 형식 안에 그대로 담을 수 있습니다.
data URI는 어디에 쓰이나요?
data:image/png;base64,... 형태의 data URI는 별도 이미지 파일 없이 HTML의 img 태그나 CSS의 background 속성에 이미지를 직접 인라인으로 삽입할 때 사용됩니다. 작은 아이콘이나 요청 수를 줄이고 싶을 때 유용합니다.
Base64로 변환하면 용량이 늘어나나요?
네. Base64 인코딩은 원본 바이너리보다 약 33% 정도 용량이 커집니다. 텍스트로 다루기 편해지는 대신 파일 자체보다 크기가 늘어난다는 점을 고려해 사용하세요.
업로드한 이미지가 서버로 전송되나요?
아니요. 이미지 인코딩·디코딩·미리보기·다운로드까지 전 과정이 브라우저 안에서만 이루어지며 파일이 서버로 전송되거나 저장되지 않습니다.
광고