Base 64 encode vs tải một tập tin hình ảnh

Question

Vì vậy, tôi đang làm việc trên một cái gì đó trong php, nơi tôi có để có được hình ảnh của tôi từ một cơ sở dữ liệu sql, nơi họ sẽ được mã hóa trong base64. Tốc độ hiển thị những hình ảnh này rất quan trọng vì vậy tôi đang cố gắng tìm hiểu xem liệu có thể nhanh chóng chuyển dữ liệu của cơ sở dữ liệu thành tệp hình ảnh và sau đó tải dữ liệu đó trong trình duyệt hay chỉ cần đọc dữ liệu base64 thô và sử dụng:

<img src="data:image/jpeg;base64,/9j/4AAQ..." /> 

Được hỗ trợ trong FireFox và các trình duyệt Gecko khác.

Vì vậy, để tóm tắt lại, sẽ nhanh hơn khi chuyển tệp hình ảnh thực tế hoặc mã base64. Nó có yêu cầu ít yêu cầu http hơn khi sử dụng ajax để tải các hình ảnh không?

Hình ảnh sẽ không quá 100 pixel.

Answer 1

Tôi không đồng ý với bất kỳ ai trong các bạn. Có những trường hợp khi bạn tải nhiều hình ảnh hơn. Không phải tất cả các trang đều chứa 3 hình ảnh. Thực ra tôi đang làm việc trên một trang web nơi bạn đã tải hơn 200 hình ảnh. Điều gì xảy ra khi 100000 người dùng yêu cầu 200 hình ảnh trên một trang web được tải. Các đĩa của máy chủ, trả về các hình ảnh sẽ sụp đổ. Thậm chí tệ hơn bạn đã thực hiện quá nhiều yêu cầu đến máy chủ thay vì một với base64. Đối với rất nhiều hình thu nhỏ tôi thích đại diện base64, được lưu trước trong cơ sở dữ liệu. Tôi đã tìm ra giải pháp và tranh luận mạnh mẽ tại http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/. Anh chàng thực sự trong trường hợp đó và thực hiện một số xét nghiệm. Tôi đã rất ấn tượng và làm bài kiểm tra của mình. Thực tế là như nó nói. Đối với rất nhiều hình ảnh được tải trong một trang, một phản hồi từ máy chủ thực sự hữu ích.

Answer 2

• Mã hóa Base64 giúp tệp lớn hơn và do đó truyền chậm hơn.
• Bằng cách bao gồm hình ảnh trong trang, nó phải được tải xuống mọi lúc. Hình ảnh bên ngoài thường chỉ được tải xuống một lần và sau đó được lưu trong bộ nhớ cache bởi trình duyệt.
• Nó không tương thích với tất cả các trình duyệt

Answer 3

Nói chung, sử dụng base64 mã hóa sẽ tăng kích thước byte bằng khoảng 1/3. Do đó, bạn sẽ phải di chuyển 1/3 byte từ cơ sở dữ liệu vào máy chủ, và sau đó di chuyển thêm 1/3 byte đó lên dây tới trình duyệt.

Tất nhiên, khi kích thước của hình ảnh tăng lên, chi phí được đề cập sẽ tăng tương ứng.

Điều đó đang được nói, tôi nghĩ rằng nên thay đổi các tệp thành các biểu diễn byte của chúng trong db và truyền các tệp đó.

Answer 4

Đừng nghĩ rằng data:// hoạt động trong IE7 trở xuống.

Khi hình ảnh được yêu cầu, bạn có thể lưu hình ảnh vào hệ thống tệp, sau đó phân phối từ đó trở đi. Nếu dữ liệu hình ảnh trong cơ sở dữ liệu thay đổi thì chỉ cần xóa tệp. Phân phối nó từ một tên miền khác quá giống như img.domain.com. Bạn có thể nhận được tất cả các lợi ích của các bản sửa đổi cuối cùng hoặc các thẻ điện tử miễn phí từ máy chủ web của bạn mà không phải khởi động PHP trừ khi bạn cần.

Nếu bạn đang sử dụng apache:

# If the file doesn't exist: 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^/(image123).jpg$ makeimage.php?image=$1 

Answer 5

