이미지 ↔ Base64 변환
작은 아이콘을 HTML이나 CSS 안에 바로 넣고 싶을 때, 또는 어디선가 받은 긴 Base64 문자열이 무슨 그림인지 궁금할 때 쓰세요.
이미지를 여기에 놓으세요
작은 아이콘이나 로고에 알맞아요
이 도구는 브라우저 안에서만 작동해요. 넣은 파일과 글은 어떤 서버에도 올라가지 않아요.
마지막 점검: · 만든 곳 손끝공방
이렇게 쓰세요
- 1
이미지 → Base64 탭에 이미지를 넣으면 바로 문자열이 만들어져요.
- 2
Data URI, Base64만, <img> 태그, CSS 중 필요한 형태를 골라 복사하세요.
- 3
반대로 Base64 → 이미지 탭에 문자열을 붙여넣으면 미리보기와 함께 파일로 저장할 수 있어요.
Base64 이미지는 언제 쓰나요?
Base64는 이미지 같은 파일을 글자로만 이루어진 문자열로 바꾸는 방법이에요. 이렇게 하면 이미지 파일을 따로 두지 않고 HTML·CSS·JSON·이메일 서명 안에 직접 넣을 수 있어요.
- 좋은 경우 — 몇 KB짜리 아이콘, 로딩 이미지, 이메일 서명 로고, 파일 하나로 끝내야 하는 HTML
- 피하는 게 좋은 경우 — 큰 사진. 용량이 약 33% 커지고 브라우저가 따로 저장(캐시)해 두지 못해 오히려 느려져요.
자주 묻는 질문
Data URI와 Base64만은 뭐가 달라요?
Data URI는 data:image/png;base64,처럼 형식 정보가 앞에 붙어 있어 HTML이나 CSS에 바로 쓸 수 있어요. 'Base64만'은 그 뒤의 순수한 문자열이라 API나 프로그램에 넘길 때 써요.
형식 정보가 없는 Base64도 이미지로 바꿀 수 있나요?
네. 파일의 첫 몇 바이트를 보고 PNG·JPG·GIF·WEBP·SVG 등을 자동으로 알아내요.
이미지가 서버로 전송되나요?
아니요. 변환은 브라우저 안에서만 이루어져요.