Base64.imMã hóa và giải mã Base64 trực tuyến(Công cụ Base64 trực tuyến tốt nhất)
Hướng dẫn sử dụng Base64.im
1. Tại sao nên sử dụng mã hóa Base64?
Mã hóa Base64 là cách chuyển đổi dữ liệu nhị phân (chẳng hạn như tệp hình ảnh) sang định dạng văn bản và lý tưởng cho các trường hợp sau:
- Tải nhanh các hình ảnh nhỏ: Nhúng hình ảnh Base64 vào tệp HTML hoặc CSS để tránh các yêu cầu HTTP bổ sung và tăng tốc độ tải.
- Chữ ký email HTML: Nhúng hình ảnh qua mã hóa Base64 để tránh kích hoạt cảnh báo "Hiển thị hình ảnh" trong ứng dụng email của bạn.
- Bản trình diễn một tệp: Tạo mô hình một tệp hoặc trang demo cho khách hàng không yêu cầu tài nguyên bên ngoài.
2. Các định dạng hình ảnh được hỗ trợ
Công cụ này hỗ trợ mã hóa các định dạng hình ảnh phổ biến sau: .jpeg, .png, .gif, .webp, .svg, .BMP và .bmp.
3. Cách dùng base64.im để chuyển đổi hình ảnh
Tải hình ảnh lên: Chọn hình ảnh bạn muốn mã hóa bằng cách kéo tệp hình ảnh vào cửa sổ trình duyệt hoặc nhấp vào nút Tải lên.
Xem kết quả: Sau khi tệp được tải lên, bạn có thể thấy chuỗi Base64 bên dưới.
Giới hạn tải lên: Bạn có thể tải lên tối đa 20 tệp cùng một lúc.
4. Sử dụng hình ảnh được mã hóa Base64 làm nguồn hình ảnh HTML
Chuỗi Base64 có thể được sử dụng làm giá trị thuộc tính `src` của thẻ `img` trong HTML. Đây là một ví dụ:
<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">
Các bước sử dụng:
① Nhấp vào nút sao chép do công cụ cung cấp để sao chép chuỗi Base64 vào bảng tạm.
② Nếu trình duyệt của bạn không hỗ trợ sao chép trực tiếp, bạn có thể sao chép chuỗi từ hộp thoại theo cách thủ công.
③ Dán chuỗi vào thuộc tính `src` trong tệp HTML.
Bạn có thể xem bản demo hình ảnh base64 trên CodePen.
5. Sử dụng ảnh mã hóa Base64 làm nền CSS
Chuỗi Base64 cũng có thể được sử dụng làm giá trị của thuộc tính CSS `background` để xác định hình nền. Đây là một ví dụ:
.my-class {
background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}
Các bước sử dụng:
① Nhấp vào nút sao chép của công cụ để sao chép chuỗi Base64 vào bảng tạm.
②. Nếu không có nút sao chép, bạn có thể sao chép chuỗi từ hộp thoại theo cách thủ công.
③ Dán chuỗi vào tham số `url()` trong tệp CSS.
Bạn có thể xem bản demo CSS base64 trên CodePen.
6. Ghi chú
Mã hóa Base64 phù hợp với hình ảnh nhỏ. Tệp lớn có thể làm tăng kích thước tệp. Không nên sử dụng mã hóa lớn hoặc tài nguyên yêu cầu tải thường xuyên.
Hãy đảm bảo rằng chuỗi được mã hóa đáp ứng yêu cầu của dự án và hiển thị chính xác trên các thiết bị khác nhau.
Qua các bước trên, bạn có thể dễ dàng sử dụng các công cụ Base64 để hoàn thành các tác vụ mã hóa hình ảnh và nâng cao hiệu quả phát triển!