인코딩 / 디코딩

이미지 ⇄ Base64 변환

이미지 ⇄ Base64 변환 도구는 이미지 파일을 Base64 문자열(Data URL)로 변환하거나, Base64 문자열에서 이미지를 복원하여 미리 보기와 다운로드를 할 수 있는 도구입니다. HTML이나 CSS에 아이콘을 인라인으로 삽입하고 싶을 때나, API 응답에 포함된 Data URL의 내용을 확인하고 싶을 때 편리합니다.

변환 모드

여기에 이미지를 드래그 앤 드롭

또는

PNG / JPG / WebP / GIF / SVG / AVIF / ICO 지원. 1 세션당 최대 10 개 파일, 1 개 파일당 10 MB 까지.

이미지를 추가하시면 여기에 변환 결과가 표시됩니다.

이미지와 텍스트는 모두 사용하시는 브라우저 내에서 처리되며 외부 서버로 전송되지 않습니다.

Base64 인코딩 / 디코딩

텍스트와 Base64 문자열을 서로 변환합니다. URL-safe Base64와 76자 줄바꿈(MIME)에도 대응하며, 입력하면 실시간으로 결과가 표시됩니다. 브라우저만으로 완결됩니다.

URL 인코딩 / 디코딩

텍스트를 URL 인코딩(퍼센트 인코딩)으로 변환하거나 URL 인코딩된 문자열을 원래의 텍스트로 되돌립니다. 쿼리 파라미터용과 URL 전체용의 2가지 변환 모드에 대응하며, 입력하면 실시간으로 결과가 표시됩니다. 브라우저만으로 완결됩니다.

JWT 디코더

JWT(JSON Web Token)을 붙여넣어 헤더, 페이로드, 서명으로 분해 표시합니다. 표준 클레임(iat / exp / nbf)은 사람이 읽기 쉬운 일시로 변환하며, 만료 여부도 한눈에 알 수 있습니다. HS256 / HS384 / HS512의 서명 검증에도 대응합니다. 브라우저만으로 완결됩니다.

해시값 생성기

텍스트나 파일에서 MD5, SHA-1, SHA-256, SHA-512 해시값을 한 번에 생성합니다. HMAC(키 기반 해시)과 기댓값과의 대조에도 대응합니다. md5 변환 / sha256 계산 / 해시 계산을 브라우저만으로 완결합니다.

이미지 ⇄ Base64 변환 도구란?

"이미지 → Base64" 모드에서는 PNG / JPG / WebP / GIF / SVG / AVIF / ICO 각 형식을 여러 개 한꺼번에 드래그 앤 드롭으로 불러올 수 있습니다. 불러온 이미지마다 축소 미리 보기와 원본 바이트 수, Base64화 후 바이트 수를 표시하고, Data URL에 더해 CSS의 background-image용, HTML의 <img> 태그용, Markdown의 이미지 표기법용 3가지 형식의 코드 스니펫을 탭으로 전환하여 복사할 수 있습니다. 모든 파일의 Data URL을 하나의 텍스트 파일로 정리하여 저장하는 것도 가능합니다.

"Base64 → 이미지" 모드에서는 data:image/...;base64,xxx 형식의 Data URL이든, 접두어를 포함하지 않은 순수한 Base64 문자열이든 붙여넣을 수 있습니다. 앞 바이트의 매직 넘버에서 이미지 형식을 자동 판별하여 미리 보기를 표시하고 다운로드할 수 있습니다. 판별할 수 없거나 덮어쓰고 싶을 때는 풀다운에서 형식을 수동으로 선택할 수 있습니다. 공백, 줄바꿈, URL-safe(-, _)의 혼재도 자동으로 정규화합니다.

입력한 이미지와 텍스트는 모두 사용자의 브라우저 내에서 처리되며, 외부 서버로 전송되지 않습니다. 사외비 이미지나 개인정보를 포함한 데이터를 확인할 때도 안심하고 사용할 수 있습니다. 브라우저만으로 완결됩니다.

사용 방법