Nếu bạn muốn tốc độ nhanh nhất, sau đó bạn nên ghi chúng vào đĩa khi chúng được tải lên/sửa đổi và để cho các máy chủ web phục vụ các tập tin tĩnh. Các đề xuất của Rojoca cũng tốt, vì chúng giảm thiểu sự kêu gọi của php. Một lợi ích bổ sung của việc phân phối từ một tên miền khác là (hầu hết) các trình duyệt sẽ đưa ra các yêu cầu song song.

Chặn tất cả điều đó, khi bạn truy vấn dữ liệu, hãy kiểm tra xem liệu nó có được sửa đổi lần cuối hay không, sau đó ghi nó vào đĩa và phân phát từ đó. Bạn sẽ muốn đảm bảo rằng bạn tôn trọng tiêu đề If-Modified-Since để bạn không chuyển dữ liệu một cách không cần thiết.

Nếu bạn không thể ghi vào đĩa, hoặc một số bộ nhớ cache khác, thì sẽ nhanh nhất để lưu trữ nó dưới dạng dữ liệu nhị phân trong cơ sở dữ liệu và truyền nó ra. Điều chỉnh kích thước bộ đệm sẽ giúp vào thời điểm đó.

Answer 6

Tại sao tạo lại hình ảnh một lần nữa và một lần nữa nếu nó sẽ không bị sửa đổi.Theo giả thuyết, ngay cả khi có 1000 hình ảnh khác nhau có thể được hiển thị dựa trên 1000 điều kiện khác nhau, tôi vẫn nghĩ rằng 1000 hình ảnh trên đĩa tốt hơn. Hãy nhớ rằng, hình ảnh dựa trên đĩa có thể được lưu trong bộ nhớ cache của trình duyệt và lưu băng thông v.v.

Answer 7

Để trả lời câu hỏi ban đầu, tôi chạy một kiểm tra đo lường một jpeg hình ảnh 400x300 px trong 96 ppi:

base64ImageData.Length 
177732 

bitmap.Length 
129882 

Answer 8

Đó là một giải pháp rất nhanh và dễ dàng. Mặc dù kích thước hình ảnh sẽ tăng khoảng 33% về kích thước, sử dụng base64 sẽ giảm đáng kể số lượng yêu cầu http.

Hình ảnh của Google và hình ảnh Yahoo đang sử dụng base64 và cung cấp hình ảnh nội tuyến. Kiểm tra mã nguồn và bạn sẽ thấy nó.

Tất nhiên có những hạn chế về cách tiếp cận này, nhưng tôi tin rằng lợi ích vượt quá chi phí. Một khuyết điểm mà tôi đã tìm thấy ở các thiết bị chậm. Ví dụ: Trong iPhone 3GS, hình ảnh được cung cấp bởi hình ảnh của google rất chậm để hiển thị, vì hình ảnh được gzip từ máy chủ và phải được giải nén trong trình duyệt. Vì vậy, nếu khách hàng có thiết bị chậm, anh ta sẽ phải chịu một chút khi kết xuất hình ảnh.

Answer 9

Tôi đã sử dụng hình ảnh base64 một hoặc hai lần cho các biểu tượng (10x10 pixel hoặc hơn).

Base64 hình ảnh chuyên nghiệp:

• nhỏ gọn - bạn có tập tin duy nhất. cũng nếu tập tin được nén, hình ảnh base64 được nén gần như với kích thước của hình ảnh bình thường.
• trang được truy lục trong một yêu cầu duy nhất.

Base64 hình ảnh khuyết điểm:

• phải thực tế, bạn có thể cần phải sử dụng công cụ scripting (PHP như vậy) trên tất cả các trang có chứa hình ảnh.
• nếu hình ảnh bị thay đổi, tất cả các trang được lưu trong bộ nhớ cache phải được tải xuống lại.
• vì hình ảnh nội tuyến, bạn không thể sử dụng CDN hoặc máy chủ web nội dung tĩnh.

Bình thường hình ảnh chuyên nghiệp:

• nếu bạn đang sử dụng giao thức SPDY, ít nhất là trên lý thuyết, trang + hình ảnh + CSS sẽ được tải với yêu cầu duy nhất quá.
• bạn có thể đặt hết hạn trên hình ảnh, vì vậy nội dung sẽ được lưu trong bộ nhớ cache từ trình duyệt.