CSS Data URI 변환기

이미지를 CSS에 직접 포함할 수 있는 Base64 데이터 URI로 변환하세요. HTML 또는 CSS 파일에서 즉시 사용할 수 있습니다. 100% 클라이언트 사이드.

모든 이미지 형식 지원

PNG, JPG, GIF, WebP, SVG 이미지를 지원합니다. MIME 타입은 파일에서 자동으로 감지됩니다.

CSS 클래스 생성기

background-image, background-size, background-repeat 속성이 포함된 완전한 CSS 클래스를 생성합니다.

원클릭 복사

생성된 CSS 코드나 원시 데이터 URI를 한 번 클릭으로 복사 — 스타일시트에 바로 붙여넣을 수 있습니다.

실시간 미리보기

생성된 CSS와 함께 이미지 미리보기를 확인하여 모든 것이 올바른지 검증하세요.

100% 클라이언트 사이드 — 데이터가 기기를 떠나지 않습니다

이미지를 여기에 놓거나 클릭하여 업로드

PNG, JPG, GIF, SVG, WebP 지원

이미지를 업로드하여 Base64 데이터 URI가 포함된 CSS를 생성하세요

1

이미지 업로드

이미지 파일(PNG, JPG, GIF, SVG, WebP)을 드래그 앤 드롭하거나 찾아보기로 선택하세요.

2

CSS 자동 생성

도구가 이미지를 Base64로 변환하고 background-image가 포함된 완전한 CSS 클래스를 생성합니다.

3

복사 및 사용

생성된 CSS 코드를 복사하여 스타일시트에 직접 붙여넣으세요.

이 도구가 안전한 이유

데이터는 기기를 떠나지 않습니다 — 모든 처리가 브라우저에서 실행됩니다.

서버 업로드 없음. 다른 도구들은 파일을 서버로 전송합니다. 저희는 그렇지 않습니다.
콘텐츠 추적 없음. 변환하는 어떤 내용도 확인, 저장 또는 기록하지 않습니다.
오프라인에서도 작동. 한 번 로드되면 인터넷 연결 없이도 도구가 작동합니다.

자주 묻는 질문

아래에서 검색하거나 가장 일반적인 질문을 둘러보세요.

background-image 속성을 사용하여 Base64로 인코딩된 이미지를 CSS 파일에 직접 삽입하는 방식으로, HTTP 요청을 한 번 줄일 수 있습니다.
작은 아이콘의 경우 요청 수를 줄여 로딩 시간을 개선합니다. 그러나 큰 이미지의 경우 CSS 파일을 크게 부풀려 렌더링 차단 지연을 유발할 수 있습니다.