홈 › 이미지 › 이미지 Base64 변환

이미지 Base64 변환

이미지를 Base64 문자열과 Data URI로 바꿔 CSS, HTML에 바로 넣을 수 있는 코드로 만들어요. 반대로 Base64 문자열을 붙여 넣어 이미지로 되돌릴 수도 있어요.

이미지를 끌어다 놓거나 붙여넣기PNG, JPG, GIF, WEBP, SVG, ICO

파일 선택

이미지를 올리면 미리보기가 나와요.

원본-

Base64-

사용 방법

1방향 고르기이미지를 코드로 바꿀지, 코드를 이미지로 되돌릴지 골라요.

2넣기이미지 파일을 올리거나 Base64 문자열을 붙여 넣어요.

3복사·저장필요한 형식(Data URI, CSS, HTML)을 복사하거나 복원한 이미지를 저장해요.

Base64는 이미지 같은 바이너리 파일을 글자로 바꾸는 방식이에요. 작은 아이콘이나 로딩 이미지를 CSS나 HTML 안에 직접 넣으면 별도 파일 요청이 줄어들고, 이메일 서명이나 단일 HTML 파일처럼 이미지를 따로 둘 수 없는 곳에서도 그림을 보여 줄 수 있어요.

이 도구는 이미지를 넣으면 Data URI, 순수 Base64, CSS 배경 코드, HTML img 태그를 한 번에 만들어 줘요. 반대로 API 응답이나 코드 속에 들어 있는 Base64 문자열을 붙여 넣으면 어떤 이미지인지 바로 확인하고 파일로 저장할 수 있어요.

Base64는 원본보다 약 3분의 1 커지고 브라우저 캐시를 따로 쓰지 못해요. 몇 KB 이하의 작은 이미지에만 쓰고 큰 사진은 파일 그대로 쓰는 게 좋아요.

Base64로 바꾸면 용량이 왜 커지나요?

3바이트를 4글자로 표현하는 방식이라 원래보다 약 33% 커져요. 그래서 작은 아이콘에만 쓰는 걸 추천해요.

Data URI와 Base64는 뭐가 다른가요?

Data URI는 "data:image/png;base64," 같은 머리말이 붙은 형태로 브라우저 주소처럼 바로 쓸 수 있어요. Base64만은 머리말 없는 문자열이라 API나 JSON에 넣을 때 써요.

머리말 없는 Base64도 이미지로 되돌릴 수 있나요?

네. 파일 앞부분의 바이트를 보고 PNG, JPG, GIF, WEBP, SVG 등을 자동으로 알아내요.

이미지가 서버로 올라가나요?

아니요. 변환은 모두 브라우저 안에서 이뤄져요.

SVG도 되나요?

네. SVG도 Base64 Data URI로 바꿀 수 있어요.