이미지 Base64 변환기

기능 소개

이 도구는 이미지를 Base64 텍스트와 바로 붙여넣을 수 있는 data URI로 바꿉니다. data URI는 이미지를 HTML, CSS, Markdown, JSON, 이메일에 직접 포함하므로 페이지의 HTTP 요청이 하나 줄고, 별도 파일을 호스팅하지 않아도 코드 조각이 동작합니다. 반대 방향도 지원합니다. Base64나 data URI를 붙여넣으면 이미지를 미리 보고 다운로드할 수 있습니다.

사용 방법

1. 드롭 영역에 이미지를 끌어다 놓거나, 이미지 선택을 누르거나, 예시를 눌러 SVG 로고를 불러옵니다.
2. 미리보기에 이미지와 함께 형식, 파일 크기, Base64 크기, 해상도가 표시됩니다.
3. 출력 형식을 고릅니다.
   • Data URI: data:image/png;base64,… 형태로, src 속성과 JSON에 씁니다.
   • Base64만: 순수 문자열이며, MIME이나 PEM 방식에 맞게 76자에서 줄바꿈할 수도 있습니다.
   • CSS 배경: 완성된 background-image: url("…"); 선언입니다.
   • HTML <img>: data URI를 src로 쓰는 이미지 태그입니다.
   • Markdown: ![image](data:…).
4. 결과를 복사합니다. 디코딩하려면 입력 상자에 Base64나 data URI를 붙여넣고 이미지 다운로드를 누릅니다.

예시

2×1 픽셀 PNG는 다음과 같이 변환됩니다.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

CSS에서 사용하는 예:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

이미지를 인라인으로 넣어야 할 때

인라인은 아이콘, 작은 배경, 로딩 스피너, 이메일 서명처럼 작고 자주 쓰이는 이미지에 도움이 됩니다. 사진이나 큰 그래픽에는 맞지 않습니다. Base64는 크기를 약 3분의 1 늘리고, 이미지를 페이지나 스타일시트와 별도로 캐시할 수 없으며, 파일의 나머지 부분을 파싱하는 것도 늦춥니다. 일반적으로 인라인 이미지는 몇 킬로바이트 이하로 유지하세요. SVG라면 퍼센트 인코딩된 data URI(data:image/svg+xml,…)가 Base64보다 작은 경우가 많으며, 이 도구는 두 형식을 모두 받아들입니다.