이미지 Base64 변환

이미지 Base64 변환 사용법

이미지 파일을 Base64라는 글자 묶음으로 바꾸거나, 반대로 Base64 글자를 이미지 파일로 되돌리는 도구입니다. Base64는 이미지 같은 이진 데이터를 영문 대소문자, 숫자, 기호 두 개(+와 /)만으로 옮겨 적는 방법입니다. 글자만 넣을 수 있는 자리에 이미지를 끼워 넣어야 할 때 씁니다. 작은 아이콘을 CSS 파일 안에 넣을 때, 메일 서식(HTML)에 로고를 박아 넣을 때, 이미지를 JSON에 담아 API로 보낼 때가 그런 경우입니다.

이미지를 Base64로 바꾸기

1. 이미지 → Base64 탭에서 이미지를 끌어다 놓거나 칸을 눌러 고릅니다. 여러 개를 한 번에 넣어도 됩니다.
2. 파일마다 형식, 가로세로, 원본 용량, Base64 글자 수가 나옵니다.
3. 보여 줄 형식을 고르면 상자 안의 글자가 그 형식으로 바뀝니다.
4. 파일마다 있는 복사 버튼 네 개 가운데 필요한 것을 누릅니다. 보여 줄 형식과 상관없이 누른 버튼의 형식으로 복사됩니다.
5. 여러 개를 한꺼번에 가져가려면 전체 복사, TXT 한 파일로 저장, JSON으로 저장, 파일마다 TXT로 나눠 ZIP을 씁니다.

네 가지 형식

CSS 배경 형식의 클래스 이름은 파일 이름에서 확장자를 떼고, 영문과 숫자, 밑줄, 붙임표가 아닌 글자를 붙임표로 바꿔 만듭니다. 한글만으로 된 파일 이름은 "image"가 되니 붙여 넣은 뒤 이름을 고쳐 쓰세요.

용량은 약 33% 늘어납니다

Base64는 원본 3바이트를 글자 4개로 적습니다. 그래서 글자 수는 원본 바이트 수의 3분의 4, 곧 약 1.33배가 됩니다. 원본이 3의 배수가 아니면 끝에 등호(=)를 한두 개 붙여 길이를 맞춥니다. 예시 이미지 넣기로 들어가는 아이콘 두 개를 바꿔 보면 원본 합계 2.8KB가 Base64로는 3.8KB가 되어 목록 위에 "약 33% 늘어남"으로 표시됩니다.

늘어난 만큼 문서도 무거워지고, 문서 안에 박힌 이미지는 브라우저가 따로 저장해 두지 못해 페이지를 열 때마다 다시 읽습니다. 그래서 Base64로 넣는 것은 몇 KB 이하의 아이콘이나 작은 무늬에 알맞습니다. 100KB가 넘는 이미지를 넣으면 이 도구가 주의 문구를 보여 줍니다. 큰 사진은 먼저 크기와 용량을 줄이거나 파일 그대로 올리는 편이 낫습니다.

Base64를 이미지로 되돌리기

1. Base64 → 이미지 탭의 칸에 글자를 붙여 넣습니다. 머리말이 붙은 Data URL이든 글자만이든 상관없습니다. 글 파일 열기로 txt, css, html, json 파일을 불러와도 됩니다.
2. 이미지로 바꾸기를 누르면 찾아낸 이미지마다 미리보기, 형식, 가로세로, 용량이 나옵니다.
3. 저장을 누르거나 여러 개면 전체를 ZIP으로 받기를 누릅니다.

붙여 넣은 글 안에 Data URL이 여러 개 있으면 전부 찾아냅니다. HTML 소스나 CSS 파일을 통째로 붙여 넣어도 그 안의 data:…;base64, 부분만 골라내므로, 문서에 박혀 있는 이미지를 꺼낼 때 편합니다. 예시 넣기를 누르면 img 태그 하나와 CSS 한 줄이 들어가고 이미지 두 개(각각 48×48 PNG)가 나옵니다. 머리말 없이 글자만 여러 개 넣을 때는 사이에 빈 줄을 하나씩 두세요.

형식은 머리말을 믿지 않고 풀어 낸 데이터의 첫 부분을 보고 판단합니다. 그래서 머리말이 없거나 틀려도 PNG, JPG, GIF, WebP, BMP, SVG, ICO, AVIF는 알아보고 맞는 확장자로 저장합니다. 주소에 쓰려고 +와 /를 -와 _로 바꾼 변형(URL 안전 Base64)과 끝의 등호가 빠진 글자도 받아들입니다.

오류가 날 때

• 쓸 수 없는 글자: Base64에는 영문, 숫자, +, /, =만 들어갑니다. 따옴표나 쉼표, 한글이 섞였으면 몇 번째 글자인지 알려 줍니다. 복사할 때 앞뒤 글이 딸려 왔는지 확인하세요.
• 글자 수가 맞지 않음: 중간에 잘린 글자입니다. 메신저나 메모 앱이 긴 글을 자르는 경우가 있으니 원본에서 다시 복사하세요.
• 이미지가 아닌 데이터: 풀리기는 했지만 이미지 형식이 아닙니다. PDF나 글꼴 같은 다른 파일의 Base64일 수 있습니다.
• 브라우저가 그리지 못함: 형식은 맞지만 데이터가 손상되어 미리보기가 나오지 않는 경우입니다. 저장은 할 수 있습니다.