작은 에셋 빠르게 인라인
아이콘, SVG, 짧은 텍스트를 페이지에 직접 포함합니다.
무료 개발자 도구
Data URI 생성기 HTML과 CSS에 에셋 인라인 삽입
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
AD
Data URI 생성기 해결하는 문제
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
MIME 실수 방지
복사 전에 MIME을 확인하거나 수정합니다.
비공개 파일을 로컬에 보관
파일은 브라우저에서만 읽힙니다.
Data URI 생성기 기능
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
파일 또는 텍스트
PNG, JPEG, SVG, 텍스트와 글꼴을 추가합니다.
자동 선택
텍스트/SVG는 URL, 바이너리는 Base64.
MIME 편집
필요하면 유형을 덮어씁니다.
세 가지 출력
Data URI, CSS, HTML을 복사합니다.
미리보기와 통계
크기와 결과를 확인합니다.
로컬 처리
업로드 없이 생성합니다.
사용 방법 Data URI 생성기
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
01
리소스 추가
텍스트를 붙여넣거나 파일을 선택합니다.
- 로컬 처리, 업로드 없음
02
MIME 확인
image/png, image/svg+xml 등을 확인합니다.
- 로컬 처리, 업로드 없음
03
인코딩 선택
자동, Base64, URL 인코딩 중 선택합니다.
- 로컬 처리, 업로드 없음
04
스니펫 복사
HTML 또는 CSS에 붙여넣습니다.
- 로컬 처리, 업로드 없음
Data URI 생성기 워크플로
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
Data URI 생성기 활용 사례
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
SVG 아이콘 인라인
아이콘, SVG, 짧은 텍스트를 페이지에 직접 포함합니다.
단일 파일 프로토타입
HTML 또는 CSS에 붙여넣습니다.
문서 예시
크기와 결과를 확인합니다.
Data URI 생성기 FAQ
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
파일이 업로드되나요?
아니요, 브라우저에서 로컬로 처리됩니다.
Base64는 언제 쓰나요?
이미지, 글꼴, 바이너리에 사용합니다.
URL 인코딩은 언제 좋나요?
SVG, CSS, JSON, 텍스트에 적합합니다.
큰 파일에 적합한가요?
아니요, 작은 에셋에 가장 좋습니다.
시작하기 Data URI 생성기
프런트엔드 개발자를 위한 무료 Data URI 생성기입니다. PNG, JPEG, SVG, 글꼴 또는 텍스트를 넣어 HTML img src와 CSS background-image용 Base64 또는 URL 인코딩 Data URI를 만듭니다.
무료 브라우저 기반 Data URI 생성기입니다.