이미지 Base64 변환 — 이미지를 데이터 URI·CSS로 바꾸기
이미지를 Base64·데이터 URI·CSS·HTML 코드로 바꾸고 Base64를 이미지로 복원하는 브라우저 도구
브라우저에서 처리 · 서버로 전송되지 않음
Base64로 바꿀 이미지를 여기로 끌어다 놓으세요
이미지 한 장, 5MB까지 올릴 수 있어요. Base64는 원본보다 커지기 때문에 작은 아이콘이나 로고에 알맞아요. 이미지는 브라우저 밖으로 나가지 않아요.
이미지 Base64 변환이란?
이미지 파일의 바이트를 알파벳, 숫자, 몇 가지 기호만으로 이루어진 글자로 바꿔 주는 도구예요. 이렇게 만든 글자는 data:image/png;base64,... 모양의 데이터 URI로 HTML이나 CSS 안에 직접 넣을 수 있어요. 변환은 브라우저 안에서만 이루어지고, 결과를 이미지로 되돌리는 반대 방향도 한 화면에서 쓸 수 있어요.
사용법
- 이미지 → Base64를 고르고 이미지를 끌어다 놓거나 선택해요. 한 장, 5MB까지예요.
- 미리보기 아래에서 원본 크기, Base64 글자 크기, 늘어난 비율과 크기 안내를 확인해요.
- 쓰려는 형태의 칸 데이터 URI, Base64 문자열만, CSS background-image, HTML img 태그 중 하나에서 복사를 눌러요. 길어서 화면에는 앞부분만 보여도 복사는 전체가 돼요. 텍스트 파일로 받을 수도 있어요.
- 반대로 하려면 Base64 → 이미지를 고르고 Base64나 데이터 URI를 붙여 넣어요. 미리보기와 이미지 받기 버튼이 나타나요.
변환 기준
- 인코딩: 표준 Base64(RFC 4648)로 3바이트를 4글자로, 모자라면
=를 붙여 길이를 4의 배수로 맞춰요. 문자열이 아니라 파일의 바이트를 직접 변환해서 어떤 이미지든 그대로 복원돼요. - MIME 형식: 파일 맨 앞 바이트를 보고 JPG, PNG, GIF, WebP, SVG 등을 판별해
data:뒤에 넣어요. 확장자가 틀려도 실제 형식을 따라요. - HTML 태그: 이미지 크기를 읽을 수 있으면 width와 height도 함께 넣어요.
- 크기 안내: 원본 10KB 이하는 인라인에 알맞다고, 50KB를 넘으면 신중히, 500KB를 넘으면 파일로 올려서 링크하라고 알려 줘요.
- 되돌리기: URL 안전 Base64(
-,_)와=가 빠진 문자열도 읽어요. 데이터 URI의 형식 표시가 실제 이미지와 다르면 실제 형식으로 고치고 알려 줘요.;base64가 없는 데이터 URI는 읽지 않아요.
예시
| 항목 | 값 |
|---|---|
| 원본 | 2.1KB 아이콘 |
| Base64 글자 | 약 2.8KB (+33%) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
자주 묻는 질문
이미지가 서버에 올라가나요?
아니요. 파일을 읽어서 Base64 글자로 바꾸는 일이 모두 브라우저 안에서 이루어져요. 결과 텍스트도 어디에도 저장되지 않아요.
Base64로 바꾸면 왜 용량이 커지나요?
Base64는 3바이트를 4글자로 표현하는 방식이라 글자 수가 원본 바이트의 약 4/3, 즉 33% 정도 늘어나요. 여기에 HTML이나 CSS 안에 들어가면 브라우저가 이미지를 따로 캐시하지 못해서 페이지를 열 때마다 같이 내려받아야 해요.
어느 정도 크기까지 Base64로 넣어도 되나요?
정해진 기준은 없지만 흔히 10KB 안팎의 작은 아이콘, 로고, 로딩 스피너에 쓰고 50KB가 넘으면 일반 이미지 파일로 두라고 권해요. 이 도구는 10KB 이하, 50KB 이하, 500KB 이하, 그 이상으로 나눠서 안내해요. 큰 이미지는 업로드해서 링크하는 편이 페이지가 가벼워요.
데이터 URI는 어디에 쓰나요?
HTML의 img src, CSS의 background-image url(), 이메일 서명, 마크다운 문서, 단일 HTML 파일에 이미지를 함께 넣고 싶을 때 써요. 별도 이미지 파일이 없어도 되지만 일부 이메일 프로그램은 데이터 URI 이미지를 차단하기도 해요.
Base64를 이미지로 되돌릴 때 형식이 틀렸다고 나와요.
앞에 data:image/png;base64, 가 붙어 있어도 없어도 읽어요. 공백이나 줄바꿈이 섞여 있어도 되고 CSS나 HTML 코드를 통째로 붙여 넣어도 안에서 데이터 URI를 찾아요. 그래도 안 되면 글자가 잘렸거나 중간에 다른 문자가 섞인 것이에요. 이미지가 아닌 데이터는 읽지 않아요.
5MB가 넘는 이미지는요?
Base64 글자가 수 MB가 되면 브라우저가 느려지고 텍스트 칸에 붙이기도 어려워서 한 장 5MB까지만 받아요. 더 큰 이미지는 먼저 이미지 용량 줄이기나 크기 조절로 작게 만든 뒤 변환하세요.
