Base64 Image khi thiết kế web

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ì, áp dụng nó vào blog hay website có những lợi ích và tổn hại nào? Trong bài viết này hung1001 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ó

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

Rất đơn giản sử dụng base64 như 1 url

Với CSS

Page speed optimize

Nắm bắt được nhu cầu hiện tại, 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ức 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.

Nhược điểm khi sử dụng Base64 image

Như các bạn thấy, việc sử dụng hoàn toàn không khó. 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 convert 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 phải convert lại hình ảnh đó.

Ưu điểm của Base64 image 

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ọ.

• 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). 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 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. Như vậy đây có thể hữu dụng với những ai muốn tạo một trang web offline 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 

Tạo tool chuyển đổi

Trên mạng có rất nhiều trang hỗ trợ bạn làm điều này, tuy nhiên bạn cũng có thể tự sở hữu cho mình. Truy cập liên kết sau, chọn ảnh và lấy chuỗi được tạo ra.

Source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Image to Base64</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
    textarea{height:400px!important;width:100%;border-color:#cacaca}.btn{margin:10px 0 0}#imgTest img{max-height:150px;margin:0 0 20px}
    </style>
</head>

<body>
    <div class="container"><div class="row"><h3 class="text-center"><b>CONVERT IMAGES TO BASE64</b></h3><input id="inputFileToLoad" onchange="encodeImageFileAsURL()" type="file"><br/><div id="imgTest"></div></div><div class="row" style="clear:both"><textarea id="results" class="form-control"></textarea></div><div class="row"><button class="btn btn-primary" id="btnCopy" data-clipboard-target="#results">COPY</button> <button class="btn btn-danger" id="reload" onclick="reLoad()">RELOAD</button></div></div>
    <script type="text/javascript">
    function reLoad(){location.reload()}function setTooltip(o){$("#btnCopy").tooltip("hide").attr("data-original-title",o).tooltip("show")}function hideTooltip(){setTimeout(function(){$("#btnCopy").tooltip("hide")},3e3)}$(document).ready(function(){new ClipboardJS("#btnCopy")}),$("#btnCopy").tooltip({trigger:"click",placement:"top"});var clipboard=new ClipboardJS("#btnCopy");function encodeImageFileAsURL(){var o=document.getElementById("inputFileToLoad").files;if(o.length>0){var t=o[0],e=new FileReader;e.onload=function(o){var t=o.target.result,e=document.createElement("img");e.src=t,document.getElementById("imgTest").innerHTML=e.outerHTML,$("#results").val(e.src)},e.readAsDataURL(t)}}clipboard.on("success",function(o){setTooltip("Copied"),hideTooltip()}),clipboard.on("error",function(o){setTooltip("Failed"),hideTooltip()});
    </script>
</body>

</html>

Good Luck !

Tham khảo terocket