data URI를 만드는 방법
- 모드를 고르세요. 텍스트에서(기본값)는 입력하거나 붙여넣은 내용을 인코딩합니다. 파일에서는 놓거나 붙여넣거나 선택한 어떤 유형의 파일이든 받습니다. 분석은 반대로 URI를 분해합니다.
- 텍스트에서에서는 MIME 유형(예:
text/css,application/json), 문자 인코딩, 인코딩(Base64 또는 URL 인코딩)을 설정하세요. 파일에서에서는 MIME 유형이 파일에서 채워지며 편집할 수 있습니다. - 출력 형식을 고르세요. Data URI, CSS
url(), 다운로드 이름이 붙은 HTML<a>, Markdown이 있으며, 이미지에는 HTML<img>, 글꼴에는@font-face가 추가로 나타납니다. - 출력 복사를 누르세요. 파일 다운로드는 페이로드 자체를 저장하고, .txt로 저장은 출력 텍스트를 저장합니다.
버튼 아래의 페이로드는 데이터의 크기, URI 길이는 결과의 크기, 오버헤드는 그 차이를 퍼센트로 나타냅니다.
data URI 문법
data URI는 파일 전체를 URL 하나에 담습니다.
data:[<media type>][;charset=<charset>][;base64],<data>
| 부분 | 예시 | 참고 |
|---|---|---|
| 미디어 유형 | image/png, text/css | 선택 사항. 비우면 text/plain;charset=US-ASCII |
| 파라미터 | ;charset=utf-8 | 텍스트 유형용. ;key=value 쌍을 더 붙일 수 있음 |
;base64 | ;base64 | 데이터가 Base64임. 없으면 퍼센트 인코딩 |
| 데이터 | 쉼표 뒤 | 페이로드 |
몇 가지 예시입니다.
| Data URI | 내용 |
|---|---|
data:,Hello%2C%20World%21 | 텍스트 Hello, World!, 유형은 암시적 |
data:text/plain;charset=utf-8;base64,SGVsbG8sIFdvcmxkIQ== | 같은 텍스트의 Base64 |
data:text/css,body%7Bcolor:%23333%7D | URL 인코딩된 CSS 규칙 |
data:application/json;base64,eyJvayI6dHJ1ZX0= | {"ok":true} |
데이터가 비어 있어도 쉼표는 반드시 있어야 합니다. data:,는 올바른 빈 URI입니다.
Base64인가 URL 인코딩인가
두 인코딩 모두 올바른 URI를 만들지만 크기와 가독성이 다릅니다.
| 페이로드 | Base64 URI | URL 인코딩 URI |
|---|---|---|
text/plain;charset=utf-8인 Hello, World! | 57자 | 45자 |
text/css인 body{color:#333} | 45자 | 36자 |
application/json인 {"ok":true} | 45자 | 41자 |
text/html;charset=utf-8인 <h1>Héllo</h1> | 56자 | 56자 |
일반 ASCII 텍스트는 URL 인코딩이 더 짧고 소스에서 읽을 수도 있습니다. 비 ASCII 바이트는 하나에 세 글자씩 들고(é는 %C3%A9), 한글 한 글자는 UTF-8로 3바이트라 아홉 글자가 되므로 다른 문자 체계의 텍스트는 금세 Base64가 유리해집니다. 이미지, 글꼴, PDF 등 바이너리 파일에는 Base64를 쓰세요. 바이너리 데이터에 URL 인코딩을 고르면 생성기가 경고합니다.
여기서의 URL 인코딩은 보수적입니다. 영문자, 숫자, - . _ ~ ! $ * + , ; = : @ / ?는 그대로 두고 #, %, 따옴표, 괄호, 공백을 포함한 나머지는 모두 이스케이프합니다. 브라우저가 #를 프래그먼트의 시작으로 읽기 때문에 #를 그대로 두면 URI가 거기서 끝나 버립니다. SVG에는 더 짧은 세 번째 방법이 SVG를 Data URI로에 있습니다.
data URI가 작동하는 곳
- 이미지:
<img src>, CSSbackground-image,<link rel="icon">, 동영상의poster. - 글꼴:
@font-face의src. 작은 아이콘 글꼴 하나에 편리합니다. MIME 유형이 글꼴이면 생성기가 규칙을 만들어 줍니다. - 다운로드:
<a href="data:..." download="report.csv">로 서버 없이 페이지에서 만든 파일을 내려받습니다. - 스타일시트와 스크립트: 페이지의 콘텐츠 보안 정책이
data:를 허용할 때<link href>나<script src>로 불러옵니다. - 테스트 픽스처와 JSON 페이로드: 작은 파일을 인라인으로 넣어야 할 때입니다.
어디서나 작동하지는 않습니다. Chrome과 Firefox는 페이지가 시작한 탭 전체의 data: URL 이동을 차단하므로 data:text/html,... 링크는 클릭해도 아무 일도 일어나지 않습니다. 콘텐츠 보안 정책에서는 img-src, font-src 등 해당 지시문에 data:가 있어야 합니다. Gmail을 비롯한 많은 웹메일 클라이언트는 data URI 이미지를 아예 제거합니다. 이메일 속 Base64를 참고하세요.
크기와 성능
Base64는 바이너리 데이터를 약 33% 키우며, URI는 별도의 캐시 항목 없이 그것을 담은 페이지나 스타일시트마다 반복됩니다. 몇 킬로바이트짜리 작은 에셋이라면 괜찮은 거래지만 사진에는 나쁜 선택입니다. 구체적인 수치는 data URI 성능에서 다룹니다. 이미지라면 이미지를 Base64로에서 인코딩 전에 크기 조정과 변환을 할 수 있습니다.
코드에서 data URI 만들기
JavaScript에서 URL 인코딩된 텍스트:
const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up
Python에서 Base64 JSON:
import base64, json
obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=
자세한 내용은 JavaScript에서 Base64와 Python에서 Base64에 있습니다. 어딘가에서 발견한 data URI를 검사하려면 Data URI 파서를 사용하세요.
자주 묻는 질문
data URI와 data URL은 어떻게 다른가요?
실제로는 차이가 없습니다. RFC 2397은 “data” URL 스킴이라고 부르고 브라우저와 Fetch 표준도 data URL이라고 합니다. data URI는 같은 data: 문법을 가리키는, 더 오래되었지만 똑같이 흔한 이름입니다.
언제 Base64 대신 URL 인코딩을 써야 하나요?
CSS, JSON, SVG처럼 짧고 대부분 ASCII인 텍스트라면 URL 인코딩이 더 짧고 읽기도 쉬운 경우가 많습니다. 바이너리 파일은 퍼센트 인코딩이 대부분의 바이트를 세 글자로 바꾸므로 Base64가 항상 더 작습니다.
data URI에 ;charset=utf-8이 필요한가요?
비 ASCII 문자가 하나라도 있는 텍스트라면 필요합니다. 없으면 text/plain data URI는 기본값인 US-ASCII가 되어 é나 €, 한글이 엉뚱한 문자 두세 개로 깨질 수 있습니다. 이미지와 그 밖의 바이너리 유형에는 charset을 붙이지 않습니다.
data: 링크를 클릭해도 아무것도 열리지 않는 이유는 무엇인가요?
Chrome과 Firefox는 피싱에 널리 쓰였다는 이유로 페이지가 탭 전체를 data: URL로 이동시키는 것을 차단합니다. 이미지, 스타일시트, 글꼴, <a download>를 쓴 다운로드는 여전히 작동합니다.
data URI에 크기 제한이 있나요?
제한은 브라우저마다 다르고 이미지에는 넉넉하지만, 아주 긴 URI는 페이지를 느리게 만들고 일부 도구는 잘라 버립니다. 생성기는 2 MB를 넘으면 경고합니다. 그만큼 크다면 대신 파일을 링크하세요.