개발자 / 인코딩
Data URI 생성기
모든 파일을 data URI로 변환하고, 바로 붙여넣을 수 있는 CSS 및 HTML 스니펫을 제공합니다. SVG에는 더 작은 URL 인코딩 옵션을 사용할 수 있으며, 인코딩된 파일의 크기 증가량도 확인할 수 있습니다.
Data URI 생성기: data URI(RFC 2397)는 파일의 콘텐츠를 링크나 스타일시트에 직접 넣어 별도 요청을 줄입니다. Base64 인코딩은 3바이트마다 4문자로 변환하므로 파일 크기가 약 1/3 커집니다. 텍스트인 SVG는 대신 퍼센트 인코딩할 수 있으며, %, #, <, >와 같은 문자만 이스케이프하므로 일반적으로 더 작습니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
파일은 브라우저에서 읽으며 업로드하지 않습니다.
Data URI가 작동하는 위치
Data URI는 img src, CSS url(), 아이콘의 link href, 다운로드 링크에서 사용할 수 있습니다. 브라우저는 페이지가 data URI를 최상위 페이지로 열지 못하게 차단하며, 이를 사용하는 이미지나 스타일에는 엄격한 Content Security Policy에서 data:를 허용해야 합니다.
파일이 아닌 텍스트를 인코딩하려면 Base64 인코더를 사용하고, 준비된 Base64 문자열이 있는 이미지에는 이미지를 Base64로 변환 도구를 사용하십시오.
크기 증가
Base64를 사용하면 파일 크기가 3분의 1만큼 늘어나지만, 인코딩한 텍스트가 잘 압축되므로 서버에서 텍스트를 압축하면(gzip 또는 Brotli) 증가분의 상당 부분을 줄일 수 있습니다. 실제 비용은 데이터를 별도로 캐시할 수 없고, 해당 데이터가 포함된 모든 페이지나 스타일시트를 다운로드할 때마다 다시 다운로드해야 한다는 점입니다.
사용 방법
- 파일을 선택하거나 끌어다 놓습니다. 이미지는 미리 볼 수 있습니다.
- SVG 파일은 URL 인코딩 또는 Base64 인코딩을 선택합니다.
- data URI 또는 CSS나 HTML 스니펫을 복사합니다.
개인정보 보호 및 제한사항
파일은 브라우저에서 읽으며 업로드하지 않습니다.
관련 도구
자주 묻는 질문
data URI는 언제 사용해야 하나요?
몇 킬로바이트 이하인 아이콘처럼 한 번만 사용하는 작은 파일에 적합합니다. 큰 파일은 브라우저가 캐시하고 동시에 로드할 수 있도록 별도로 제공하는 편이 좋습니다.
SVG에 URL 인코딩을 사용하는 이유는 무엇인가요?
SVG를 읽기 쉬운 상태로 유지하면서 일반적으로 Base64보다 작게 만들 수 있기 때문입니다. 큰따옴표는 작은따옴표로 바뀌므로 결과를 url("…") 또는 HTML 속성 안에 넣을 수 있습니다.
크기 제한이 있나요?
최신 브라우저는 이미지와 스타일시트에서 수 MB 크기의 data URI를 허용하지만, 큰 data URI는 파싱을 느리게 하고 페이지를 무겁게 만듭니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요