Công cụ chuyển đổi hình ảnh sang Base64

Công cụ chuyển đổi hình ảnh sang Base64 là một công cụ trực tuyến miễn phí giúp chuyển đổi bất kỳ hình ảnh nào thành chuỗi mã hóa Base64. Mã hóa Base64 biến đổi dữ liệu hình ảnh nhị phân thành văn bản ASCII thuần túy, cho phép bạn nhúng hình ảnh trực tiếp vào HTML, CSS, JavaScript, JSON, XML và nhiều định dạng khác — mà không cần tệp hình ảnh riêng biệt. Mọi thứ diễn ra trong trình duyệt của bạn: hình ảnh của bạn không bao giờ được tải lên bất kỳ máy chủ nào.

Mã hóa hình ảnh Base64 là gì?

Base64 là một sơ đồ mã hóa nhị phân sang văn bản đại diện cho dữ liệu nhị phân bằng 64 ký tự ASCII (A–Z, a–z, 0–9, +, /). Khi áp dụng cho hình ảnh, Base64 chuyển đổi các byte hình ảnh thô thành một chuỗi văn bản dài có thể được nhúng trực tiếp vào mã nguồn. Cách phổ biến nhất để sử dụng hình ảnh Base64 trong phát triển web là thông qua Data URI — một sơ đồ cho phép dữ liệu nội tuyến trong URL bằng định dạng data:[loại MIME];base64,[dữ liệu được mã hóa].

Khi nào nên sử dụng hình ảnh Base64

Khi nào KHÔNG nên sử dụng hình ảnh Base64

Mã hóa Base64 làm tăng kích thước tệp khoảng 33%. Đối với các hình ảnh lớn (ảnh chụp, banner), hãy sử dụng các tệp hình ảnh truyền thống được phân phối qua HTTP/2, hỗ trợ ghép kênh. Tránh sử dụng Base64 cho các hình ảnh lớn hơn 10–20KB trong môi trường thực tế, vì chi phí kích thước lớn hơn lợi ích của việc giảm yêu cầu HTTP. Các chuỗi Base64 lớn cũng không thể được trình duyệt lưu vào bộ nhớ đệm riêng biệt.

Định dạng hình ảnh được hỗ trợ

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

1. Tải lên hình ảnh của bạn: Kéo và thả tệp hình ảnh vào vùng tải lên, nhấp để duyệt tệp hoặc dán hình ảnh từ khay nhớ tạm bằng Ctrl+V (Cmd+V trên Mac).
2. Xem trước và xem lại siêu dữ liệu: Công cụ ngay lập tức hiển thị bản xem trước hình ảnh của bạn với siêu dữ liệu bao gồm tên tệp, kích thước, loại MIME và so sánh kích thước trực quan giữa dữ liệu gốc và dữ liệu được mã hóa.
3. Chọn định dạng đầu ra: Chuyển đổi giữa bốn tab đầu ra — Base64 thuần túy (chỉ chuỗi được mã hóa), Data URI (với tiền tố MIME), thẻ HTML <img> (sẵn sàng để dán), hoặc thuộc tính CSS background-image.
4. Sao chép kết quả: Nhấp vào nút "⧉ Sao chép" để sao chép kết quả được mã hóa vào khay nhớ tạm, sẵn sàng để dán vào mã của bạn.

Hướng dẫn định dạng đầu ra

Chuỗi Base64 thuần túy

Văn bản được mã hóa Base64 nguyên chất không có bất kỳ tiền tố nào. Sử dụng định dạng này khi bạn cần dữ liệu thô cho các triển khai tùy chỉnh, lệnh gọi API hoặc khi bạn tự thêm tiền tố MIME.

Data URI

URI dữ liệu đầy đủ bao gồm tiền tố loại MIME (ví dụ: data:image/png;base64,iVBOR...). Đây là định dạng linh hoạt nhất — nó hoạt động trực tiếp trong các thuộc tính src của HTML, các giá trị url() của CSS và tải hình ảnh bằng JavaScript.

Thẻ HTML <img>

Một phần tử hình ảnh HTML sẵn sàng sử dụng với Data URI Base64 làm src, cộng với các thuộc tính width và height để bố cục chính xác. Dán trực tiếp vào mã HTML của bạn.

CSS background-image

Một khai báo thuộc tính CSS hoàn chỉnh sử dụng background-image: url('data:...'). Thêm nó vào bất kỳ quy tắc CSS nào để sử dụng hình ảnh làm nền mà không cần tham chiếu tệp bên ngoài.

Quyền riêng tư & Bảo mật

Công cụ này xử lý mọi thứ cục bộ trong trình duyệt web của bạn bằng API FileReader của JavaScript. Hình ảnh của bạn không bao giờ được tải lên bất kỳ máy chủ nào, không bao giờ được lưu trữ và không bao giờ được truyền qua mạng. Quá trình chuyển đổi Base64 diễn ra hoàn toàn trên thiết bị của bạn, giúp công cụ này an toàn cho các hình ảnh nhạy cảm và bảo mật.

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

Mã hóa Base64 cho hình ảnh là gì?

Mã hóa Base64 chuyển đổi dữ liệu hình ảnh nhị phân thành các ký tự văn bản ASCII. Điều này cho phép bạn nhúng hình ảnh trực tiếp vào mã HTML, CSS hoặc JavaScript dưới dạng URI dữ liệu, loại bỏ nhu cầu về các yêu cầu tệp hình ảnh riêng biệt. Chuỗi được mã hóa lớn hơn khoảng 33% so với dữ liệu nhị phân gốc.

Khi nào tôi nên sử dụng hình ảnh mã hóa Base64?

Sử dụng Base64 cho các hình ảnh nhỏ như biểu tượng, logo và các thành phần giao diện người dùng (thường dưới 10KB). Nó giúp giảm các yêu cầu HTTP và đơn giản hóa việc triển khai. Tránh sử dụng cho các hình ảnh lớn vì kích thước tăng 33% sẽ làm giảm hiệu suất. Nó cũng hữu ích cho các mẫu email, tài liệu HTML một tệp và hình ảnh nền CSS.

Hình ảnh của tôi có được tải lên máy chủ nào không?

Không. Công cụ này xử lý hình ảnh hoàn toàn trong trình duyệt của bạn bằng API FileReader của JavaScript. Hình ảnh của bạn không bao giờ rời khỏi thiết bị, đảm bảo quyền riêng tư và bảo mật hoàn toàn. Quá trình chuyển đổi diễn ra ngay lập tức trên máy của bạn.

Những định dạng hình ảnh nào được hỗ trợ?

Trình chuyển đổi này hỗ trợ tất cả các định dạng hình ảnh phổ biến bao gồm PNG, JPEG, GIF, WebP, SVG, BMP và ICO. Công cụ tự động phát hiện loại MIME và tạo tiền tố URI dữ liệu chính xác cho từng định dạng.

Sự khác biệt giữa chuỗi Base64 và Data URI là gì?

Chuỗi Base64 chỉ là biểu diễn văn bản được mã hóa của dữ liệu hình ảnh. Một Data URI bao gồm một tiền tố với loại MIME (như data:image/png;base64,) tiếp theo là chuỗi Base64. Data URI có thể được sử dụng trực tiếp trong các thuộc tính src của HTML và các giá trị url() của CSS.

Tài nguyên bổ sung

• Data URLs - MDN Web Docs
• Mã hóa Base64 - MDN Web Docs
• Base64 - Wikipedia