이미지 ↔ Base64 변환기

이미지를 붙여 넣을 수 있는 글자로, 그 글자를 다시 이미지로 바꿉니다

이미지 Base64 변환기는 PNG·JPG·GIF·WebP·SVG 같은 이미지 파일을 data:image/png;base64,… 모양의 글자(Data URL)로 바꾸고, 반대로 Base64 글자를 받아 원래 이미지로 되돌리는 도구입니다. 위 작업면의 왼쪽 칸에 이미지를 넣으면 오른쪽 칸에 Base64가 나오고, 오른쪽 칸에 Base64를 붙여 넣으면 왼쪽 칸에 이미지가 나타납니다. 따로 모드를 고를 필요가 없습니다.

결과는 Data URL·Base64만·HTML <img>·CSS background-image·Markdown 다섯 모양으로 바로 복사할 수 있습니다. 아래 크기 저울은 글자로 바꾸면 얼마나 커지는지, Vite·webpack 같은 빌드 도구가 기본 설정에서 이 크기를 자동으로 넣는지도 함께 보여 줍니다. 파일은 서버로 올리지 않고 이 브라우저 안에서만 읽습니다.

어떤 상황에서 쓰나요?

Base64는 0과 1로 된 파일을 글자 64개만으로 다시 쓰는 방법입니다. 이미지를 글자로 바꾸면 글만 들어가는 자리에도 그림을 넣을 수 있습니다.

• 작은 아이콘을 CSS·HTML에 바로 넣기: 아이콘 하나 때문에 파일 요청이 한 번 더 생기는 것을 피하고 싶을 때 씁니다. 빌드 도구가 작은 이미지를 자동으로 Data URL로 바꾸는 것도 같은 이유입니다.
• 파일 하나로 끝나는 문서 만들기: 보고서·안내문·오프라인 데모처럼 HTML 파일 하나만 보내도 그림이 깨지지 않아야 할 때 이미지를 글 안에 넣습니다.
• JSON·API로 이미지 보내기: JSON에는 글자만 들어가므로 이미지를 Base64 글자로 바꿔 한 항목에 담습니다. 받은 쪽이 저장한 값이 어떤 그림인지 확인할 때는 반대로 되돌립니다.
• 로그·데이터베이스에 남은 Base64 확인: 오류 기록이나 데이터베이스에서 iVBORw0KGgo…로 시작하는 긴 글자를 발견했다면, 붙여 넣는 것만으로 무슨 그림인지 볼 수 있습니다.

변환기 쓰는 법

1. 이미지 고르기를 누르거나 이미지를 작업면에 끌어다 놓습니다. 복사한 이미지는 Ctrl+V(Mac은 ⌘+V)나 붙여넣기 버튼으로 넣습니다. 한 번에 20개까지 넣을 수 있고, 아래 번호를 눌러 하나씩 봅니다.
2. 오른쪽 위 형식 버튼에서 붙일 곳에 맞는 모양을 고릅니다. SVG는 URL 인코딩과 Base64 가운데 하나를 고를 수 있고, 버튼마다 글자 수가 보입니다.
3. 복사나 저장을 누릅니다. 이미지를 여러 개 넣었다면 전체 복사가 생기고, CSS를 고른 경우에는 파일 이름으로 클래스를 하나씩 만들어 줍니다.
4. 반대로 되돌릴 때는 오른쪽 칸에 Base64나 data: 주소를 붙여 넣습니다. HTML·CSS 글을 통째로 붙여도 그 안의 data: 주소를 찾아 읽고, 되돌린 이미지는 이미지 저장으로 내려받습니다.

처음 화면에 보이는 아이콘·사진·로고는 예시 파일입니다. 사진 예시에는 서울시청 앞 좌표를 촬영 위치로 일부러 넣어 두었습니다. 사진 예시를 누르면 사진 정보 칸에 위치 경고가 어떻게 뜨는지 확인할 수 있습니다.

결과 모양과 붙이는 곳

HTML 모양에는 이미지의 실제 가로·세로 크기를 width·height로 넣습니다. 브라우저가 이미지를 읽기 전에 자리를 잡아 두어 화면이 덜컹거리지 않습니다. alt에는 파일 이름이 들어가므로 이미지 내용을 설명하는 문장으로 바꿔 쓰는 편이 좋습니다.

Base64로 바꾸면 3분의 1쯤 커지는 이유

컴퓨터 파일은 8비트(1바이트) 단위로 되어 있고, Base64 글자 하나는 6비트만 나타냅니다. 그래서 RFC 4648은 3바이트(24비트)를 6비트씩 네 조각으로 나눠 4글자로 쓰도록 정합니다. 위 작업면의 비트 띠가 바로 이 과정을 파일의 첫 6바이트로 보여 줍니다. 마지막 묶음이 3바이트가 안 되면 남은 비트를 0으로 채우고 빈 글자 자리에는 =를 씁니다.

