이미지 Base64 변환기란?
이미지 파일을 data:image/...;base64,... 형태의 문자열(Data URI)로 바꾸면, 별도 이미지 파일 없이 HTML·CSS 코드 안에 이미지를 직접 포함할 수 있습니다. 작은 아이콘이나 로고를 코드에 넣어 HTTP 요청 수를 줄이거나, 외부 파일 의존성을 없앨 때 자주 사용합니다. 반대로 Base64 문자열을 다시 이미지로 복원해 미리 보거나 파일로 저장할 수도 있습니다.
사용법
- 상단에서 변환 방식(인코딩 또는 디코딩)을 선택합니다.
- 이미지 → Base64: 이미지를 선택하거나 끌어다 놓으면 Data URI가 생성됩니다. 결과를 복사하거나
<img>태그·CSS background 형태로 복사할 수 있습니다. - Base64 → 이미지: Data URI 또는 Base64 문자열을 붙여넣으면 미리보기와 함께 형식·크기 정보가 표시되고 파일로 다운로드할 수 있습니다.
Data URI란?
Data URI는 data:image/png;base64,....처럼 형식 정보와 Base64로 인코딩한 데이터를 한 문자열에 담은 표기입니다. 앞부분의 image/png 같은 MIME 타입이 이미지 종류를 알려 주고, base64, 뒤에 실제 이미지 바이트가 텍스트로 들어갑니다. 이렇게 하면 별도 이미지 파일 없이 HTML·CSS 코드 안에 이미지를 그대로 포함할 수 있어, 파일 하나로 배포하거나 요청 수를 줄이는 데 도움이 됩니다. 이 도구는 인코딩 시 원본 크기와 Base64 길이를, 디코딩 시 이미지 형식과 가로·세로 픽셀, 대략적인 용량을 함께 보여 줍니다.
실무 활용 예시
- 인라인 아이콘: 작은 로고·아이콘을 Data URI로 넣어 추가 HTTP 요청을 없애요.
- 단일 파일 배포: 이미지를 코드에 포함해 HTML 파일 하나만으로 화면이 완성되게 합니다.
- 이메일·문서: 외부 이미지 링크가 막히는 환경에서 이미지를 본문에 직접 담습니다.
- 복원·확인: 코드에 박힌 Base64 값을 붙여넣어 어떤 이미지인지 미리 보고 파일로 저장합니다.
주의점·팁
Base64로 바꾸면 데이터가 원본보다 약 33% 커지므로, 큰 이미지를 Data URI로 넣으면 HTML·CSS 파일이 무거워지고 브라우저 캐시 효율도 떨어집니다. 수십 KB 이하의 작은 이미지에 쓰는 것이 적합하고, 큰 이미지는 일반 파일로 두는 편이 좋습니다. 디코딩 시 순수 Base64만 붙여넣으면 형식을 PNG로 가정하니, 정확한 형식이 중요하면 data:image/... 접두사가 붙은 전체 Data URI를 넣으세요.
자주 묻는 질문
이미지가 서버로 업로드되나요?
아니요. 모든 변환은 브라우저 안에서만 이루어지며 이미지나 Base64 값은 서버로 전송되거나 저장되지 않습니다.
Base64 Data URI는 어디에 쓰나요?
HTML의 img 태그 src나 CSS의 background-image에 이미지 파일 대신 직접 넣을 수 있습니다. 작은 아이콘을 코드에 포함해 HTTP 요청을 줄이거나 외부 파일 의존을 없앨 때 유용합니다.
용량이 큰 이미지도 변환할 수 있나요?
가능하지만 Base64로 변환하면 원본보다 약 33% 커집니다. 수십 KB 이하의 작은 이미지에 적합하며, 큰 이미지는 일반 파일로 사용하는 것이 좋습니다.
어떤 이미지 형식을 지원하나요?
PNG, JPG, GIF, WebP, SVG 등 브라우저가 표시할 수 있는 대부분의 이미지 형식을 지원합니다.
Data URI를 img 태그나 CSS로 바로 복사할 수 있나요?
네. 인코딩 결과 아래의 '<img> 태그로 복사'와 'CSS background로 복사' 버튼을 누르면 각각 완성된 형태로 클립보드에 복사되어 코드에 바로 붙여넣을 수 있습니다.
Base64 문자열만 있고 형식을 모릅니다.
순수 Base64 문자열을 붙여넣으면 도구가 PNG로 가정해 표시합니다. 원래 형식이 다르면 미리보기가 안 될 수 있으니, 가능하면 data:image/... 로 시작하는 전체 Data URI를 넣어 주세요.