Mục đích của URI dữ liệu là gì?

Question

Tại sao tài nguyên đôi khi được nhúng trong URI dữ liệu, thay vì sử dụng URI thông thường liên kết đến tài nguyên được lưu trữ dưới dạng tệp trên máy chủ?

Answer 1

1. Giảm máy chủ yêu cầu

dữ liệu URI có thể được sử dụng để giảm tải máy chủ và cải thiện hiệu suất của khách hàng, bằng cách giảm số lượng yêu cầu HTTP yêu cầu để có được nguồn lực. Ví dụ, HTML này:

<img src="assets/bullet.png"> 

... có thể được thay thế bằng này:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA 
    ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5 
    o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9 
    D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3 
    pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj 
    eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38 
    k6jyMAAAAASUVORK5CYII=" 
> 

... để tạo ra một hình ảnh như thế này: với một ít yêu cầu HTTP.

Lưu ý: dường như không thể nhúng hình ảnh URI dữ liệu vào bài đăng Tràn ngăn xếp; tuy nhiên, hình ảnh ở trên đã được tải lên dịch vụ lưu trữ hình ảnh bằng cách sử dụng URI dữ liệu được hiển thị.

Nếu, ví dụ, trang web của bạn sử dụng nhiều biểu tượng nhỏ, ghi rõ họ tất cả như URI dữ liệu trong một stylesheet:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) } 
.icon-bullet-green { background-image: /* ... */ } 
.icon-save { background-image: /* ... */ } 
.icon-load { background-image: /* ... */ } 
.icon-delete { background-image: /* ... */ } 
/* ... etc. */ 

... có thể loại bỏ một số lượng lớn các yêu cầu HTTP, với chi phí tổng thể kích thước tải xuống, mức độ dễ đọc và khả năng tăng lên của bản chỉnh sửa xấu có thể khiến URI vô nghĩa (và khó sửa).

Một phương pháp thay thế để đạt được kết quả tương tự cho hình ảnh là sử dụng CSS sprites.

2. Nhúng nội dung trong một tập tin duy nhất

Một dữ liệu URI có thể được sử dụng để chứa tất cả các nguồn lực cần thiết để hiển thị một cách chính xác một trang trong một tài liệu duy nhất. Điều này có thể hữu ích trong ví dụ: một tệp README được phân phối cùng với một phần mềm. Về lý thuyết, các URI dữ liệu cũng có thể được sử dụng như một sự thay thế cho việc sử dụng các tệp đính kèm để nhúng tài nguyên trong email HTML, nhưng trong thực tế hỗ trợ khách hàng cho các URI dữ liệu là too unreliable để trở thành một kỹ thuật hữu ích.

3. cảnh báo trình duyệt Tránh

Một số trình duyệt hiển thị một cảnh báo nếu một trang chứa nội dung phục vụ trên một hỗn hợp của HTTP và HTTPS. Nếu máy chủ của bạn được thiết lập sao cho nội dung tĩnh như hình ảnh thường được phân phối qua HTTP, nhưng nội dung động được phân phối qua HTTPS, việc nhúng nội dung tĩnh đó bằng URI dữ liệu là giải pháp có thể có.

Answer 2

Ngoài câu trả lời trước (đây là một bản tóm tắt rất tốt), một điều tôi đã sử dụng cho thời gian gần đây là phông chữ. Nếu tôi chỉ cần sử dụng một tập nhỏ các ký tự từ một phông chữ (ví dụ: phông chữ thiết kế cho biểu trưng hoặc biểu tượng dấu chấm dingbat đặc biệt), tôi chỉ có thể mã hóa các ký tự mà tôi cần vào khai báo CSS @ font-face và không làm cho người dùng tải xuống toàn bộ tệp phông chữ.

Ví dụ, nếu tôi chỉ muốn ma quỷ (d) và thiên thần (e) phải đối mặt từ Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB), sau đó tôi có thể sử dụng công cụ phát webfont FontSquirrel của (http://www.fontsquirrel.com/tools/webfont-generator) để tạo ra một cái gì đó như thế này:

@font-face { 
    font-family: 'eggfaces'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

Xem fiddle này để biết ví dụ: http://jsfiddle.net/vuuVh/