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

ảnh mã hóa base64

Nội tuyến hình ảnh vào HTML với base64

Nhiều người không biết rằng các ả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ừ bên ngoài nữa.

Base64 là gì?

Đây là một trong những cách cổ nhất để mã hóa thứ gì đó đưa vào html (được đề xuất đầ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


Bạn có thấy bức ảnh logo ở trên không? Nó được mã hóa Base64 đấy. Bạn có thấy những icons bên phải? Chúng cũng được mã hóa base64.

Tôi đã sử dụng các ảnh base64 cho trang varvy 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ụ tôi tạo cho mục đích này: https://varvy.com/tools/base64/ hoặc đơn giản chỉ cần tìm kiếm từ khóa “mã hóa ảnh 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 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.

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, 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ừ 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.

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.

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ú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 đầ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" itemscope itemtype="http://schema.org/Article"><head><meta name=viewport content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://varvy.com/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://varvy.com/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 2K sẽ cho kết quả là 2,5 hoặc 3K 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 5K.

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í của tôi: https://varvy.com/tools/base64/

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top