Như bạn đã biết, để nhúng hình ảnh từ bên ngoài vào website, thì ta sẽ cần bỏ cả link ảnh vào thẻ <img> trong HTML hoặc vào background-image trong CSS. Nhưng hôm nay, mình sẽ giới thiệu đến bạn cách “biến” ảnh hoặc file thành chuỗi dữ liệu và nhúng trực tiếp vào website với Data URIs
Data URIs là gì ?
Là 1 tập tin được mã hóa base64 thành chuỗi dữ liệu. Bạn có thể dùng chuỗi dữ liệu này để nhúng vào HTML hoặc CSS. Khi trình duyệt gặp 1 chuỗi Data URIs trong website của bạn, nó sẽ tự động giải mã và xuất ra thành file hình ảnh trên màn hình. Không khác gì khi bạn nhúng link tập tin theo cách cổ điển.
Với Data URIs, bạn có thể dùng cho nhiều loại file khác nhau, nhưng phổ biến nhất là dùng cho hình ảnh trên website hoặc font chữ.
Đây là format của Data URIs
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
Data URIs trong thực tế
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiAAAAC0CAMAA.......còn rất là dài
Tại sao phải dùng Data URIs ?
Data URIs sẽ giúp bạn giảm đi rất nhiều lượt HTTP request đến website của bạn. Vì mỗi khi bạn nhúng 1 file vào HTML hoặc CSS thì sẽ tạo thêm một HTTP request để tải file đó. Còn khi dùng Data URIs thì bạn chỉ việc nhúng trực tiếp 1 chuỗi dữ liệu vào mà không có thêm một HTTP request nào mới được tạo ra. Và website của bạn sẽ tải nhanh hơn do trình duyệt không load nhiều file nữa.
Bạn nên lưu ý là Data URIs sẽ có kích thước lớn hơn gấp 3 lần file ban đầu. Vậy tại sao nó lại giúp website load nhanh hơn? Đó là vì toàn bộ chuỗi dữ liệu đó đã được nén lại và chỉ sử dụng duy nhất một HTTP request.
Ngoài ra, nhược điểm của Data URIs là nó không được cache lại trên trình duyệt. Tức là, mỗi khi bạn tải lại trang, trình duyệt sẽ phải giải mã nó 1 lần nữa, nên sẽ gây hao tổn tài nguyên server. Và trình duyệt trên di động sẽ giải mã Data URIs chậm hơn. Vì vậy, bạn nên cân nhắc thật kĩ khi sử dụng Data URIs, nếu bạn muốn sử dụng Data URIs cho toàn bộ hình ảnh trên website của bạn, thì hãy test thật kĩ tất cả trình duyệt trên máy tính và di động để tránh làm ảnh hưởng đến hiệu suất của website.
Tạo Data URIs như thế nào ?
Sử dụng tool có sẵn
Hiện tại trên internet có rất nhiều tool làm được việc này. Ví dụ là https://www.base64-image.de/. Khi nào mình rãnh sẽ làm ra tool tương tự 😀
Sử dụng PHP
Sử dụng tool để convert file sang Data URIs nếu bạn chỉ dùng tạm thời. Còn để sử dụng lâu dài hay đúng hơn là lười thì bạn có thể để website tự convert file thành Data URIs bằng hàm PHP mình đã viết sẵn dưới đây. Mình ví dụ convert ảnh sang Data URIs nhé
function imageEncode($img){
$image = file_get_contents($img);
$type = pathinfo($img, PATHINFO_EXTENSION);
$src = 'data:image/'. $type .';base64,'. base64_encode($image);
return $src;
}
Gọi hàm ra
<img src="<?=imageEncode('link ảnh')?>" alt="data URIs">
Như vậy là xong. Nếu có thắc mắc gì cứ comment tại đây nhé. Mình sẽ giúp đỡ trong khả năng của mình
[su_button url=”https://demo.huynhhieu.com/data-uris.cgi” target=”blank” style=”flat” center=”yes” icon=”icon: eye”]Xem demo[/su_button]
Chúc bạn thành công!