Base64 글자 수 = 4 × ⌈원본 바이트 ÷ 3⌉ · Data URL 글자 수 = 위 값 + 앞머리(data:image/png;base64, 22자)

다만 웹 서버는 대개 글자를 gzip 같은 방식으로 압축해서 보냅니다. Base64 글자는 64가지 기호만 쓰므로 압축하면 늘어난 몫이 거의 사라집니다. 크기 저울의 gzip 전송 막대는 브라우저에 들어 있는 압축 기능(CompressionStream)으로 지금 결과를 직접 압축해서 잰 값입니다. 아래는 예시 파일 세 개를 Chrome에서 잰 결과입니다. 브라우저마다 압축 프로그램이 달라 몇 바이트씩 차이가 날 수 있습니다.

즉, 압축해서 보내면 PNG·JPG의 Base64는 원본과 비슷한 크기로 전달됩니다. 그래도 Base64로 넣은 이미지는 그 문서를 받을 때마다 함께 내려오고, 브라우저가 이미지 파일만 따로 저장해 두었다가 다시 쓸 수 없습니다. 그래서 작은 이미지에만 쓰는 것이 일반적입니다.

어떤 크기까지 Data URL로 넣을까요?

정해진 법칙은 없지만, 많이 쓰는 빌드 도구의 기본값이 현실적인 기준이 됩니다. 크기 저울의 눈금은 원본 파일 크기를 이 두 기본값과 비교합니다.

• 4,096바이트 미만: 두 도구 모두 기본 설정에서 Data URL로 넣습니다. 아이콘·작은 무늬처럼 여러 번 쓰지 않는 그림이 여기에 들어갑니다.
• 4,096 ~ 8,096바이트: 도구마다 판단이 갈리는 구간입니다. 예시 아이콘(6,960바이트)이 여기에 해당하며, 같은 파일이라도 Vite는 파일로 두고 webpack은 글자로 넣습니다.
• 8,096바이트 초과: 두 도구 모두 파일로 따로 둡니다. 사진처럼 큰 이미지는 파일로 두어야 브라우저가 따로 저장해 두었다가 다시 쓸 수 있습니다.

콘텐츠 보안 정책(CSP)을 쓰는 사이트라면 img-src에 data:를 따로 적어야 Data URL 이미지가 뜹니다. CSP Level 3는 http·https가 아닌 주소 방식을 명시적으로 적도록 정하고 있습니다.

SVG는 Base64보다 URL 인코딩이 짧은 경우가 많습니다

SVG는 원래 글자로 된 이미지라서 Base64로 다시 바꿀 필요가 없습니다. CSS-Tricks의 크리스 코이어는 SVG를 Data URL로 넣을 때 Base64로 바꾸면 원본의 약 133~136%가 되고, 글자 그대로 쓰는 쪽이 압축도 더 잘 된다고 정리했습니다. 이 도구는 SVG를 넣으면 두 방식의 글자 수를 모두 계산하고, 더 짧은 쪽을 먼저 고릅니다.

• URL 인코딩은 #·<·>·%·줄바꿈·한글을 퍼센트(%23 등)로 바꿉니다. 특히 #을 그대로 두면 색상값 뒤가 주소의 조각으로 잘려 그림이 깨집니다.
• 속성값을 감싼 큰따옴표는 작은따옴표로 바꿉니다. 그래야 결과를 HTML src="…"나 CSS url("…") 안에 그대로 넣을 수 있습니다. 속성값 안에 이미 작은따옴표가 있으면 바꾸지 않고 %22로 둡니다.
• 공백·=·:·/는 그대로 둡니다. 따옴표로 감싼 HTML 속성과 CSS 주소 안에서는 브라우저가 이 글자를 그대로 읽습니다. Markdown 모양에서는 공백이 있으면 주소를 <…>로 감쌉니다.

Base64를 이미지로 되돌릴 때

파일 형식은 대부분 정해진 바이트로 시작합니다. 그래서 Base64의 첫 몇 글자만 봐도 어떤 형식인지 짐작할 수 있습니다. 이 도구는 data:image/… 앞머리가 없어도 되돌린 바이트의 시작 부분으로 형식을 알아내고, 앞머리에 적힌 형식과 실제 내용이 다르면 알려 줍니다.

붙여 넣은 글에는 흔히 군더더기가 섞여 있습니다. 이 도구는 아래 경우를 스스로 고쳐 읽고, 무엇을 고쳤는지 이미지 칸 아래에 적어 줍니다.

• 줄바꿈·공백: 이메일(MIME)은 Base64를 한 줄 76자 이하로 끊어 쓰도록 정해져 있어서, 메일 원문에서 복사하면 줄바꿈이 들어 있습니다.
• URL-safe Base64: 주소에 넣기 위해 +·/ 대신 -·_를 쓰는 방식(RFC 4648 §5)입니다. 표준 글자로 바꿔 읽습니다.
• 빠진 패딩: 끝의 =를 생략한 값은 글자 수에 맞춰 채웁니다. %3D처럼 퍼센트로 바뀐 =도 풉니다.
• 글 속 data: 주소: HTML <img>·CSS url()·Markdown 글을 통째로 붙여도 첫 번째 data: 주소를 찾아 읽고, 몇 개가 있었는지 알려 줍니다.

