Categories Nén ảnh

Hình ảnh mã hóa Base64 trong tăng tốc website

ảnh mã hóa base64

Cập nhật: hiện mã hóa ảnh bằng base64 không còn là biện pháp tối ưu tốt trong nhiều trường hợp.


Nhiều người không biết rằng ảnh có thể được nội tuyến vào mã HTML, phương thức để làm điều đó là thực hiện mã hóa base64.

Ảnh được mã hóa base64 trở thành một phần của HTML và được hiển thị mà không cần phải tải ảnh từ file bên ngoài nữa.


Base64 là gì?

Đây là một trong những cách cổ xưa nhất để mã hóa thứ gì đó để đưa vào HTML (được đề xuất lần đầu tiên vào năm 1987!).

Nó là cách để biến các dạng dữ liệu khác nhau thành một chuỗi các ký tự và con số mà an toàn cho HTML. Một trong các dạng dữ liệu đó là hình ảnh.


Hình ảnh được mã hóa Base64

ảnh được mã hóa bằng base64


Bạn có thấy bức ảnh logo ở trên không? Nó được mã hóa Base64 đấy. Các icon cũng có thể và nên được mã hóa base64.

Tôi đã sử dụng các ảnh base64 cho trang Varvy (trang gốc tiếng Anh của bài dịch này) trong nhiều năm rồi, và nó là một trong các lý do chính giúp trang của tôi tải nhanh như vậy.


Sử dụng Base64

Để chuyển ảnh thành dạng base64, bạn có thể sử dụng công cụ: https://www.base64-image.de/ hoặc đơn giản chỉ cần tìm kiếm từ khóa “chuyển ảnh sang dạng base64/convert to base64” là bạn sẽ tìm thấy rất nhiều công cụ có khả năng như vậy.


Base64 giúp tăng tốc trang web như thế nào?

Lợi ích chính là trang web không cần phải tải một ảnh từ liên kết bên ngoài. Giảm những thứ mà trang phải tải sẽ tự nhiên làm trang web của bạn tải nhanh hơn.

Dưới đây là một trang với hai hình ảnh. Để tải, trang này yêu cầu bốn thứ (HTML, CSS, ảnh thứ nhất, ảnh thứ hai):

tải ảnh base64

Dưới đây là cũng trang web đó với các ảnh được mã hóa base64. Để tải, trang này yêu cầu chỉ hai thứ mà thôi (HTML, CSS):

base64 giúp bạn không cần tải ảnh nữa

Base64 ảnh hưởng đến SEO như thế nào?

Vấn đề chính mà ảnh base64 tác động đến SEO là ảnh sẽ không được lập chỉ mục bởi Google.

Điều đó có nghĩa là những ảnh mà bạn mã hóa bằng base64 sẽ không hiển thị trên công cụ tìm kiếm hình ảnh của Google, hoặc bất cứ máy tìm kiếm hình ảnh nào khác.

Xem thêm: cách SEO ảnh.


Vậy thì tại sao chúng ta vẫn sử dụng nó?

Bởi vì có nhiều hình ảnh không quan trọng trên trang sẽ không ảnh hưởng gì đến bạn hoặc lưu lượng truy cập của bạn nếu chúng không được lập chỉ mục.

Ví dụ tốt nhất là về các icon mạng xã hội.

Những thứ như là icon Twitter, Google+, Facebook, vân vân, là những ảnh thực sự nhỏ và không cần phải lập chỉ mục. Bạn sẽ không bao giờ có được lưu lượng truy cập tìm kiếm hình ảnh từ các icon bé nhỏ Facebook đâu.

Trong thực tế, khi bạn thực sự nhìn vào các ảnh trên trang web của bạn, bạn có thể tìm thấy nhiều ảnh rơi vào phân loại này. Hãy nghĩ về các ảnh chỉ dành cho mục đích thiết kế, làm đẹp như "anh-ben-goc-trai.png" hay "dau-ngoac-kep.png". Những thứ như vậy không quan trọng cho SEO của bạn, nhưng nó vẫn làm chậm trang của bạn đôi chút.

Nhiều trang web có từ 8 đến 12 icon mạng xã hội và từng cái trong số đó đều bổ sung các yêu cầu HTTP, nếu bạn sử dụng base64, tất cả những ảnh như vậy không cần phải tải từ bên ngoài nữa.


Những ý kiến khác

Tốt nhất là chỉ sử dụng mã hóa base64 cho các ảnh nhỏ bé. Nếu bạn thử base64 cho các ảnh lớn bạn sẽ có mã HTML rất lớn và bị thua thiệt về lợi ích hiệu năng (hại nhiều hơn lợi).


Tôi sử dụng base64 trên trang này như thế nào?

Như tôi đã đề cập ở trên tôi sử dụng base64 rất nhiều. Từng trang trên website này (ý chỉ trang varvy.com) đều sử dụng base64 thường xuyên.

Vì tôi đã sử dụng base64 từ lâu và cho nhiều hình ảnh, tôi đã học được cách cân bằng SEO và các vấn đề về hiệu suất.


Làm thế nào để Google lập chỉ mục ảnh base64

Như đã đề cập ở trên, Google sẽ không lập chỉ mục ảnh được mã hóa base64, vậy thì ý của tôi là gì?

Từng bài viết trên trang này đều có ảnh intro lớn (ý chỉ ảnh minh họa đầu bài viết). Chúng đều được mã hóa bằng base64, nhưng vẫn được lập chỉ mục bởi Google. Tôi làm điều đó thế nào?

Cách thức là bạn phải có một file ảnh vật lý giống với cái được mã hóa. Bạn phải tải ảnh đó lên webhost của bạn và để nó nằm trong phần đầu của HTML sử dụng opengraph notation để chỉ Google đến ảnh đó.

Trang này của tôi có HTML bắt đầu như thế này:

<!DOCTYPE html><html lang="en-US" prefix="og: http://ogp.me/ns#" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"  ><head><meta name=viewport content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://kiencang.net/pagespeed/images/base64-image.png">

Phần đầu đoạn mã lằng nhằng trên là khai báo về opengraph, và phần cuối là khai báo về ảnh của tôi:

<meta property="og:image" content="https://kiencang.net/pagespeed/images/base64-image.png">

Kết quả cuối cùng là ảnh của tôi thực sự được lập chỉ mục bởi Google.


Vấn đề về kích cỡ

Một ảnh có dung lượng 2 KB sẽ cho kết quả là 2,5 hoặc 3KB nếu dữ liệu được mã hóa base64. Dầu vậy, nếu bạn bật nén (điều bạn nên làm) nó sẽ cho kết quả kích cỡ tương đồng với file ảnh.

Tôi không khuyến khích bạn sử dụng mã hóa base64 cho ảnh nào có kích cỡ lớn hơn 5 KB.


Cách dùng base64 như thế nào?

Ví dụ: Đây là file ảnh thông thường trong HTML của bạn:

<img src="vidu.png">

Thay thế phần địa chỉ file (trong trường hợp này là vidu.png) với thông tin src từ công cụ base64:

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

Giờ nguồn của ảnh của bạn không còn là file bên ngoài nữa, nó được thay thế bằng dữ liệu mã hóa trong trường "src=..."


Công cụ

Để trải nghiệm base64, hãy thử công cụ miễn phí: https://www.base64-image.de/

(Được dịch từ bài viết: Base64 encoding images – Tác giả: Patrick Sexton – Website: Varvy)

Comments are closed.

Back to Top