Base64 là gì?Base64 là một chương trình mã hóa chuỗi ký tự bằng cách sử dụng thay thế các ký tự trong bảng mã ASCII 8 bit thông dụng thành bảng mã 6 bit. Nó thường được sử dụng để mã hóa các tập tin đa phương tiện [hình ảnh, âm thanh, video,…]. Ký tự 64 trong Base64 là đại diện cho 64 ký tự trong bảng mã ASCII. Base64 thường được sử dụng trong quá trình tải email. Tuy nhiên, ngày nay người ta đã sử dụng nó vào việc truyền tải hình ảnh trên trang web
Cách sử dụng Base64 Image Trước tiên, để sử dụng được thì chúng ta cần phải chuyển đổi từ định dạng hình ảnh sang định dạng ký tự ASCII bằng một số công cụ trực tuyến như sau. Công cụ lập trình web, Trình chuyển đổi URI dữ liệu ngữ nghĩa web. Đây là hai công cụ chuyển đổi trực tuyến phổ biến biến được sử dụng, cách sử dụng cũng đơn giản thôi, chúng ta chỉ việc chọn tệp cấu hình cần chuyển đổi, sau đó nhấp vào chuyển đổi. Chương trình sẽ tải hình ảnh lên máy chủ và sẽ tiến hành xử lý để kết quả trả về ở dạng đã mã hóa Base64
Kết quả trả về có 2 dạng, một là nó chắc chắn được chèn vào trong thẻ img và chúng ta chỉ việc sao chép về và sử dụng thôi. Hoặc nó trả về ở dạng background-image để chúng ta chèn vào css. Ví dụ
.base64 {
background-image:url['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAT.....'];
background-repeat: repeat;
}
Đây là kết quả khi izwebz sử dụng tính năng Page Speed Optimization của nhà cung cấp dịch vụ Dreamhost
Điểm hại khi sử dụng Base64 imageNhư các bạn đã thấy đấy, việc sử dụng hoàn toàn không khó, chỉ việc click, copy và past. Tuy nhiên, chỉ khi sử dụng nó thì bạn mới thấy nó có những điểm bất lợi như sau
- Đoạn ký tự được chuyển đổi sẽ có dung lượng lớn hơn tệp gốc khoảng 3-5%. Đối với ảnh lớn có thể tăng lên 10-20%
- Hình ảnh được tạo ra khi sử dụng Base64 Hình ảnh sẽ không được lưu vào bộ nhớ cache trong trình duyệt. Do đó, khi bạn tải lại thì cũng có nghĩa là sẽ tải lại toàn bộ cấu hình
- Kết quả chuổi ký tự hình ảnh Base64 dòng rất dài, để nhanh chóng làm rối đội hình css hoặc html. Đặc biệt là các ảnh có kích thước tệp lớn
- Nếu bạn muốn thay đổi hoặc bổ sung thêm 1 điểm gì đó trong hình ảnh, bạn buộc phải chuyển đổi lại hình ảnh đó
- Nâng cao hiệu xuất khi tải trang web. Nghệ có vẽ cực kỳ vô lý vì dung lượng của ảnh base64 lơn hơn cả file gốc mà. Tuy nhiên, bạn hãy quan sát vấn đề từ nhiều phía. Mọi tài nguyên trên trang web khi truyền tải từ máy chủ đến máy khách đều phải thông qua các yêu cầu HTTP [tất cả các hình ảnh, javascript, biểu định kiểu,…] và sẽ có rất nhiều yêu cầu được đưa ra [đặc biệt là các hình ảnh được sử dụng trong . Điều đó làm cho máy chủ và cả trình duyệt phải mất thời gian đơn giản để tiến hành xử lý các yêu cầu
- Nhưng khi dùng ảnh base64 thì chuỗi ký tự hình ảnh đó đã được đính kèm sẵn trong tệp định kiểu hoặc trong thẻ img của tệp html rồi, tất cả chỉ cần 1 yêu cầu duy nhất để tải biểu định kiểu về thôi là chúng ta có cả hình . Rất nhanh chóng và đạt hiệu quả truyền tải cao
- Nếu sử dụng hình ảnh base64 cho các tập tin như biểu tượng rất hiệu quả? . Ví dụ, nếu sử dụng trong các thư viện hoặc album ảnh sẽ rất hiệu quả. Vì sẽ có rất nhiều yêu cầu được đưa ra để tải hình ảnh và đối với các ảnh có dung lượng lớn nên các yêu cầu sẽ phải xử lý tuần tự, tải xong nhóm yêu cầu tệp ảnh này thì mới xử lý tiến trình tải nhóm ảnh khác. Do đó, sử dụng Base64 trong trường hợp này sẽ rất tiện lợi
Tham khảo. mạng xã hội