Việc nhúng dữ liệu hình ảnh nền vào CSS là Base64 tốt hay xấu?

Tôi đã xem xét nguồn gốc của một mô tả người dùng greasemonkey và nhận thấy những điều sau đây trong css của họ:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Tôi có thể đánh giá cao rằng một tập lệnh greasemonkey sẽ muốn gói bất cứ thứ gì nó có thể trong nguồn thay vì lưu trữ nó trên máy chủ, điều đó là quá rõ ràng. Nhưng vì tôi chưa thấy kỹ thuật này trước đây, tôi đã xem xét việc sử dụng nó và nó có vẻ hấp dẫn vì một số lý do:

1. Nó sẽ giảm lượng yêu cầu HTTP khi tải trang, do đó nâng cao hiệu suất
2. Nếu không có CDN, thì nó sẽ giảm lượng lưu lượng truy cập được tạo thông qua cookie được gửi cùng với hình ảnh
3. Các tệp CSS có thể được lưu trữ
4. Các tệp CSS có thể được GZIPPED

Xem xét rằng IE6 (ví dụ) có vấn đề với bộ đệm cho hình ảnh nền, có vẻ như đó không phải là ý tưởng tồi tệ nhất ...

Vì vậy, đây là một thực hành tốt hay xấu, tại sao bạn không sử dụng nó và bạn sẽ sử dụng công cụ nào để mã hóa hình ảnh?

cập nhật - kết quả kiểm tra

• thử nghiệm với hình ảnh: http://fragged.org/dev/map-shot.jpg - 133.6Kb

• kiểm tra URL: http://fragged.org/dev/base64.html

• tệp CSS chuyên dụng: http://fragged.org/dev/base64.css - 178.1Kb

• Phía máy chủ mã hóa GZIP

• kích thước kết quả được gửi đến máy khách (kiểm tra thành phần YSLOW): 59.3Kb

• Lưu dữ liệu được gửi tới trình duyệt của khách hàng: 74.3Kb

Đẹp, nhưng nó sẽ ít hữu ích hơn cho những hình ảnh nhỏ hơn, tôi đoán vậy.

CẬP NHẬT: Bryan McQuade, một kỹ sư phần mềm của Google, làm việc trên PageSpeed, bày tỏ tại ChromeDevSummit 2013 rằng dữ liệu: uris trong CSS được coi là một mô hình chống chặn kết xuất để cung cấp CSS quan trọng / tối thiểu trong suốt cuộc nói chuyện của anh ấy #perfmatters: Instant mobile web apps. Xem http://developer.chrome.com/devsummit/simes và ghi nhớ điều đó - slide thực tế

Đó không phải là một ý tưởng tốt khi bạn muốn hình ảnh và thông tin phong cách của bạn được lưu trữ riêng biệt. Ngoài ra, nếu bạn mã hóa một hình ảnh lớn hoặc một số lượng đáng kể hình ảnh vào tệp css của mình, trình duyệt sẽ mất nhiều thời gian hơn để tải xuống tệp rời khỏi trang web của bạn mà không có bất kỳ thông tin kiểu nào cho đến khi quá trình tải xuống hoàn tất. Đối với những hình ảnh nhỏ mà bạn không có ý định thay đổi thường xuyên nếu đó là một giải pháp tốt.

khi tạo mã hóa base64:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (tải lên)
• http://www.greywyvern.com/code/php/binary2base64 (từ liên kết với các hướng dẫn nhỏ bên dưới)

Câu trả lời này đã hết hạn và không nên sử dụng.

1) Độ trễ trung bình nhanh hơn nhiều trên thiết bị di động trong năm 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) Ghép kênh HTTP2 https://http2.github.io/faq/#why-is-http2-multiplexed

"URI dữ liệu" chắc chắn nên được xem xét cho các trang web di động. Truy cập HTTP qua các mạng di động đi kèm với độ trễ cao hơn cho mỗi yêu cầu / phản hồi. Vì vậy, có một số trường hợp sử dụng trong đó gây nhiễu hình ảnh của bạn dưới dạng dữ liệu vào các mẫu CSS hoặc HTML có thể có lợi trên các ứng dụng web di động. Bạn nên đo lường mức độ sử dụng trong từng trường hợp cụ thể - Tôi không ủng hộ rằng URI dữ liệu nên được sử dụng ở mọi nơi trong ứng dụng web trên thiết bị di động.

Lưu ý rằng trình duyệt di động có giới hạn về tổng kích thước tệp có thể được lưu trong bộ nhớ cache. Giới hạn cho iOS 3.2 khá thấp (25K mỗi tệp), nhưng ngày càng lớn hơn (100K) cho các phiên bản Mobile Safari mới hơn. Vì vậy, hãy chắc chắn để theo dõi tổng kích thước tệp của bạn khi bao gồm các URI dữ liệu.

http://www.yuiblog.com/blog/2010/06/11/mobile-browser-cache-limits/

Nếu bạn tham chiếu hình ảnh đó chỉ một lần, tôi không thấy vấn đề gì khi nhúng nó vào tệp CSS của bạn. Nhưng một khi bạn sử dụng nhiều hơn một hình ảnh hoặc cần tham chiếu nó nhiều lần trong CSS của mình, bạn có thể cân nhắc sử dụng một bản đồ hình ảnh duy nhất thay vào đó bạn có thể cắt các hình ảnh duy nhất của mình từ (xem CSS Sprites ).

