Data URI 핸들러
파일 임베딩을 위한 Base64 데이터 URI를 생성하거나 디코딩합니다.
Data URI 처리기 정보
Data URI 처리기를 사용하면 모든 파일을 HTML, CSS 또는 JavaScript에 직접 포함하기 위한 Base64 Data URI로 인코딩하고, 기존 Data URI를 원래 파일 콘텐츠로 다시 디코딩할 수 있습니다. Data URI는 RFC 2397 형식 `data:[<mediatype>][;base64],<data>`를 따르며, 추가 HTTP 요청 없이 에셋을 인라인으로 포함할 수 있게 해줍니다. SVG 아이콘, 글꼴 또는 작은 이미지와 같은 작은 에셋을 인라인화하면 중요한 리소스의 페이지 로드 지연 시간을 의미 있게 줄일 수 있습니다. 모든 인코딩, 디코딩, MIME 유형 감지 및 파일 미리보기는 서버 업로드 없이 브라우저에서 완전히 이루어집니다.
사용 방법
인코딩하려면 파일을 업로드하거나 원시 텍스트를 붙여넣고 드롭다운에서 올바른 MIME 유형을 선택합니다. 도구는 src, href 또는 url() 속성에 붙여넣을 준비가 된 완전한 RFC 2397 준수 Data URI 문자열을 생성합니다. 디코딩하려면 기존 Data URI를 입력 필드에 붙여넣고 Decode를 클릭하여 포함된 콘텐츠를 추출하고, 이미지 또는 SVG를 인라인으로 미리 보고, 원본 파일을 다운로드합니다. 모든 처리는 클라이언트 측에서 이루어지므로 파일이 브라우저를 떠나지 않습니다.
주요 사용 사례
- 추가 HTTP 요청을 제거하고 중요 렌더링 경로 지연 시간을 줄이기 위해 작은 SVG 아이콘, 스피너 또는 UI 이미지를 HTML 또는 CSS에 직접 포함하는 프론트엔드 개발자를 지원합니다.
- 외부 리소스 로딩을 차단하는 클라이언트에서 일관된 렌더링을 보장하기 위해 CSS 스타일 블록에 사용자 정의 웹 글꼴 및 로고 이미지를 Base64 Data URI로 인라인화하는 이메일 템플릿 디자이너를 지원합니다.
- 숨겨진 페이로드 콘텐츠를 드러내기 위해 피싱 HTML 첨부 파일 또는 난독화된 스크립트 태그에서 발견된 의심스러운 Data URI를 디코딩하는 보안 연구원을 지원합니다.
- 모든 에셋을 인라인으로 포함하는 완전히 독립적인 단일 파일 HTML 데모, 오프라인 문서 페이지 또는 휴대용 도구 위젯을 만드는 웹 개발자를 지원합니다.
- CSS-in-JS 스타일 컴포넌트를 위한 Base64 인코딩 배경 이미지 Data URI를 생성하거나 아이콘 글꼴을 위한 인라인 SVG Data URI를 생성하는 빌드 도구 작성자를 지원합니다.