Data URI 변환기

Data URI 변환기 소개

data URI는 파일 내용을 주소 안에 직접 적는 URL입니다. 「data:image/png;base64,iVBOR…」처럼 생겼고, 이 문자열을 img의 src나 CSS의 url()에 넣으면 별도 파일을 내려받지 않고 바로 그림이 뜹니다. 형식은 1998년 RFC 2397에서 정해졌습니다.

이 도구는 두 방향으로 동작합니다. 파일을 넣으면 Base64 data URI와 크기 변화, 바로 쓸 수 있는 CSS 조각(background-image 또는 폰트용 @font-face)을 만들고, data URI를 붙여 넣으면 MIME 타입·인코딩·원래 크기를 보여 주고 파일로 저장하게 해 줍니다.

data URI를 읽는 법

문법은 data:[미디어 타입][;base64],데이터 입니다. 콤마 앞이 설명, 뒤가 내용입니다. 미디어 타입을 생략하면 RFC 2397은 text/plain;charset=US-ASCII로 간주하라고 정합니다. 그래서 「data:,Hello%2C%20World%21」도 올바른 data URI이고, 이 도구에 넣으면 text/plain, 13바이트, 「Hello, World!」로 풀립니다.

;base64가 있으면 콤마 뒤는 Base64이고, 없으면 퍼센트 인코딩입니다. 이 도구는 %XX를 UTF-8로 해석하지 않고 그 바이트 그대로 풀기 때문에 %FF%00 같은 바이너리나 charset=EUC-KR 텍스트도 손실 없이 복원되고, 저장할 때 charset을 파일 형식에 함께 붙입니다. 이미지·폰트 같은 바이너리는 거의 항상 Base64로 적고, SVG나 짧은 텍스트는 퍼센트 인코딩으로 적는 편이 짧습니다. SVG는 원래 텍스트라서 Base64로 바꾸면 33% 커지지만, 퍼센트 인코딩은 <, >, # 같은 몇 글자만 바꾸면 되기 때문입니다.

크기: 33%는 큰 파일에서만 맞는 숫자

Base64는 3바이트를 4글자로 적으므로 페이로드는 ceil(n/3)×4 글자가 됩니다. 여기에 「data:image/png;base64,」 22글자가 앞에 붙습니다. 30,000바이트 PNG는 Base64 40,000글자, data URI 전체 40,022글자로 33% 증가입니다. 그런데 100바이트짜리 아이콘은 Base64 136글자(+36%), 전체 158글자(+58%)가 됩니다. 도구가 두 증가율을 따로 보여 주는 이유입니다.

인라인이 오히려 손해인 경우

data URI의 장점은 HTTP 요청 하나를 없애는 것입니다. HTTP/1.1 시절에는 연결 수 제한 때문에 작은 아이콘을 수십 개 인라인하는 것이 확실한 이득이었지만, 한 연결로 여러 요청을 동시에 보내는 HTTP/2 이후로는 그 이득이 크게 줄었습니다. 반대로 손해는 그대로입니다.

• 캐시를 따로 못 한다: 인라인된 이미지는 그것을 담은 CSS·HTML 파일의 일부로만 캐시됩니다. 로고 하나를 바꾸면 CSS 전체를 다시 받아야 하고, 여러 페이지 HTML에 넣었다면 페이지마다 같은 바이트를 다시 받습니다.
• 렌더링을 막는다: CSS는 다 받을 때까지 화면을 그리지 않으므로, CSS 안의 큰 data URI는 첫 화면 표시를 그만큼 늦춥니다. 별도 이미지 파일이었다면 텍스트부터 보여 줄 수 있습니다.
• 우선순위와 지연 로딩을 잃는다: loading="lazy"나 반응형 srcset 같은 선택이 의미가 없어집니다. 화면 밖 이미지도 무조건 함께 내려옵니다.
• 33% 더 크다: 압축 전송(gzip 등)이 일부를 되찾지만, 원래 이미지 바이트보다는 여전히 큽니다.

그래도 쓸 만한 곳

몇백 바이트 이하의 아이콘·패턴, 한 번만 쓰는 로딩 스피너, 외부 파일을 둘 수 없는 HTML 이메일이나 단일 파일 보고서, 오프라인에서 열어야 하는 문서가 적합합니다. 웹폰트를 @font-face에 인라인하면 글꼴이 늦게 떠서 글자가 깜빡이는 현상은 줄지만, 폰트 파일은 보통 수십 KB라 CSS가 그만큼 무거워진다는 점을 저울질해야 합니다.

보안 참고: 주요 브라우저는 피싱에 악용되는 것을 막으려고 주소창이나 링크로 data: URL을 최상위 페이지로 여는 것을 막습니다. 이미지·스타일 안에서 쓰는 것은 문제없지만, data:text/html 링크를 공유하면 열리지 않는 게 정상입니다.

예시

사용 방법

1. 파일→data URI: 파일을 끌어다 놓거나 선택하면 URI, 크기 변화, CSS 조각이 나옵니다.
2. 폰트 파일이면 글꼴 이름을 적어 @font-face 규칙을 복사합니다.
3. data URI→파일: 문자열을 붙여 넣으면 타입과 크기를 확인하고, 이미지는 미리 보고, 파일로 저장할 수 있습니다.

자주 묻는 질문