작은 리소스의 생성과 복원

Data URI 생성기

텍스트, 파일, SVG를 data: URL로 만들거나 기존 URI의 메타데이터와 원본 바이트를 확인하세요.

Data URI 생성기

입력

결과

텍스트, 파일, URI 내용은 브라우저 안에서만 처리하며 전송하거나 URL에 저장하지 않습니다.

설정 및 메타데이터

매개변수 없이 type/subtype을 입력하세요. 텍스트는 UTF-8, 파일은 원본 바이트를 사용합니다. MIME은 형식 판별 결과가 아닙니다.

최대 원본·복원 데이터 600,000바이트, URI 1,900,000자, 헤더 1,024자.

MIME: text/plain;charset=utf-8 · 문자 집합: utf-8 · 인코딩: Base64

전체 URI 길이: Base64 65 · 퍼센트 80

20바이트 · URI 65자

인라인 아이콘이 보이지 않을 때는 이미지 자체보다 쉼표 하나나 이스케이프되지 않은 #이 원인일 수 있습니다. Data URI 생성기는 주소를 구성하는 헤더와 실제 데이터를 나누어 보여 주므로 어느 부분을 고쳐야 할지 확인할 수 있습니다.

Data URI 생성기를 쓰는 이유

SVG에 맞는 길이를 직접 비교

Data URI 생성기는 같은 바이트를 Base64와 퍼센트 방식으로 표현했을 때의 전체 주소 길이를 함께 보여 줍니다. ASCII가 많은 SVG는 퍼센트 방식이 유리할 수 있지만 기호와 한글 비중에 따라 달라지므로 실제 숫자로 판단하세요.

하나의 SVG 소스에서 두 인코딩 경로가 갈라져 각각 길이 눈금이 있는 URI를 만드는 그림.

파일을 실행하지 않고 복원

data URI 파서는 형식을 표시하는 헤더와 실제 내용을 구분해야 합니다. 이 도구에서는 텍스트나 16진수로 확인한 뒤 전체 바이트를 저장할 수 있습니다. HTML과 SVG도 소스로 표시하며 미리보기를 위해 실행하지 않습니다.

URI에서 메타데이터와 원래 색상 바이트 블록을 담은 파일이 분리되는 그림.

결과를 쓰기 전에 확인할 세 가지

01

SVG 모드의 기본값 이해하기

SVG 데이터 URI를 만들 때 MIME은 image/svg+xml로 고정되고 퍼센트 인코딩이 먼저 선택됩니다. Base64로 바꿔 전체 길이를 비교할 수 있습니다. 이 모드는 색상, XML 구조, 줄바꿈을 정리하는 편집기가 아닙니다.

02

자동 변환과 수동 실행 구분하기

마지막 변경 후 350ms가 지나면 자동으로 갱신됩니다. 끄면 변환 버튼 또는 Ctrl/Cmd + Enter로 실행합니다. 입력이나 설정을 바꾸는 즉시 내보내기가 비활성화되며 각 입력 모드의 내용은 별도로 유지됩니다.

03

복사 표현과 파일 바이트 구분하기

분석 결과 아래에 텍스트인지 16진수인지 표시됩니다. 결과 복사는 그 표현을 복사하고 바이트 다운로드는 원본 전체를 저장합니다. 예제, 지우기, 파일 교체는 개수를 확인하고 적용하며 한 번 취소할 수 있습니다.

리소스를 그대로 유지하는 기능

텍스트와 단일 파일 입력

텍스트는 UTF-8로 인코딩하고 charset을 명시합니다. 파일은 브라우저가 알려 준 MIME을 사용하며 없으면 application/octet-stream을 적용합니다. 직접 유형을 수정해도 파일의 실제 형식이나 바이트는 변하지 않습니다.

바이트 단위 퍼센트 처리

%FF처럼 텍스트로 읽을 수 없는 바이트도 그대로 복원합니다. +를 공백으로 바꾸지 않으며 생성할 때 따옴표, 괄호, #, 공백, 비 ASCII 바이트를 이스케이프합니다. 이 처리 방식은 폼 데이터의 URL 인코딩과 다릅니다.

헤더를 명시적으로 분석

첫 쉼표를 기준으로 헤더와 데이터를 나눕니다. 생략된 MIME, charset과 중복되지 않는 매개변수, 마지막 base64 표시를 읽습니다. 잘못된 이스케이프와 모호한 매개변수는 위치를 포함한 오류로 알려 줍니다.

전체 크기와 단계적 표시

