이미지 Base64 변환기와 디코더

Base64는 이미지 파일 같은 바이너리 데이터를 문자, 숫자, +, / 등 안전한 64개 텍스트 문자만으로 쓰는 방법입니다. 파일의 3바이트마다 텍스트 4글자가 됩니다. 그래서 JSON, HTML 속성, CSS 파일, 일부 이메일 형식처럼 텍스트만 다루는 시스템으로도 바이너리 내용을 보낼 수 있습니다.

데이터 URI는 그 텍스트 앞에 data:image/png;base64, 처럼 내용물을 브라우저에 알려 주는 짧은 헤더를 붙인 것입니다. 브라우저는 이를 일반 이미지 링크와 똑같이 표시할 수 있습니다.

인라인으로 넣을 때

Base64와 이미지 파일 링크를 비교할 때 맞바꿈은 크기와 캐시입니다. Base64 텍스트는 원본 파일보다 약 3분의 1 크고, 브라우저가 따로 캐시할 수 없습니다. 일반 파일은 한 번 내려받아 재사용됩니다. Base64는 몇백 바이트보다 요청 하나를 줄이는 것이 더 중요한 아주 작은 이미지에서 빛납니다.

‘이미지를 Base64로’ 탭에 이미지를 추가하세요. 도구가 로컬에서 읽고, 파일 바이트로 실제 형식을 감지하며, 원본 크기, 인코딩 크기, 증가량을 보여 줍니다. 아래에 복사 버튼이 달린 다섯 가지 코드가 준비됩니다. 아주 긴 문자열은 속도를 위해 상자에서 줄여 보이지만, 복사 버튼은 항상 전체 텍스트를 복사합니다.

데이터 URI를 텍스트 파일로 다운로드할 수도 있어, 아주 긴 문자열이나 동료에게 보내야 할 때 편리합니다.

흔한 형식

아이콘과 로고는 보통 투명도가 있는 PNG 파일이라 PNG를 Base64로 바꾸는 경우가 가장 흔합니다. JPG를 Base64로 바꾸는 것도 같은 방식이며 아바타 같은 작은 사진에 알맞습니다. SVG 파일도 인코딩됩니다. SVG는 일반 URL 인코딩 텍스트가 더 작을 수도 있지만, Base64가 호환성이 가장 높습니다.

HTML에서

HTML에서 Base64 이미지를 쓰려면 img 코드를 페이지에 붙여 넣으세요. 파일명을 바탕으로 한 대체 텍스트와 너비, 높이가 이미 들어 있어 레이아웃 흔들림을 막는 데 도움이 됩니다. 화면 낭독기를 위해 대체 텍스트가 이미지를 설명하도록 수정하세요.

CSS에서

CSS의 Base64 배경 이미지로는 background-image 규칙을 스타일시트에 붙여 넣으세요. 작은 패턴과 아이콘에 알맞습니다. 큰 사진은 인라인으로 넣으면 스타일시트 전체를 내려받고 해석하는 속도가 느려지므로 파일로 두세요.

Markdown과 JSON

Markdown 코드는 데이터 URI를 받는 많은 편집기와 문서 도구에서 작동합니다. API와 JSON에는 API 문서가 전체 데이터 URI를 요구하지 않는 한, data: 헤더 없는 ‘Base64만’ 코드를 쓰세요.

‘Base64를 이미지로’ 탭으로 바꾸고 원본 Base64 문자열이나 완전한 데이터 URI를 붙여 넣으세요. 도구는 공백과 줄바꿈을 지우고, URL-safe 문자를 받아들이고, 빠진 패딩을 추가하고, 텍스트를 디코딩한 뒤 첫 바이트를 확인해 실제 이미지 형식을 알아냅니다. 그러면 사진, 크기, 용량, 그리고 올바른 확장자의 다운로드 버튼이 표시됩니다.

텍스트가 유효한 Base64가 아니거나, 잘렸거나, 다른 종류의 파일이라면 무엇이 잘못됐는지 분명한 메시지로 알려 줍니다. 그래서 API 응답, 데이터베이스 필드, 이메일 원본을 디버깅하는 데 유용합니다.

대략적인 기준은 몇 KB보다 작은 이미지만 인라인으로 넣고 나머지는 파일로 두는 것입니다. 이미지가 100KB보다 크면 HTML이나 CSS가 무거워지므로 도구가 경고합니다. 더 큰 이미지는 먼저 이미지 압축 도구로 압축하거나 WebP로 변환하세요.

