Trình chuyển hình ảnh → Base64

Mã hóa bất kỳ hình ảnh nào thành URI dữ liệu Base64, hoặc dán một URI dữ liệu để giải mã trở lại thành hình ảnh. Sao chép kết quả hoặc lấy đoạn CSS url(). Không có gì rời khỏi thiết bị của bạn.

Cách Hình ảnh sang Base64 hoạt động

Công cụ chuyển ảnh sang Base64 đọc file ảnh của bạn và mã hóa nó dưới dạng data URI Base64 có thể nhúng trực tiếp vào HTML, CSS hoặc JSON mà không cần yêu cầu file riêng. Quá trình chuyển đổi sử dụng FileReader API trong trình duyệt; không byte nào từ ảnh của bạn được gửi đến máy chủ. Bạn cũng có thể dán chuỗi Base64 vào để giải mã và xem trước ảnh, tất cả đều cục bộ.

Data URI Base64 lớn hơn bản nhị phân gốc khoảng 33% vì mỗi nhóm ba byte mở rộng thành bốn ký tự ASCII. Sự tăng kích thước này là sự đánh đổi mong đợi cho sự tiện lợi của việc nhúng ảnh vào tài liệu hoặc stylesheet. Công cụ hiển thị cả chuỗi Base64 thô và đoạn code thẻ img HTML sẵn dùng cùng đoạn background-image CSS để sao chép nhanh vào dự án của bạn.

Tác giả: Bastien Sulyan

Cách sử dụng Hình ảnh sang Base64, từng bước

Kéo thả file ảnh vào khu vực tải lên hoặc nhấp để duyệt file. Định dạng được chấp nhận: JPEG, PNG, WebP, GIF, SVG.
Data URI Base64 xuất hiện ngay lập tức trong trường đầu ra.
Sao chép chuỗi Base64 thô, hoặc dùng đoạn code thẻ img HTML hoặc background-image CSS đã định dạng sẵn.
Để giải mã, dán chuỗi Base64 vào trường nhập và chuyển sang chế độ giải mã để xem trước ảnh.
Nhấp nút sao chép bên cạnh bất kỳ đoạn code nào để sao chép vào clipboard.

Trường hợp sử dụng thường gặp

Một lập trình viên front-end nhúng biểu tượng nhỏ dưới dạng data URI trong file CSS để loại bỏ yêu cầu HTTP bổ sung.
Một lập trình viên nhúng spinner tải nhỏ dưới dạng thuộc tính src Base64 để ảnh giữ chỗ sẵn sàng trước khi gói JavaScript tải.
Kỹ sư QA sao chép Base64 của ảnh kiểm tra để dán trực tiếp vào payload JSON cho bài kiểm tra API.
Người tạo template email nhúng logo chữ ký dưới dạng data URI Base64 vì một số trình khách email chặn yêu cầu ảnh bên ngoài.

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

Tại sao đầu ra Base64 lại lớn hơn khoảng một phần ba so với file gốc của tôi?

Mã hóa Base64 biểu diễn mỗi ba byte nhị phân thành bốn ký tự ASCII (tỉ lệ 4/3). Ảnh 100 KB ở dạng nhị phân trở thành khoảng 133 KB dưới dạng chuỗi Base64. Đây là đặc tính vốn có của sơ đồ mã hóa, không phải giới hạn của công cụ.

Nội dung ảnh có được truyền đến máy chủ trong quá trình mã hóa không?

Không. FileReader API đọc file nhị phân từ ổ đĩa cục bộ của bạn và truyền kết quả trực tiếp đến hàm mã hóa JavaScript trong tab trình duyệt. Dữ liệu ảnh không rời thiết bị của bạn.

Tôi có thể dùng đầu ra data URI trong bất kỳ ngữ cảnh HTML hoặc CSS nào không?

Có. Data URI bắt đầu bằng data:image/jpeg;base64, theo sau là chuỗi đã mã hóa có thể dùng làm thuộc tính src của thẻ img hoặc giá trị url() trong thuộc tính background-image CSS. Tất cả trình duyệt hiện đại hỗ trợ data URI. Data URI rất lớn có thể làm chậm kết xuất trang, nên việc nhúng thường được dành cho ảnh nhỏ dưới vài kilobyte.

Công cụ có hỗ trợ GIF động không?

Công cụ mã hóa toàn bộ nội dung nhị phân của bất kỳ file nào bạn cung cấp, kể cả GIF động. Data URI kết quả, khi dùng làm src của thẻ img, sẽ phát hoạt ảnh trong các trình duyệt hỗ trợ GIF động.

Làm thế nào để đi theo chiều ngược lại và giải mã chuỗi Base64 trở lại ảnh?

Chuyển công cụ sang chế độ giải mã, dán chuỗi Base64 của bạn (có hoặc không có tiền tố data:), và công cụ sẽ giải mã nó rồi cung cấp ảnh nhị phân để tải xuống cũng như hiển thị xem trước.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ ảnh