원본 또는 복원된 바이트 수와 URI 전체 문자 수를 각각 보여 줍니다. 처음에는 결과 20,000자를 표시하고 더 펼칠 수 있습니다. 화면 표시 길이와 관계없이 복사 및 다운로드에는 현재 결과 전체가 사용됩니다.

지원 형식과 제한

브라우저처럼 오류를 보정하지 않음
분석 입력에는 data:와 쉼표가 필요합니다. 표준 Base64는 정확한 패딩이나 완전 생략을 허용하지만 부분 패딩, 0이 아닌 미사용 비트, Base64URL은 거부합니다. 원시 공백과 #도 거부하므로 #은 %23으로 써야 합니다.
MIME 입력 범위
생성 시 MIME은 매개변수 없는 type/subtype이며 ASCII 127자 이내입니다. 분석 헤더는 1,024자까지이고 매개변수 이름은 중복할 수 없습니다. 값에 이스케이프된 ASCII를 쓸 수 있지만 중복 charset이나 잘못 놓인 표시를 자동 수정하지 않습니다.
다른 문자 집합으로 변환하지 않음
UTF-8과 ASCII를 지원합니다. MIME이 있고 charset만 없으면 UTF-8을 시도하며 MIME도 생략되면 US-ASCII로 봅니다. 다른 charset, 잘못된 텍스트 바이트, 바이너리 제어 문자는 16진수로 보여 주고 원본 바이트를 유지합니다.
작은 리소스 하나씩 처리
원본과 복원 데이터는 600,000바이트, URI는 1,900,000자가 한도입니다. 32,768자 알림은 삽입 여부를 검토하기 위한 기준이지 브라우저 공통 한도가 아닙니다. 일괄 변환, 압축, 외부 URL 가져오기는 제공하지 않습니다.
SVG나 HTML을 실행하지 않음
SVG 모드는 인코딩만 하며 최적화, 색상 변경, 스크립트 제거, PNG 변환, 구조 검증을 하지 않습니다. 이미지나 iframe 미리보기도 만들지 않습니다. MIME 선언이나 분석 성공은 파일 형식 및 안전성을 보증하지 않습니다.
대상 환경은 별도 확인
CSS, HTML, Markdown 구문을 붙이지 않고 URI만 출력합니다. 대상 사이트의 CSP, 메일 클라이언트와 캐시 동작은 검사하지 않습니다. Data URI는 내용을 포함하는 표현이므로 암호화가 아니며 리소스만 따로 캐시하는 기능도 없습니다.

Data URI 생성기 자주 묻는 질문

파일이 서버로 업로드되나요?

아니요. 선택한 파일은 브라우저에서 읽습니다. 입력을 전송하거나 공유 URL에 넣거나 초안으로 저장하지 않습니다. 다만 다운로드한 URI에는 원본 내용 전체가 들어 있으므로 그 파일을 공유하면 내용도 함께 전달됩니다.

파일은 반드시 Base64로 인코딩해야 하나요?

그렇지 않습니다. 파일 입력을 Base64로 고정하는 도구도 있지만 여기서는 퍼센트 인코딩을 선택할 수 있습니다. 두 방식 모두 바이트를 보존합니다. Base64 인코딩은 바이너리에 적합한 기본값이며 실제 길이를 보고 바꿀 수 있습니다.

크기 제한이 있나요?

원본 파일과 복원 결과는 각각 600,000바이트, 전체 URI는 1,900,000자까지입니다. 이 숫자는 도구의 처리 한도입니다. 대상 환경에는 별도 한도가 있을 수 있으며 큰 리소스는 독립 파일로 관리하는 편이 편리할 수 있습니다.

데이터가 Base64인지 알려 주나요?

네. 내용의 모양을 추측하지 않고 헤더 끝의 ;base64 표시를 읽어 판단합니다. 표시가 없으면 퍼센트 방식으로 처리합니다. 순수 Base64 문자열만 붙이지 말고 data:와 MIME, 쉼표를 포함한 완전한 주소를 입력하세요.

복원된 내용은 언제 텍스트로 표시되나요?

지원되는 UTF-8 또는 ASCII로 유효하게 읽을 수 있을 때입니다. 다른 charset이나 잘못된 문자 바이트, 바이너리 제어 문자가 있으면 16진수로 표시합니다. 텍스트 표시가 안 되어도 원본 바이트 다운로드는 가능하며 대체 문자를 삽입하지 않습니다.

다른 URI 사례가 필요한가요?

삽입 전 리소스 확인

Data URI 생성기로 두 인코딩의 길이와 메타데이터를 비교하고 복원 바이트를 점검한 다음 프로젝트에 사용하세요.