Base64 image - Đó là gì và cần lưu ý những gì?

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à áp dụng nó vào blog hay website có những lợi ích nào? và tổn hại nào? Namkna 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 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 alt="" src="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAD/HgD//wsD//8LA/8AAAAAAAAAAAP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D//8eAP//HgD//x4A//8LA///CwP/AAAAAAAAAAAD/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D//8eAP//CwP//x4A//8eAP//CwP//wsD/wAAAAAAAAAAA/8D/wP/A//MAP//zAD//8wA//8AAAAAAAAAAP8LA///CwP//wsD//8eAP//HgD//wsD//8LA/8AAAAAAAAAAAP/A/8D/wP/zAD//8wA///MAP//AAAAAP8LA///CwP//wsD//8LA///HgD//x4A//8LA///CwP/AAAAAAAAAAAD/wP/A/8D/8wA///MAP//zAD///8eAP//CwP//x4A//8LA///CwP//x4A//8eAP//CwP//wsD/wAAAAAAAAAAA/8D/wP/A//MAP//zAD///8eAP//CwP//wsD//8eAP//CwP//wsD//8eAP//HgD//wsD//8LA/8AAAAAAAAAAAP/A/8D/wP/zAD///8LA///CwP//wsD/wAAAAAAAAAA/wsD//8LA///HgD//x4A//8LA///CwP/AAAAAAAAAAAD/wP/A/8D//8eAP//CwP//x4A/wAAAAAAAAAAAAAAAP8LA///CwP//x4A//8eAP//CwP//wsD/wAAAAAAAAAAA/8D//8eAP//CwP//wsD/8wA//8AAAAAAAAAAAAAAAD/CwP//wsD//8eAP//HgD//wsD//8LA/8AAAAAAAAAAP8LA///CwP//wsD/8wA///MAP//AAAAAAAAAAAAAAAA/wsD//8LA///HgD//x4A//8LA///CwP//x4A//8LA///CwP//x4A/8wA///MAP//zAD//wAAAAAAAAAAAAAAAP8LA///CwP//x4A//8eAP//CwP//wsD//8LA///CwP//x4A/wP/A//MAP//zAD//8wA//8AAAAAAAAAAAAAAAD/CwP//wsD//8eAP//HgD//wsD//8LA///CwP//x4A/wP/A/8D/wP/zAD//8wA///MAP//AAAAAAAAAAAAAAAA/wsD//8LA///HgD//x4A//8LA///CwP//x4A/8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD///8LA///CwP//x4A//8eAP//CwP//x4A/8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA////HgD//wsD/8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//GAAAABgAAAAYMAAAGCAAABgAAAAYAAAAGBgAABg4AAAYOAAAGDgAAAA4AAAAOAAAADgAAAAAAAAAAAAAAAAAAA==" />

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