Một trong những điều tôi muốn đề xuất là có hai biểu định kiểu riêng biệt: Một với định nghĩa kiểu thông thường của bạn và một kiểu khác chứa hình ảnh của bạn trong mã hóa base64.

Bạn phải bao gồm biểu định kiểu cơ sở trước khi biểu định kiểu ảnh tất nhiên.

Bằng cách này, bạn sẽ đảm bảo rằng biểu định kiểu thông thường của bạn được tải xuống và áp dụng càng sớm càng tốt cho tài liệu, nhưng đồng thời bạn cũng thu được lợi nhuận từ các yêu cầu http giảm và các lợi ích dữ liệu khác mà bạn cung cấp cho bạn.

Base64 thêm khoảng 10% vào kích thước hình ảnh sau GZipped nhưng điều đó vượt xa lợi ích khi nói đến di động. Vì có một xu hướng chung với thiết kế web đáp ứng, nó rất được khuyến khích.

W3C cũng đề xuất phương pháp này cho thiết bị di động và nếu bạn sử dụng đường dẫn tài sản trong đường ray, đây là một tính năng mặc định khi nén css của bạn

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

Tôi không đồng ý với đề xuất tạo các tệp CSS riêng cho các hình ảnh không biên tập.

Giả sử hình ảnh là dành cho mục đích UI, đó là kiểu dáng lớp trình bày và như đã đề cập ở trên, nếu bạn đang sử dụng UI trên thiết bị di động, chắc chắn nên giữ tất cả kiểu dáng trong một tệp để có thể lưu vào bộ nhớ cache một lần.

Trong trường hợp của tôi, nó cho phép tôi áp dụng biểu định kiểu CSS mà không phải lo lắng về việc sao chép các hình ảnh liên quan, vì chúng đã được nhúng bên trong.

Tôi đã cố gắng tạo một khái niệm trực tuyến về công cụ phân tích CSS / HTML:

http://www.motobit.com/util/base64/css-images-to-base64.asp

Nó có thể:

• Tải xuống và phân tích các tệp HTML / CSS, trích xuất các phần tử href / src / url
• Phát hiện nén (gzip) và kích thước dữ liệu trên URL
• So sánh kích thước dữ liệu gốc, kích thước dữ liệu base64 và kích thước dữ liệu cơ sở được nén
• Chuyển đổi URL (hình ảnh, phông chữ, css, ...) sang sơ đồ URI dữ liệu cơ sở64.
• Đếm số lượng yêu cầu có thể được tha bởi URI dữ liệu

Bình luận / đề xuất đều được chào đón.

Antonin

Bạn có thể mã hóa nó trong PHP :)

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Nguồn

Mang lại một chút cho người dùng Sublime Text 2, có một plugin cung cấp mã base64 mà chúng tôi tải hình ảnh trong ST.

Được gọi là Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

PS: Không bao giờ lưu tệp này được tạo bởi plugin vì nó sẽ ghi đè lên tệp và sẽ phá hủy.

Cảm ơn thông tin ở đây. Tôi thấy việc nhúng này hữu ích và đặc biệt cho thiết bị di động, đặc biệt là với tệp css của hình ảnh được nhúng vào bộ nhớ cache.

Để giúp cuộc sống dễ dàng hơn, vì (các) trình chỉnh sửa tệp của tôi không xử lý việc này, tôi đã tạo một vài tập lệnh đơn giản cho công việc chỉnh sửa máy tính xách tay / máy tính để bàn, chia sẻ ở đây trong trường hợp chúng được sử dụng cho bất kỳ ai khác. Tôi đã bị mắc kẹt với php vì nó đang xử lý những điều này trực tiếp và rất tốt.

Trong Windows 8.1, hãy nói ---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... với tư cách Quản trị viên, bạn có thể thiết lập lối tắt đến tệp bó trong đường dẫn của mình. Tập tin bó đó sẽ gọi một tập lệnh php (cli).

Sau đó, bạn có thể nhấp chuột phải vào một hình ảnh trong trình duyệt tệp và SendTo the batchfile.

Ok yêu cầu Admiinstartor và đợi cửa sổ shell lệnh đen đóng lại.

Sau đó, chỉ cần dán kết quả từ bảng ghi tạm vào trình soạn thảo văn bản của bạn ...

<img src="|">

hoặc là

 `background-image : url("|")` 

Sau đây nên thích ứng cho hệ điều hành khác.

Tập tin hàng loạt ...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

Và với php.exe trong đường dẫn của bạn, điều đó gọi một tập lệnh php (cli) ...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

Theo như tôi đã nghiên cứu,

Sử dụng: 1. Khi bạn đang sử dụng một sprite svg. 2. Khi hình ảnh của bạn có kích thước nhỏ hơn (tối đa 200mb).

Không sử dụng: 1. Khi bạn là hình ảnh lớn hơn. 2. Các biểu tượng như của Svg. Vì chúng đã tốt và được nén sau khi nén.