Tác dụng của việc mã hóa hình ảnh trong base64 là gì?

Nếu tôi chuyển đổi một hình ảnh (jpg hoặc png) sang base64, thì nó sẽ lớn hơn hay nó sẽ có cùng kích thước? Nó sẽ lớn hơn bao nhiêu?

Có nên sử dụng hình ảnh được mã hóa base64 trên trang web của tôi không?

Nó sẽ lớn hơn khoảng 37%:

Rất đại khái, kích thước cuối cùng của dữ liệu nhị phân được mã hóa Base64 bằng 1,37 lần kích thước dữ liệu gốc

Nguồn: http://en.wikipedia.org/wiki/Base64

Dưới đây là tổng quan thực sự hữu ích về thời điểm mã hóa base64 và khi nào không nên của David Calhoun.

Các tệp được mã hóa base64 cơ bản answer = gzipped sẽ tương đương về kích thước tệp với tệp nhị phân tiêu chuẩn (jpg / png). Các tệp nhị phân Gzip'd sẽ có kích thước tệp nhỏ hơn.

Takeaway = Có một số lợi thế để mã hóa và gzipping các biểu tượng giao diện người dùng của bạn, v.v., nhưng không khôn ngoan khi làm điều này cho hình ảnh lớn hơn.

Nó sẽ lớn hơn trong base64.

Base64 sử dụng 6 bit mỗi byte để mã hóa dữ liệu, trong khi hệ nhị phân sử dụng 8 bit mỗi byte. Ngoài ra, có một chút chi phí đệm với Base64. Không phải tất cả các bit đều được sử dụng với Base64 vì nó được phát triển ngay từ đầu để mã hóa dữ liệu nhị phân trên các hệ thống chỉ có thể xử lý chính xác dữ liệu phi nhị phân.

Điều đó có nghĩa là hình ảnh được mã hóa sẽ lớn hơn khoảng 25%, cộng với chi phí không đổi cho phần đệm.

Mã hóa hình ảnh thành base64 sẽ làm cho hình ảnh lớn hơn khoảng 30%.

Xem chi tiết trong bài viết wikipedia về lược đồ URI dữ liệu , trong đó nó nêu rõ:

URI dữ liệu được mã hóa Base64 có kích thước lớn hơn 1/3 so với kích thước tương đương nhị phân của chúng. (Tuy nhiên, chi phí này giảm xuống còn 2-3% nếu máy chủ HTTP nén phản hồi bằng gzip)

Câu trả lời là: Nó phụ thuộc.

Mặc dù base64-hình ảnh lớn hơn, nhưng có một vài điều kiện mà base64 là lựa chọn tốt hơn.

Kích thước của base64-hình ảnh

Base64 sử dụng 64 ký tự khác nhau và đây là 2 ^ 6. Vì vậy, base64 lưu trữ 6 bit trên mỗi ký tự 8 bit. Vì vậy, tỷ lệ là 6/8 từ dữ liệu chưa được chuyển đổi sang dữ liệu cơ sở64. Đây không phải là tính toán chính xác, nhưng là một ước tính sơ bộ.

Thí dụ:

Một hình ảnh 48kb cần khoảng 64kb dưới dạng hình ảnh được chuyển đổi base64.

Phép tính: (48/6) * 8 = 64

Máy tính CLI đơn giản trên hệ thống Linux:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Hoặc sử dụng một hình ảnh:

$ cat my.png|base64|wc -c

Base64-hình ảnh và trang web

Câu hỏi này khó trả lời hơn nhiều. Nói chung, hình ảnh càng lớn càng ít cảm giác khi sử dụng base64. Nhưng hãy xem xét các điểm sau:

• Nhiều hình ảnh được nhúng trong HTML-File hoặc CSS-File có thể có các chuỗi tương tự. Đối với PNG, bạn thường thấy các ký tự "A" lặp lại. Sử dụng gzip (đôi khi được gọi là "deflate"), thậm chí có thể có lợi về quy mô. Nhưng nó phụ thuộc vào nội dung hình ảnh.
• Yêu cầu chi phí của HTTP1.1: Đặc biệt với nhiều cookie, bạn có thể dễ dàng có chi phí vài kilobyte cho mỗi yêu cầu. Nhúng hình ảnh base64 có thể tiết kiệm băng thông.
• Không mã hóa base64 hình ảnh SVG, vì gzip hiệu quả hơn trên XML so với base64.
• Lập trình: Trên các hình ảnh được tạo động, việc phân phối chúng trong một yêu cầu dễ dàng hơn khi phối hợp hai yêu cầu phụ thuộc.
• Liên kết sâu: Nếu bạn muốn ngăn việc tải xuống hình ảnh, thì sẽ phức tạp hơn một chút khi trích xuất hình ảnh từ trang HTML.

Nó chắc chắn sẽ khiến bạn tốn thêm dung lượng và băng thông nếu bạn muốn sử dụng hình ảnh được mã hóa base64. Tuy nhiên, nếu trang web của bạn có nhiều hình ảnh nhỏ, bạn có thể giảm thời gian tải trang bằng cách mã hóa hình ảnh của bạn thành base64 và đặt chúng vào html. Theo cách này, trình duyệt máy khách sẽ không cần phải tạo nhiều kết nối với hình ảnh, nhưng sẽ có chúng trong html.