RevealTheme logo

Trình chuyển đổi hình ảnh sang Base64

Chuyển đổi bất kỳ tệp hình ảnh nào thành một data URL Base64. Dán kết quả trực tiếp vào CSS, HTML hoặc JSON.

Cách sử dụng công cụ này

  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.

Trình chuyển đổi hình ảnh sang Base64 là gì?

Một data URL Base64 nhúng trực tiếp nội dung nhị phân của hình ảnh vào HTML hoặc CSS. Điều này loại bỏ yêu cầu HTTP cho các biểu tượng và đồ họa nhỏ, giúp cải thiện thời gian tải cảm nhận được. Sự đánh đổi: mã hóa Base64 làm tăng kích thước tệp lên khoảng 33 %, vì vậy nó lý tưởng cho các biểu tượng dưới 5 KB.

Các trường hợp sử dụng phổ biến

  • 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.

Câu hỏi thường gặp

Khi nào tôi nên dùng hình ảnh ở dạng Base64?
Đối với các biểu tượng, logo hoặc sprite nhỏ mà bạn muốn loại bỏ một yêu cầu HTTP. Hãy tránh dùng cho hình ảnh lớn: phần tải phụ của việc mã hóa sẽ triệt tiêu mọi lợi ích.
Tôi có thể dùng cái này trong CSS không?
Có: dán data URL trực tiếp vào một khai báo background-image: url(...).

Công cụ liên quan