RevealTheme logo

이미지 Base64 변환기

모든 이미지 파일을 Base64 데이터 URL로 변환합니다. 결과를 CSS, HTML 또는 JSON에 바로 붙여넣으세요.

이 도구 사용 방법

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

이미지 Base64 변환기란 무엇인가요?

Base64 데이터 URL은 이미지의 바이너리 내용을 HTML 또는 CSS에 직접 포함합니다. 이는 아이콘과 작은 그래픽에 대한 HTTP 요청을 없애 체감 로딩 시간을 개선할 수 있습니다. 단점: Base64 인코딩은 파일 크기를 약 33% 늘리므로, 5KB 미만의 아이콘에 가장 적합합니다.

일반적인 사용 사례

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

자주 묻는 질문

언제 Base64 이미지를 사용해야 하나요?
HTTP 요청을 없애고 싶은 아이콘, 로고 또는 작은 스프라이트에 사용하세요. 큰 이미지에는 피하세요: 인코딩 오버헤드가 이점을 상쇄합니다.
이것을 CSS에서 사용할 수 있나요?
예: 데이터 URL을 background-image: url(...) 선언에 바로 붙여넣으세요.

관련 도구