사용 방법
- 삽입할 텍스트를 입력하거나 파일을 선택합니다.
- image/png나 image/svg+xml 같은 MIME 유형을 확인하거나 입력하고, Base64 또는 퍼센트 인코딩을 선택합니다.
- 생성된 data URI를 복사해 HTML, CSS, JSON에 넣습니다.
- 기존 data URI를 확인하려면 분석 영역에 붙여넣습니다. MIME 유형, 문자 집합, 크기와 미리 보기가 표시되며 포함된 파일을 다운로드할 수 있습니다.
Data URI 구문
RFC 2397에 정의된 data URI는 작은 파일을 URL 자체에 담아 전달합니다.
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...미디어 유형은 브라우저에 데이터를 해석하는 방법을 알려 주며, 생략하면 text/plain;charset=US-ASCII로 간주합니다. ;base64 플래그는 쉼표 뒤의 부분이 Base64라는 뜻입니다. 이 플래그가 없으면 데이터는 특수 문자를 퍼센트 인코딩한 일반 텍스트입니다.
Base64와 퍼센트 인코딩 중 무엇을 쓸까
PNG, JPEG, WebP, 글꼴, PDF 같은 바이너리 파일에는 Base64가 적합합니다. Base64를 사용하면 크기가 항상 약 33% 늘어납니다. 텍스트 형식이라면 퍼센트 인코딩이 더 작은 경우가 많습니다. 대부분의 문자는 그대로 두고 <, >, #, %, 큰따옴표 등 일부 문자만 이스케이프하면 되기 때문입니다. 그래서 SVG 아이콘에 잘 맞으며, 사람이 읽을 수 있는 결과는 gzip이나 Brotli로 더 잘 압축됩니다. 다만 ASCII가 아닌 텍스트는 바이트마다 세 문자가 되므로 한국어, 중국어, 키릴 문자 텍스트에는 대개 Base64가 더 짧습니다. 확실하지 않다면 두 옵션을 모두 시도해 보고 더 짧은 결과를 사용하십시오.
/* CSS의 퍼센트 인코딩 SVG: 내부에는 작은따옴표, #은 %23으로 표기 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }인라인이 효과적인 경우
data URI를 사용하면 HTTP 요청이 하나 줄어들지만, 데이터가 그것을 포함한 문서의 일부가 됩니다.
- 별도 캐싱 불가. HTML에 인라인한 이미지는 페이지를 열 때마다 다시 다운로드됩니다. 스타일시트에 인라인한 이미지는 그 파일과 함께 캐시되며, 이미지를 바꾸면 스타일시트 전체의 캐시가 무효화됩니다.
- 첫 렌더링 지연. CSS에 들어 있는 큰 data URI는 렌더링을 늦춥니다. 브라우저가 먼저 스타일시트 전체를 다운로드하고 파싱해야 하기 때문입니다.
- 크기 증가. Base64는 크기를 3분의 1가량 늘리며, HTML이나 CSS를 압축해도 그 일부만 줄어듭니다.
HTTP/2와 HTTP/3에서는 추가 요청의 비용이 적으므로 아이콘, 작은 플레이스홀더, 핵심 배경 이미지처럼 몇 킬로바이트 정도의 작은 리소스만 인라인하고 나머지는 일반 파일로 제공하십시오. 콘텐츠 보안 정책(CSP)을 적용한 사이트에서 인라인 이미지와 글꼴을 불러오려면 img-src 또는 font-src에 data:를 허용해야 합니다.
자주 묻는 질문
data URI에 크기 제한이 있습니까?
RFC 2397에는 제한이 없으며, 최신 브라우저는 이미지와 스타일시트에서 수 메가바이트 크기의 data URI도 받아들입니다. 그래도 큰 data URI는 좋은 선택이 아닙니다. 페이지를 무겁게 만들고, 별도로 캐시할 수 없으며, 파싱하는 데도 시간이 더 걸립니다.
data URI로 연결된 링크를 클릭해도 열리지 않는 이유는 무엇입니까?
대부분의 브라우저는 피싱을 막기 위해 웹 페이지가 메인 창을 data: URL로 이동시키는 것을 차단합니다. data URI는 이미지, CSS, 다운로드 링크 안에서 사용하거나, 이 페이지의 분석 기능에 붙여넣어 미리 보고 내용을 다운로드하십시오.
HTML과 CSS에서 data URI는 어떻게 사용합니까?
<img src="data:image/png;base64,...">, CSS에서는 background-image: url("data:image/svg+xml,...")처럼 사용합니다. CSS에서는 값을 따옴표로 감싸십시오. 퍼센트 인코딩한 SVG라면 특히 중요합니다.문자 집합을 지정해야 합니까?
text/plain이나 text/html 같은 텍스트 유형이라면 지정해야 합니다. 미디어 유형 뒤에 ;charset=UTF-8을 추가하십시오. 그렇지 않으면 기본값인 US-ASCII로 해석되어 글자가 깨질 수 있습니다. image/png 같은 바이너리 유형에는 문자 집합이 필요하지 않습니다.