상단의 "변환 모드"에서 "이미지 → Base64" 또는 "Base64 → 이미지"를 선택합니다.
이미지 → Base64: 드롭 영역에 이미지를 드래그 앤 드롭하거나 "파일 선택"에서 여러 개를 한꺼번에 불러옵니다.
각 카드의 "복사"로 Data URL을 복사하거나, CSS / HTML / Markdown 탭에서 원하는 형식을 복사합니다.
"모두 .txt로 다운로드"로 불러온 모든 Data URL을 하나의 텍스트 파일로 저장할 수 있습니다.
Base64 → 이미지: 텍스트 입력란에 Data URL 또는 일반 Base64 문자열을 붙여넣습니다.
자동 판별이 어긋난 경우, 오른쪽 상단의 "형식" 풀다운에서 이미지 형식을 덮어쓰고 "이미지 다운로드"로 저장합니다.

활용 사례

아이콘이나 작은 SVG를 HTML / CSS에 인라인으로 삽입하여 HTTP 요청 수를 줄이고 싶을 때.
CSS의 background-image에 데이터 URI로 이미지를 삽입할 때, 그 자리에서 Data URL을 생성하여 동작을 확인하고 싶을 때.
API 응답이나 HTML 소스에 포함된 `data:image/...;base64,...`의 내용을 시각화하여 다운로드하고 싶을 때.
HTML 메일용으로 이미지를 인라인 삽입한 샘플을 작성하고 싶을 때.
개발 중인 테스트 픽스처나 E2E 스냅숏용으로 이미지를 Base64화하여 소스 관리에 포함하고 싶을 때.

주의사항

1세션당 최대 10개의 파일, 1파일당 최대 10MB까지 불러올 수 있습니다. 이를 초과하는 이미지는 불러오기 시 거부됩니다.
이미지를 Base64화하면 원본 바이트 수의 약 1.33배로 크기가 증가합니다. Data URL은 단순한 압축 형식이 아니라 바이트를 텍스트로 표현하기 위한 인코딩입니다.
100KB를 초과하는 Data URL을 CSS의 background-image 등에 인라인으로 삽입하면 브라우저 캐시가 동작하지 않으므로 권장하지 않습니다. 크기가 큰 카드에는 경고가 표시됩니다.
"Base64 → 이미지"에서는 디코딩 후 앞 바이트에서 이미지 형식(PNG / JPG / WebP / GIF / AVIF / ICO)을 자동 판별합니다. SVG는 텍스트 앞쪽의 태그에서 판별합니다.
붙여넣은 문자열의 공백, 줄바꿈은 자동으로 제거하며, URL-safe Base64에서 사용되는 "-", "_"는 표준 형식으로 변환한 뒤 디코딩합니다. 끝의 "=" 패딩 생략에도 대응합니다.
판별 불가, Base64로서 올바르지 않음, 디코딩 후 50MB 초과인 경우 결과란에 오류 메시지가 표시됩니다.

자주 묻는 질문

이미지가 서버로 전송되나요?

전송되지 않습니다. 변환 처리는 모두 사용자의 브라우저 내에서 완결됩니다. 사외비 이미지나 개인정보를 포함한 데이터를 확인할 때도 안심하고 사용할 수 있습니다.

Base64로 만들면 이미지 크기는 어떻게 되나요?

원본 바이트 수의 약 1.33배로 텍스트 양이 늘어납니다. HTTP 요청 수를 줄일 수 있는 대신 브라우저 캐시가 동작하지 않는다는 점에 주의해 주세요. 큰 이미지는 일반적인 URL 참조 그대로 유지하는 것을 권장합니다.

얼마나 큰 이미지를 변환할 수 있나요?

1파일당 최대 10MB를 기준으로 합니다. 이보다 큰 이미지는 텍스트 양이 비대해져 브라우저 동작이 무거워지므로 거부됩니다.

"data:image/..." 접두어가 없는 Base64도 디코딩할 수 있나요?

가능합니다. 디코딩 후 앞 바이트의 매직 넘버에서 이미지 형식을 자동 판별하므로, 순수한 Base64 문자열만 붙여넣어도 동작합니다. 판별할 수 없는 경우 풀다운에서 형식을 수동 지정해 주세요.

SVG도 지원하나요?

지원합니다. "이미지 → Base64"에서는 SVG 파일을 그대로 불러올 수 있고, "Base64 → 이미지"에서는 Data URL이든 일반 Base64든 복원할 수 있습니다(SVG는 텍스트 앞쪽이 `<?xml` 또는 `<svg`인지로 판별됩니다).

투명 PNG는 그대로 복원되나요?

복원됩니다. Base64는 바이트에 충실한 부호화이므로 알파 채널이나 색상 정보가 손상되지 않습니다. 원본 PNG와 비트 단위로 동일한 파일이 복원됩니다.