不帶base64的HTML內聯圖像

Question

好吧，所以我知道我可以將圖像轉換為base64，然后將其添加到我的html中。 base64的問題在於，在我看來，它產生的數據比我的png圖像文件大33％，后者是最大壓縮300KB css sprite。

有什么方法可以在不使用base64的情況下傳輸圖像數據，然后將其組裝到客戶端上的圖像中？

我當時想傳輸十六進制圖像數據，然后使用javascript將其轉換為base64。 似乎可能，但是令人難以置信的冗余，因為它將立即從base64解碼回以顯示出來。

有任何想法嗎？

Answer 1

我剛剛進行了一些檢查文件大小的測試，發現沒有明顯的區別。

sizeof（gzip（index.html + sprite.png））= 301KB

sizeof（gzip（index_inline_b64_sprite.html））= 302KB

盡管base64文本比png本身大了約33％，但一旦壓縮后，似乎沒有什么顯着差異。

一旦您考慮到任何解決方案都可能會帶有嚴重的跨瀏覽器，甚至可能將奇怪的十六進制的安全性問題附加到html文件中，就我而言，似乎最好還是堅持使用base64。

另外還要感謝Barmar指出html中的ascii十六進制會更大，我一開始並沒有意識到這一點。