Base64 image – Lợi hay hại?

Tóm tắt

Base64 là một thuật ngữ được sử dụng rất rộng rãi trên thế giới. Tuy nhiên, việc áp dụng Base64 vào website chỉ mới được áp dụng trong ít năm trở lại đây. Vậy Base64 là gì? Và sử dụng nó và website có những lợi ích/tổn hại nào? Tôi sẽ hướng dẫn các bạn các sử dụng cũng như phân tích mặt lợi hại của nó trong bài viết này.

Base64 là gì?

Base64 là một chương trình mã hóa chuỗi ký tự bằng cách 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 việc truyền 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 website.

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: Web coder tools, Web Semantics Data URI Converter. Đây là hai công cụ chuyển đổi online phổ biến được dùng, cách sử dụng cũng đơn giản thôi, chúng ta chỉ việc chọn file hình cần chuyển đổi, sau đó nhấp vào convert. Chương trình sẽ upload hình ảnh lên server và sẽ tiến hành xử lý để kết quả trả về ở dạng đã encode Base64.
Kết quả trả về có 2 dạng, một là nó chèn hẳn vào trong thẻ img và chúng ta chỉ việc copy 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ụ:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAT.....">

Hoặc chúng ta có thể dung với selector trong css

.base64 {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAT.....');
    background-repeat: repeat;
}

Page speed optimize

Nắm bắt được nhu cầu hiện tại. Do đó, một số nhà cung cấp hosting đã đi kèm dịch vụ có tên là Page Speed Optimization. Khi bạn sử dụng hosting của họ và kích hoạt chứ năng đó, hosting sẽ tự động chuyển đổi kết quả trả về cho client là hình ảnh đã được convert. Ngoài ra, các tập tin javascript và css đều được compress lại. Rất tiện dụng và không phải mất nhiều thời gian.

Đâ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 dùng Base64 image

Như 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 conver sẽ có dung lượng lớn hơn file gốc khoảng 3-5%. Đối với ảnh lớn có thể lên đến 10-20%
• Hình ảnh được tạo ra khi dùng Base64 Image sẽ không được lưu cache ở trình duyệt. Do đó, khi bạn load lại thì cũng có nghĩa là sẽ load lại toàn bộ hình.
• Kết quả chuổi ký tự hình ảnh Base64 rất dài dòng, để dàng làm rối đội hình css hoặc html. Đặc biệt là các hình ảnh có kích thước file lớn.
• Nếu bạn muốn thay đổi hoặc có bổ sung thêm 1 điểm gì đó trong hình ảnh, bạn buộc lòng phải conver lại hình ảnh đó.

Điểm lợi của Base64 image

Cả đám hại phía trên có lẽ đã làm cho bạn hơi bị nản khi dùng base64 image. Tuy nhiên, hãy xem các phân tích về mặt lợi mà nó đem tới cho chúng ta khi áp dụng vào website.

• Nâng cao hiệu xuất khi tải website: Nghe có vẽ cực kì vô lý vì dung lượng của base64 image 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 website khi truyền tải từ server đến client đều phải thông qua các HTTP request (tất cả các hình ảnh, javascript, stylesheet,…) và sẽ có rất nhiều request được đưa ra (đặc biệt là các hình ảnh dùng trong stylesheet). Điều đó làm cho server và cả browser phải mất thời giản để tiến hành xử lý các request.
• Nhưng khi dùng base64 image thì chuỗi ký tự hình ảnh đó đã được đính kèm sẵn trong tập tin stylesheet hoặc trong thẻ img của tập tin html rồi, tất cả chỉ cần 1 request duy nhất để tải stylesheet về thôi là chúng ta có cả hình ảnh trong đó. Rất nhanh chóng và đạt hiệu suất truyền tải cao.
• Nếu sử dụng base64 image cho các tập tin như icon rất hiệu quả? Vậy dùng cho hình to có hiệu quả không? Tất nhiên, nhưng mà phải tùy từng trường hợp. Ví dụ, nếu sử dụng trong các gallery hoặc album ảnh sẽ rất hiệu quả. Vì sẽ có rất nhiều request đưa ra để tải hình ảnh, và đối với các ảnh có dung lượng lớn thì các request sẽ phải xử lý tuần tự, tải xong nhóm request tập tin ảnh này thì mới tiến hành tải nhóm ảnh khác. Do đó, dùng Base64 trong trường hợp này sẽ rất tiện.

Dùng hay không?

Tôi biết khi bạn đọc đến dòng này thì có sẽ một số bạn đã quyết định được dùng hay không? Tuy nhiên, cũng sẽ có một nhóm bạn đang bối rối, không biết có nên dùng không? Vậy, nếu bạn là một người thích khám phá và học hỏi. Hãy trải nghiệm thử xem nhưng gì tôi nói ở trên có đúng với thực tế không? Rồi bạn sẽ có được kết luận là dùng hay không dùng.

Tham khảo: bizweb