이미지 Base64 변환, 인코딩과 디코딩
이미지를 HTML이나 CSS에 바로 넣을 Base64 글로 바꾸거나, 받은 Base64 글을 다시 이미지로 보려면 어떻게 하나요?
한 줄 답
이미지를 넣으면 data URI·CSS·HTML 태그 모양의 Base64 글로 바꿔 주고, Base64 글을 붙여 넣으면 이미지로 되돌려 보여 줘요. 이미지와 글은 이 브라우저 안에서만 다루고 어디에도 보내지 않아요.
이미지 → Base64
여기에 사진 한 장을 끌어다 놓아요
캡처한 화면은 Ctrl+V(맥은 ⌘+V)로 바로 붙여 넣어도 돼요.
사진은 이 브라우저 안에서만 다루고 어디로도 올리지 않아요. 탭을 닫으면 사라져요.
100KB가 넘는 이미지는 Base64로 넣으면 페이지가 그만큼 무거워져요. 작은 아이콘·로고에 쓰는 편이 좋아요.
Base64 → 이미지
넣은 글과 파일은 이 브라우저 안에서만 처리합니다. 이 사이트의 서버로 올라가지 않고, 어디에도 저장되지 않습니다.
주의
- Base64로 바꾸면 글자 수가 원본 파일 크기의 약 4/3배가 됩니다. 큰 사진을 페이지에 넣으면 그만큼 페이지가 무거워지니 작은 아이콘·로고에 씁니다.
이미지를 Base64로 바꾸기
이미지를 끌어다 놓거나 「사진 선택」으로 고릅니다. 캡처한 화면은 Ctrl+V(맥은 ⌘+V)로 바로 붙여 넣어도 됩니다. 결과 칸에 Base64 글이 나오고, 「복사하기」로 복사하거나 .txt 파일로 내려받습니다.
붙일 모양은 넷 중에서 고릅니다.
- data URI:
data:image/png;base64,…모양입니다. img 태그의 src나 CSS의 url() 안에 넣습니다. - Base64 글자만: 머리 없이 Base64 부분만 나옵니다.
- CSS background-image:
background-image: url("…");한 줄로 나옵니다. - HTML img 태그:
<img src="…" alt="">한 줄로 나옵니다. alt에는 이미지를 설명하는 말을 채워 넣습니다.
결과 위에 원본 파일 크기와 Base64로 바꾼 뒤의 크기가 나옵니다. Base64는 3바이트를 4글자로 적는 방식이라 글자 수가 원본의 약 4/3배가 됩니다.
Base64를 이미지로 되돌리기
아래 「Base64 글」 칸에 글을 붙여 넣으면 바로 이미지로 풀어 보여 줍니다. data: 머리가 있어도 없어도 되고, 중간의 줄바꿈이나 앞뒤 따옴표, CSS의 url()도 알아서 걷어 냅니다. 형식은 앞머리가 아니라 풀어낸 파일의 내용을 보고 정하므로, 머리가 잘못 적힌 글도 제 형식으로 나옵니다. 「이미지 내려받기」로 파일로 저장합니다.
설정은 주소에 남습니다
붙일 모양은 주소의 # 뒤에 붙습니다. 이미지와 붙여 넣은 글은 주소에 붙지 않습니다.
자주 묻는 것
- data URI와 Base64 글자만은 무엇이 다른가요?
- data URI는 Base64 글 앞에 「data:image/png;base64,」처럼 형식을 적은 머리가 붙은 모양이라 img 태그의 src나 CSS의 url()에 그대로 넣습니다. 글자만은 머리 없이 Base64 부분만이라, 머리를 따로 붙이는 프로그램이나 API에 넣을 때 씁니다.
- 바꾸면 화질이 떨어지나요?
- 떨어지지 않습니다. 파일을 다시 그리지 않고 파일의 내용을 그대로 글자로 적는 것이라, 되돌리면 원본과 똑같은 파일이 나옵니다.
- 붙여 넣은 글이 이미지로 안 보여요.
- 복사할 때 앞이나 뒤가 잘리면 풀리지 않습니다. 줄바꿈이나 따옴표는 알아서 걷어 내니, 글 전체를 빠짐없이 붙여 넣었는지 확인합니다.
출처
본문의 숫자와 조건은 아래 출처에서 가져왔습니다. 직접 잰 값은 따로 표시합니다.
- 1RFC 4648: The Base16, Base32, and Base64 Data Encodings
입력 3바이트(24비트)를 4글자로 적는다는 §4 — 결과가 원본의 4/3배가 되는 까닭