目前位置:
首頁 / 嵌入式圖形與數據網址
嵌入式圖形與數據網址
摘要：
了解如何插入圖片到您的數據網址網頁裡。數據：URI方案包括圖像直接插入到您的XHTML網頁使用語法，而不是使用外部檔案。
了解如何插入圖片到您的數據網址網頁裡。數據：URI方案包括圖像直接插入到您的XHTML網頁使用語法，而不是使用外部檔案。
嵌入式圖片使用數據URI策劃將圖像直接嵌入在網頁內。至於RFC 2397定義，數據URI的設計嵌入小數據項為“即時”的數據，猶如他們引用的外部。使用嵌入式圖片保存在外部的HTTP請求引用的網頁。
瀏覽器支持的數據網址
雖然 Opera 7.2 +，Firefox和Safari，Netscape和Mozilla支持數據的URI，但Internet Explorer 5-7沒有。不過，Internet Explorer 8據說不中，通過Acid2的測試，使得數據的網址可行的選擇較小的方式嵌入圖像。另外一個方法就是，您可以使用舊版本的Internet Explorer。
數據網址計劃
毫無疑問地，你所看到的其他網址在計畫傳導環繞整個網路，例如http:、ftp:和mailto:。Data URL計畫是一種嵌入“即時數據”猶如包含整個外部。
CSS和嵌入式圖片
嵌入在XHTML的檔案，數據圖像的URL不快取重複使用，也不是快取頁面到頁面。其中一個手段，使快取嵌入背景圖像在外部CSS檔案。 CSS是快取瀏覽器和這些圖像可重複使用的選擇。
數據網址的問題
你必須重新計算 base64數據和編輯 CSS檔案每次圖像的變化。此外，IE5-7版本的瀏覽器不支持內嵌圖片。讀取圖像並將其轉換為一個 base64自動存在伺服器上。
Internet Explorer的變通辦法
有兩種方法解決數據支持 IE的網址缺乏。使用瀏覽器你可以簡單地顯示外部形象的IE瀏覽器和嵌入式圖像其他瀏覽器。或者你可以使用JavaScript來模擬數據的URL支持IE瀏覽器，但這種方法需要有相當數量的JavaScript原始碼。
當您的伺服器分析CSS檔案，它會自動將二進制圖像檔案編碼，並傳送到一個 base64編碼內嵌的圖像數據直接在CSS檔案裡。接下來，您需要增加瀏覽器提供內嵌 IE瀏覽器的圖像和所有其他的圖像。
數據網址的優點
數據保存的網址 HTTP請求。當結合CSS精靈，數據網址可以節省大量HTTP請求。看看資料的網址可以結合 USEMAPS或建立數據網址的CSS精靈。
＊保存HTTP請求，避免增加網頁的負擔。
＊保存共同線 - 瀏覽器預設為兩個主機同時連接。
＊HTTPS請求簡單和性能提高。
＊保存HTTP請求，避免增加網頁的負擔。
＊保存共同線 - 瀏覽器預設為兩個主機同時連接。
＊HTTPS請求簡單和性能提高。
數據網址的缺點
嵌入式圖像不支援在Internet Explorer 5－7版，儘管第8版是支援他們。原文表示的Base64的圖像數據也需要更多字節的二進制圖像。Base64數據是39至45％大於二進制圖像，但用gzip壓縮，差異只減少大約8至9％。優化你的圖片轉換到一個base64減少了字符串的大小成比例。
內嵌的圖像有大小限制。瀏覽器只支援網址最多為1,024 bytes的長度，根據上述的RFC。瀏覽器是在什麼更為寬鬆他們會接受的。Opera限制數據的網址約為 4100 characters。Firefox的支援數據網址最高為100K，所以這種方法最適用於小且裝飾的圖像。總之：
＊IE5-7瀏覽器不支援。
＊更多的步驟來更新嵌入式內容。
＊長度的限制 - 技巧是有用的在小且裝飾的圖片
＊Base64的編碼圖像是約33％大於二進制
＊IE5-7瀏覽器不支援。
＊更多的步驟來更新嵌入式內容。
＊長度的限制 - 技巧是有用的在小且裝飾的圖片
＊Base64的編碼圖像是約33％大於二進制
結論：
隨著Internet Explorer 8的版本，數據 URI將成為一個可行的選擇。您可以直接嵌入小圖像在網頁上的數據保存的網址。數據網址是一種方便的方式來建立與世隔絕的網頁且不依賴外部的網頁。
| 2010.03.04 |