Base64를 이미지로, 미리 보고 바로 다운로드.

HTML, CSS, JSON, 이메일에 들어 있는 이미지는 대개 data:image/png;base64,iVBORw0KGgo… 같은 data: URI 형태입니다. 쉼표 앞은 라벨이고, 이미지는 쉼표 뒤의 Base64입니다. 여기에는 어느 형태로든 붙여 넣을 수 있습니다. 접두사가 있으면 제거하지만, 디코더는 파일 시그니처 자체도 확인하므로 image/png라고 표시되어 있지만 실제로는 JPEG인 이미지도 올바르게 식별하고 저장합니다.

이미지를 다른 곳에 넣기만 할 거라면 디코딩할 필요가 없습니다. data: URI는 <img src>나 CSS의 url()에 그대로 쓸 수 있습니다. 디코딩은 이미지를 편집하거나, 살펴보거나, API가 실제로 무엇을 돌려줬는지 확인하는 등 파일 자체가 필요할 때 씁니다.

Base64는 같은 바이트를 항상 같은 문자로 바꾸기 때문에 파일 형식마다 알아볼 수 있는 시작 부분이 있습니다. 디코딩하기 전에도 Base64 문자열에 무엇이 들어 있는지 알 수 있습니다:

/9j/로 시작하면 JPEG, iVBORw0KGgo로 시작하면 PNG입니다. 로그 한 줄이나 데이터베이스 열 말고는 단서가 없을 때 유용합니다.

• 문자열이 잘렸습니다. 긴 Base64 값은 로그 뷰어, 채팅 앱, 스프레드시트 셀(Excel은 32,767자까지)에서 자주 잘립니다. 헤더는 디코딩되지만 이미지 데이터가 불완전합니다. 원본에서 값을 다시 복사하세요.
• 이미지가 아닙니다. 출력 아래의 형식 필드를 확인하세요. PDF, ZIP, 바이너리 데이터로 표시되면 Base64에 다른 종류의 파일이 들어 있는 것이니 다운로드하세요.
• 표시할 수 없는 형식입니다. 브라우저는 HEIC와 TIFF를 표시하지 못하므로, 이런 파일은 올바르게 디코딩되어도 미리 볼 수 없습니다. 다운로드해서 이미지 뷰어로 여세요.
• 두 번 인코딩되었습니다. 출력이 또 Base64라면(“iVBORw”를 다시 인코딩한 aVZCT1J3로 시작하는 경우가 많습니다) 입력으로 보내기를 누르고 한 번 더 디코딩하세요.

# Python
import base64
with open("image.png", "wb") as f:
    f.write(base64.b64decode(b64_string))

// Node.js
fs.writeFileSync("image.png", Buffer.from(b64String, "base64"));

# Linux / macOS shell
base64 --decode image.b64 > image.png

코드에서 디코딩하기 전에 data:image/…;base64, 접두사를 제거하세요. 대부분의 디코더는 접두사를 잘못된 입력으로 취급합니다. 다른 언어는 Base64 디코딩 코드 예제에서 확인하세요.