반대로 글자 수가 4로 나눠 1이 남는 경우는 고칠 수 없습니다. Base64는 4글자마다 3바이트를 담으므로, 1글자만 남는 일은 복사하다 끝이 잘렸을 때만 생깁니다.

자주 틀리는 경우

• Base64를 암호화로 생각함: Base64는 누구나 되돌릴 수 있는 표기 방법입니다. 비밀번호나 개인정보를 숨기는 데 쓰면 안 됩니다.
• 압축으로 생각함: Base64는 오히려 3분의 1쯤 커집니다. 파일을 줄이려면 먼저 이미지 압축이나 WebP 변환으로 줄인 뒤 바꾸세요.
• 사진 정보가 지워진다고 생각함: Base64는 바이트를 그대로 옮기므로 Exif에 든 촬영 위치·기기 정보도 그대로 남습니다. 이 도구는 JPEG·PNG·WebP의 Exif와 위치 정보가 있는지 사진 정보 칸에 표시합니다.
• 주소창에 Data URL을 붙여 넣음: 요즘 브라우저는 보안 때문에 주소창으로 data: 주소에 이동하는 것을 막습니다. 내용을 확인하려면 이 도구의 오른쪽 칸에 붙여 넣으세요.
• image/jpg라고 적음: JPEG의 표준 형식 이름은 image/jpeg입니다. 되돌릴 때 앞머리에 image/jpg가 있으면 알려 주고, 형식 버튼을 누르면 표준 이름으로 다시 씁니다.

한계와 주의

• 파일 하나는 10 MB(10,485,760바이트)까지, 한 번에 20개까지 넣습니다. 결과가 40만 자를 넘으면 글 칸에는 앞뒤만 보여 주고, 복사·저장은 전체 글로 합니다. 화면의 KB·MB는 1,024바이트 단위입니다.
• 이미지 주소(URL)에서 그림을 내려받지는 않습니다. 이미지를 저장한 뒤 넣어 주세요.
• HEIC 사진은 변환은 되지만 미리 보기는 macOS·iOS의 Safari 17 이상에서만 됩니다. TIFF·JPEG XL도 브라우저에 따라 미리 보기가 안 될 수 있습니다.
• 크기를 줄이거나 형식을 바꾸지 않고 바이트를 그대로 옮깁니다. 움직이는 GIF·WebP는 되돌려도 그대로 움직입니다.
• gzip 전송 막대는 이 결과만 따로 압축한 값입니다. 실제 페이지에서는 주변 글과 함께 압축되므로 숫자가 조금 다를 수 있고, 압축 기능이 없는 브라우저에서는 막대를 보여 주지 않습니다.
• 브라우저 기준으로 Chromium과 Firefox는 data: 주소를 512MB까지, Safari는 2048MB까지 받습니다. 이 도구의 10 MB 한도는 그보다 훨씬 작지만, 실제 문서에 넣기에는 이미 큰 크기입니다.

기준일 Base64·data: 규격, Vite·webpack 기본값, 브라우저 길이 한도·압축 기능 지원은 2026-10-20에 원문으로 확인했습니다. 빌드 도구 기본값은 판이 바뀌면 달라질 수 있습니다.

출처

• 01RFC 4648: The Base16, Base32, and Base64 Data Encodings24비트를 4글자로(§4), 패딩 =(§3.2), 알파벳 밖 글자(§3.3), URL-safe base64url(§5)
• 02RFC 2397: The "data" URL schemedata:[형식][;base64],내용 문법
• 03MDN: data: URLs형식 생략 시 text/plain, 길이 한도(Chromium·Firefox 512MB, Safari 2048MB), 최상위 이동 차단
• 04Vite: Build Options — build.assetsInlineLimit기본값 4096(4 KiB), 이보다 작은 자산을 Base64 URL로 넣음
• 05webpack: Module — parser.dataUrlConditionmaxSize 기본값 8096바이트, 이 크기 이하를 넣음
• 06webpack: Asset Modulesasset 형식은 8kb보다 작은 파일을 inline으로 다룸
• 07CSS-Tricks: Probably Don't Base64 SVG(2014-10-21)SVG를 Base64로 바꾸면 133~136%, 글자 그대로가 압축에 유리
• 08W3C: Content Security Policy Level 3§1.3 http·https가 아닌 scheme은 정책에 명시해야 함
• 09RFC 2045: MIME Part One§6.8 Base64 줄은 76자 이하
• 10MDN: CompressionStream브라우저 내장 gzip 압축, 2023년 5월부터 주요 브라우저 공통
• 11Can I use: HEIF/HEIC image formatSafari 17 이상(macOS·iOS)만 표시

자주 묻는 질문

함께 쓰는 도구