Tại sao việc “tối ưu hóa” hình ảnh của bạn với định dạng Base64 hầu như luôn là một ý tưởng tồi

Thật không may, ngay cả cho đến thời điểm này, một số plugin và blog chuyên về mảng tối ưu hóa vẫn đề xuất “tối ưu” hình ảnh của bạn bằng cách mã hóa chúng thành dạng Base64 và đưa thẳng đoạn mã đó vào HTML.

Trong bài đăng này, tôi muốn giải đáp thắc mắc:

Tại sao trong thời đại ngày nay, đây gần như luôn là một ý tưởng tồi đã được mang vác từ nhiều năm trước rồi. 

Ngày xưa, các trình duyệt web bị giới hạn nghiêm trọng về số lượng kết nối đồng thời mà chúng có thể gửi đến máy chủ. Điều này có nghĩa là một trang web nặng về hình ảnh sẽ cần phải xếp hàng các yêu cầu và đợi các yêu cầu trước khi tới lượt nó. 

Base64 đưa ra cách giải quyết vấn đề đó bằng cách sử dụng kết nối HTTP đã mở để phân phối hình ảnh được nhúng trực tiếp vào HTML hoặc CSS. Điều này đã loại bỏ một cách hiệu quả nhu cầu về một vòng lặp bổ sung mà trình duyệt sẽ cần cho mỗi tệp.

Với sự ra đời của tính năng ghép kênh đi kèm với HTTP/2, các trình duyệt web trở nên cực kỳ hiệu quả trong việc phân phối hàng trăm tệp thông qua kết nối duy nhất. Điều này hoạt động xung quanh hầu hết các giới hạn mà mã hóa Base64 đã giải quyết và thực tế đó có nghĩa là giờ đây Base64 có hại nhiều hơn lợi!

Để biết câu trả lời tại sao, trước tiên, chúng ta cần xác định Base64 thực sự là gì. Nói một cách đơn giản, Base64 là một lược đồ mã hóa được sử dụng để biểu diễn dữ liệu nhị phân ở định dạng văn bản. 

Điều này hữu ích khi phương tiện lưu trữ hoặc phân phối không hỗ trợ dữ liệu nhị phân, chẳng hạn như khi nhúng hình ảnh vào cơ sở dữ liệu, tệp CSS hoặc HTML. Người ta phải cẩn thận để không nhầm lẫn nén với mã hóa. Trong khi nén thực sự nén dữ liệu, mã hóa chỉ xác định cách dữ liệu được mã hóa, điều này đưa chúng ta đến vấn đề đầu tiên.


Tăng kích thước tải xuống

Mặc dù Base64 là một cách tương đối hiệu quả để mã hóa dữ liệu nhị phân, nhưng trung bình nó vẫn làm tăng kích thước tệp lên hơn 25%. Điều này không chỉ làm tăng hóa đơn băng thông của bạn mà còn làm tăng cả thời gian tải xuống nữa.

ảnh base64 tăng kích thước

Chi phí CPU

Khi phân phối hình ảnh ở dạng Base64, trước tiên trình duyệt cần giải mã các chuỗi được mã hóa Base64 và sau đó cũng giải mã hình ảnh, điều này đưa tới thêm một lớp công việc không cần thiết. 

Base64 rất hiệu quả, nhưng nếu tính cả thời gian xử lý GZip hoặc Brotli xảy ra trên máy chủ để nén phản hồi thì các mili giây bắt đầu nhanh chóng cộng dồn lại.


Vấn đề về bộ nhớ đệm cache

Vấn đề thứ ba có lẽ là yếu tố gây ảnh hưởng xấu nhất đến hiệu suất, nhưng có lẽ nó không rõ ràng ngay khi chỉ nhìn sơ qua. 

Khi người dùng truy cập vào trang web của bạn, trình duyệt sẽ tự động lưu ảnh vào bộ nhớ cache cục bộ trên thiết bị của họ rồi tải chúng trực tiếp từ đó khi họ truy cập lại cùng một trang (hoặc trang khác có cùng ảnh đó). 

Do cách thức hoạt động của Base64, trình duyệt không thể lưu trữ hình ảnh cục bộ, do đó nó sẽ luôn cần tìm nạp lại chúng từ máy chủ gốc hoặc CDN của bạn, điều này tạo thêm tải trên máy chủ cũng như tăng hóa đơn băng thông của bạn.

Một vấn đề khác ở đây là nếu hình ảnh được nhúng trong mã HTML, các mạng phân phối nội dung như BunnyCDN không thể lưu vào bộ đệm các tệp và chúng sẽ luôn được trả về từ máy chủ gốc của bạn, cái có thể cách xa hàng nghìn km so với người duyệt web.


SEO và trải nghiệm người dùng

Các vấn đề thực sự không chỉ giới hạn ở hiệu suất mà thôi. Bằng cách sử dụng hình ảnh được mã hóa Base64 trên trang web của mình, bạn cũng có thể làm tổn hại đến cả SEO và trải nghiệm người dùng.

Lý do cho điều này là việc chia sẻ hình ảnh Base64 khó khăn hơn nhiều, do thực tế là chúng không thực sự có khả năng truy cập được thông qua URL công khai. 

Điều này có nghĩa là trình thu thập dữ liệu web và người dùng của bạn không thể nhận được các liên kết trỏ trở lại trang web của bạn, làm cho việc chia sẻ nội dung khó hơn nhiều và có thể ảnh hưởng đến “thứ hạng trang”.


Khi nào chúng ta nên sử dụng Base64?

Base64 có rất nhiều công dụng trong công nghệ, nhưng trừ khi bạn có lý do chính đáng, bạn nên cố gắng tránh sử dụng nó như là một phần của các tệp HTML hoặc CSS của mình. Chỉ có vài trường hợp đặc thù mà Base64 có thể thực sự hữu ích.

Một ví dụ như vậy sẽ là các hình ảnh có dung lượng rất nhỏ, trong đó chuỗi Base64 thực sự nhỏ hơn độ dài của chuỗi URL và chi phí yêu cầu HTTP khi liên kết đến tệp hình ảnh. Lấy ví dụ, một ảnh PNG trong suốt có kích cỡ 1×1 pixel. Mặc dù hình ảnh ban đầu chỉ có kích thước 68 byte, bao gồm các yếu tố trong tiêu đề HTTP, v.v., nó thực sự lớn hơn chuỗi được mã hóa bằng Base64:

Pixel trong suốt:
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

Nếu bạn từng gặp một blog nào đấy gợi ý sử dụng ảnh Base64 để cải thiện hiệu suất, hãy hoài nghi điều này! Và đánh giá cẩn thận xem có bất kỳ lợi ích thực sự nào áp dụng cho trường hợp sử dụng cụ thể của bạn không.

(Biên tập từ bài viết “Why optimizing your images with Base64 is almost always a bad idea” của tác giả Dejan Grofelnik Pelzel trên BunnyCDN)