.base64{
background-image:url('data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAD/HgD//wsD//8LA/8AAAAAAAAAAAP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D//8eAP//HgD//x4A//8LA///CwP/AAAAAAAAAAAD/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D/wP/A/8D//8eAP//CwP//x4A//8eAP//CwP//wsD/wAAAAAAAAAAA/8D/wP/A//MAP//zAD//8wA//8AAAAAAAAAAP8LA///CwP//wsD//8eAP//HgD//wsD//8LA/8AAAAAAAAAAAP/A/8D/wP/zAD//8wA///MAP//AAAAAP8LA///CwP//wsD//8LA///HgD//x4A//8LA///CwP/AAAAAAAAAAAD/wP/A/8D/8wA///MAP//zAD///8eAP//CwP//x4A//8LA///CwP//x4A//8eAP//CwP//wsD/wAAAAAAAAAAA/8D/wP/A//MAP//zAD///8eAP//CwP//wsD//8eAP//CwP//wsD//8eAP//HgD//wsD//8LA/8AAAAAAAAAAAP/A/8D/wP/zAD///8LA///CwP//wsD/wAAAAAAAAAA/wsD//8LA///HgD//x4A//8LA///CwP/AAAAAAAAAAAD/wP/A/8D//8eAP//CwP//x4A/wAAAAAAAAAAAAAAAP8LA///CwP//x4A//8eAP//CwP//wsD/wAAAAAAAAAAA/8D//8eAP//CwP//wsD/8wA//8AAAAAAAAAAAAAAAD/CwP//wsD//8eAP//HgD//wsD//8LA/8AAAAAAAAAAP8LA///CwP//wsD/8wA///MAP//AAAAAAAAAAAAAAAA/wsD//8LA///HgD//x4A//8LA///CwP//x4A//8LA///CwP//x4A/8wA///MAP//zAD//wAAAAAAAAAAAAAAAP8LA///CwP//x4A//8eAP//CwP//wsD//8LA///CwP//x4A/wP/A//MAP//zAD//8wA//8AAAAAAAAAAAAAAAD/CwP//wsD//8eAP//HgD//wsD//8LA///CwP//x4A/wP/A/8D/wP/zAD//8wA///MAP//AAAAAAAAAAAAAAAA/wsD//8LA///HgD//x4A//8LA///CwP//x4A/8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD///8LA///CwP//x4A//8eAP//CwP//x4A/8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA////HgD//wsD/8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//zAD//8wA///MAP//GAAAABgAAAAYMAAAGCAAABgAAAAYAAAAGBgAABg4AAAYOAAAGDgAAAA4AAAAOAAAADgAAAAAAAAAAAAAAAAAAA==');
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 Namkna sử dụng hình ảnh đã được mã hóa Base image 64.

» Nhược điểm khi sử 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 mã hóa, sau đó 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% (Ảnh càng lớn thì ký tự mã hóa càng nhiều và dung lượng càng lớn).
• 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 là gì

Những mặt nhược điểm phía trên có thể sẽ khiến cho nhiều người phân vân không biết Base64 Image có nên dùng hay không. Tuy nhiên bạn cũng nên cân nhắc lại vì không phải tự dưng mà người ta đưa ra hình thức này và áp dụng nó vào trong thiết kế web. Nếu để ý kỹ bạn có thể thấy ngay trong một số mẫu Simple của blogger cũng sử dụng những hình ảnh mã hóa để làm ảnh nền. Vậy tất nhiên là nó có những ưu điểm nhất định thậm chí còn nhiều ưu điểm hơn những mặt hại nên google mới đưa nó vào trong mẫu của họ. Vậy những ưu điểm đó là gì hãy cùng namkna tìm hiểu ngay sau đây nha.

• Nâng cao hiệu xuất khi tải website: Nghe xong chắc hẳn có nhiều người không tin và cảm thấy cực kì vô lý, bởi dung lượng của base64 image lơn hơn cả file gốc mà (thậm chí lớn hơn nhiều lần) vậy thì dựa vào đâu để namkna nói như vầy. Tuy nhiên, bạn hãy quan sát vấn đề từ nhiều khía cạnh đừng chỉ nhìn từ khía cạnh dung lượng. 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ả trình duyệt (browser) phải mất thời giản để tiến hành xử lý các request.
• 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.
• 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.
• Không cần mạng vẫn có thể xem được hình ảnh. Nói có thể không ai tin nhưng bạn hãy thử mã hóa một hình ảnh bất kỳ sau đó bạn ngắt kết nối với internet (Disbale) và tải lại hình ảnh sẽ thấy hình ảnh vẫn xem được cho dù có mạng hay không (Hãy rút dây mạng của bạn sau đó bấm vào liên kết sau để xem Demo). Như vậy đây có thể hữu dụng với những ai muốn tạo một trang web ofline mà không cần phải tạo và lưu ảnh trên máy tính.
• Do không cần phải request nên nếu bạn nào am hiểu css có thể kết hợp với thủ thuật CSS Sprite thì tối ưu tốc độ blog cực tốt :)

Dùng hay không?

Đến đây hẳn rất nhiều bạn đã quyết định có dùng nó cho web của mình hay không? Tuy nhiên, cũng sẽ có không ít người vẫn còn đang bối rối không biết có nên áp dụng hay không?

Nguồn: Namkna