2009-07-30 47 views
504

Hoàn toàn không tò mò, trình duyệt nào hỗ trợ hình ảnh Base64 làm việc? Những gì tôi đang đề cập đến là this.Nhúng Hình ảnh Base64

Tôi nhận ra đây không phải là giải pháp tốt cho hầu hết mọi thứ, vì nó làm tăng kích thước trang khá nhiều - tôi chỉ tò mò thôi.

Một số ví dụ:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." /> 

CSS:

div.image { 
    width:100px; 
    height:100px; 
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); 
} 
+2

lý do tại sao không thiết lập trang có ví dụ, tất cả chúng ta sẽ trải qua và thực hiện thử nghiệm thực tế và báo cáo tại đây –

+0

Nghe hay, tôi cũng sẽ thử. –

+3

64 bit chỉ mất 6 ký tự 2^6. Một chuỗi văn bản sẽ có 8 bit cho mỗi ký tự ở mức tối thiểu tùy thuộc vào loại mã hóa. Bạn mất ít nhất 25% hiệu quả .... kiểm tra nhanh chóng của tôi cho thấy mất khoảng 30%. –

Trả lời

327

Cập nhật: 2017-01-10

URI dữ liệu hiện được tất cả các trình duyệt chính hỗ trợ. IE cũng hỗ trợ nhúng hình ảnh kể từ phiên bản 8.

http://caniuse.com/#feat=datauri


URI dữ liệu đang được hỗ trợ bởi các trình duyệt web sau đây:

  • Gecko dựa trên, chẳng hạn như Firefox, SeaMonkey, XeroBank, Camino, Fennec và K-Meleon
  • Konqueror, thông qua hệ thống đầu vào/đầu ra KIO của KDE
  • Opera (bao gồm các thiết bị như Nintendo DSi hoặc Wii)
  • Dựa trên WebKit, chẳng hạn như Safari (bao gồm trên iOS), trình duyệt của Android, Epiphany và Midori (WebKit là một dẫn xuất của công cụ KHTML của Konqueror, nhưng Mac OS X không chia sẻ kiến ​​trúc KIO để triển khai được khác nhau), cũng như Webkit/Chromium dựa trên, chẳng hạn như Chrome
  • Trident
    • Internet Explorer 8: Microsoft đã giới hạn sự ủng hộ của mình cho một số "không định hướng" nội dung vì lý do an ninh, trong đó có những lo ngại rằng JavaScript được nhúng trong URI dữ liệu có thể không được diễn giải bởi bộ lọc tập lệnh, chẳng hạn như bộ lọc được sử dụng bởi ứng dụng email dựa trên web. URI dữ liệu phải nhỏ hơn 32 KiB trong Phiên bản 8 [3].
    • URI Dữ liệu chỉ được hỗ trợ cho các yếu tố và/hoặc các thuộc tính [4] như sau:
      • đối tượng (chỉ hình ảnh)
      • img
      • input type = image
      • liên kết
    • Tuyên bố CSS chấp nhận URL, chẳng hạn như hình nền, hình nền, kiểu danh sách, kiểu danh sách và tương tự.
    • Internet Explorer 9: Internet Explorer 9 không có giới hạn 32KiB và được phép trong các phần tử rộng hơn.
    • TheWorld Browser: Một trình duyệt vỏ IE trong đó có một built-in hỗ trợ cho các chương trình dữ liệu URI

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

+0

Hi Philippe, có cách giải quyết nào cho giới hạn kích thước 32 KiB trong IE8 không? Base64 có được hỗ trợ trong IE7 và IE6 không? Nếu không, bất kỳ giải pháp nào (không có bất kỳ giới hạn kích thước nào)? Nếu có, bất kỳ giới hạn kích thước nào? Nếu có, bất kỳ cách giải quyết nào? – SexyBeast

+0

Nhìn vào điều này, có lẽ nó sẽ giúp: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ –

+0

Các tiêu chuẩn có nói gì không? Một số upvote để cập nhật câu trả lời tốt =). –

47

Hầu hết các trình duyệt máy tính để bàn hiện đại như Chrome, Mozilla và Internet Explorer hình ảnh hỗ trợ được mã hóa dưới dạng URL dữ liệu. Nhưng có vấn đề khi hiển thị URL dữ liệu trong một số trình duyệt di động: Trình duyệt Android Stock và Trình duyệt Dolphin sẽ không hiển thị các ảnh JPEG được nhúng.

tôi khuyên bạn sử dụng các công cụ sau cho trực tuyến mã hóa base64/giải mã:

Kiểm tra "Format như URL dữ liệu" tùy chọn để định dạng dưới dạng URL dữ liệu.

Các vấn đề liên quan