Data URI 생성기이란?
Data URI 생성기는 파일을 base64 인코딩된 Data URI로 변환하여 HTML, CSS 또는 JavaScript에 직접 삽입할 수 있게 합니다. 아이콘이나 폰트 같은 소형 리소스에 대한 추가 HTTP 요청을 제거합니다.
최대 20 MB 파일을 드롭하면 MIME 타입을 감지해 바이트를 base64로 인코딩하고, 바로 붙여 쓸 수 있는 세 가지 스니펫(원본 data URI, CSS background-image 규칙, HTML img 태그)을 줍니다. 이미지는 라이브 프리뷰가 함께 표시되어, 운영에 올리기 전에 빈 화면이나 깨진 출력을 미리 확인할 수 있습니다. 텍스트를 붙여넣어 SVG나 JSON 문자열을 인코딩하거나, 인코딩 전에 큰 이미지를 줄여 URI를 작게 유지하거나, MIME 타입이 잘못 감지되면 바로잡거나, 여러 파일을 한 번에 인코딩하거나, 원격 파일을 URL에서 바로 가져오거나, 디코딩 모드로 전환해 data URI를 붙여넣고 원본 파일을 다시 내려받을 수도 있습니다.
사용 방법
- 선택기로 파일을 업로드하거나, 텍스트 모드로 전환해 문자열(SVG, JSON, CSS)을 붙여넣어 인코딩하세요.
- 파일이 base64로 인코딩되고 올바른 MIME 타입이 포함된 완전한 Data URI가 생성됩니다.
- Data URI를 복사하여 img src 속성, CSS background-image 또는 JavaScript 코드에 사용하세요.
사용 시기
- 에셋을 호스팅하지 않는 단일 파일 HTML 데모에 작은 로고나 아이콘을 넣을 때.
- 원격 로딩이 차단되어도 이메일에서 이미지가 보이도록 인라인 삽입할 때.
- 렌더링을 막는 요청을 줄이려고 폰트나 SVG를 CSS에 직접 붙여 넣을 때.
결과
2KB favicon.png를 Data URI로 변환하여 HTML에 직접 붙여넣으면, 모든 페이지 로드에서 네트워크 요청이 하나 줄어듭니다.
자주 묻는 질문
- 인코딩된 data URI가 원본 파일보다 약 33% 큰 이유는?
- Base64는 바이너리 3바이트를 ASCII 문자 4개로 표현하므로 33% 늘어납니다. HTTP 응답에서 gzip을 켜면 대부분 회수되지만, 디스크의 HTML이나 CSS 파일은 실제로 원본 자산보다 큽니다.
- data URI를 어디까지 크게 써도 되나요?
- 인라인 용도라면 인코딩 전 약 10 KB가 적정선입니다. 그 이상도 브라우저는 해석하지만 캐시 이점이 사라지고(페이지마다 재해석) HTML이나 CSS 편집이 무거워집니다. 더 큰 자산은 일반 호스팅이 낫습니다.
- CSS 배경 이미지로 data URI를 쓸 수 있나요?
- 쓸 수 있습니다. 도구가 완성된 CSS 규칙을 그대로 줍니다. URI를 url()로 감싸 background-image에 넣으면 브라우저가 첫 페인트 때 디코딩합니다. 작은 아이콘이 인라인 상태로 유지되어 초기 렌더를 지연시키는 네트워크 요청이 없어집니다.
- 브라우저는 data URI를 일반 이미지처럼 캐시하나요?
- 아닙니다. data URI는 부모 문서의 일부라서 문서가 캐시될 때만 함께 캐시됩니다. 같은 이미지를 20개 페이지에서 참조하면 20번 다시 해석됩니다. 페이지 간 공유 자산은 일반 호스팅 URL이 전체적으로 더 빠릅니다.
- HTML 이메일에서 data URI가 작동하나요?
- Gmail과 Apple Mail은 표시합니다. Windows 데스크톱 Outlook은 제거합니다. 폭넓은 호환을 원한다면 HTML 본문에 data URI를 넣는 대신, CID로 참조되는 첨부 파트로 이미지를 붙이는 편이 안전합니다.