Base64는 인코딩이지 암호화가 아닙니다. 누구나 디코딩할 수 있으니 이미지를 숨기거나 보호하는 방법으로 여기지 마세요.

개인정보

인코딩과 디코딩은 브라우저 내장 기능만으로 처리됩니다. 아무것도 업로드되거나 저장되지 않으며, 이 도구는 무료, 무제한이고 EnhancerPro 크레딧을 쓰지 않습니다.

문자열이 왜 이렇게 길까요?

3바이트가 4글자가 되므로 30KB 이미지는 약 40,000글자가 됩니다. 정상입니다. 용도에 비해 너무 길다면 인코딩 전에 이미지 크기를 줄이거나 압축하세요.

줄바꿈과 이메일

일부 이메일 시스템은 Base64를 76글자 줄로 나눕니다. 디코더는 그 줄바꿈을 자동으로 무시하므로 나뉜 텍스트를 그대로 붙여 넣을 수 있습니다.

파비콘과 아이콘

파비콘을 데이터 URI로 인라인하는 것은 대부분의 브라우저에서 되지만, 북마크와 홈 화면에는 실제 favicon.ico와 PNG 파일이 더 안정적입니다. 파비콘 생성기가 전체 세트를 만들어 줍니다.

이메일 서명의 로고

일부 이메일 클라이언트는 읽는 사람이 허용할 때까지 링크 이미지를 차단하지만, 내장 데이터 URI 지원도 제각각입니다. 서명에는 보통 내 사이트에 호스팅한 작은 PNG 링크가 가장 안정적이며, Base64는 모든 것을 HTML 한 덩어리에 넣어야 하는 시스템을 위한 대안입니다. 어느 쪽이든 로고는 몇 KB 이하로 유지하세요.

자리 표시와 로딩 이미지

Base64로 인코딩한 아주 작고 흐린 사진은 전체 이미지가 로드되는 동안 즉시 나타날 수 있습니다. 사진을 너비 20픽셀 정도로 줄여 인코딩하고, 실제 이미지 뒤의 배경으로 쓰세요. 페이지에 몇백 바이트만 더해집니다.

JSON에 이미지 저장하기

일부 API와 설정 파일은 이미지를 Base64 문자열로 받습니다. ‘Base64만’ 코드를 쓰고 문서에서 크기 제한을 확인하세요. 그런 데이터를 받았다면 저장하기 전에 디코더에 붙여 넣어 이미지 형식과 크기를 확인하세요.

테스트와 프로토타입

빠른 프로토타입을 HTML 파일 하나로 공유할 때 작은 이미지를 인라인으로 넣으면 파일을 옮기거나 이메일로 보내도 깨지지 않습니다. 실제 서비스에 들어갈 것이라면 브라우저가 캐시할 수 있도록 큰 인라인 이미지를 다시 일반 파일로 바꾸세요.

문자열 내용 확인하기

Base64 텍스트는 내용에 대한 단서를 주지 않습니다. PNG는 iVBOR, JPEG는 /9j/처럼 첫 글자가 형식을 암시하는 경우가 많지만, 확실히 알려면 디코더를 쓰세요. 데이터 URI의 표시를 믿지 않고 실제 파일 서명을 읽습니다.

성능 체크리스트

이미지를 인라인으로 넣기 전에 세 가지를 물어보세요. 작은가, 이상적으로는 몇 KB 이하인가? 한 페이지에서만 쓰여 캐시가 별 도움이 안 되는가? 요청 하나가 더해지면 첫 화면이 눈에 띄게 느려지는가? 셋 다 그렇다면 Base64가 잘 맞습니다. 그렇지 않다면 WebP 같은 최신 형식의 일반 파일을 제공하고, 너비와 높이를 지정하고, 그 파일을 쓰는 모든 페이지에서 브라우저가 캐시하게 하세요. HTML은 가볍게, 페이지는 빠르게 유지됩니다.

변환하고 되돌리기

이미지를 인코딩했다가 디코딩하면 정확히 같은 바이트가 돌아옵니다. Base64는 무손실입니다. 그래서 디코더로 복사한 문자열이 완전한지 빠르게 확인할 수 있습니다. 디코딩한 사진이 잘리거나 표시되지 않는다면, 복사하면서 텍스트 일부, 흔히 패딩 문자가 있는 끝부분을 잃은 것입니다. 원본에서 다시 복사해 한 번 더 디코딩하세요. 온전하면 도구가 확인해 줍니다.