Q

如何在HTML中編碼圖像？

2012-07-13 71 views 3 likes

3

如何在HTML中對背景圖片進行編碼？例如：如何在HTML中編碼圖像？

background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX);

如果我有一個圖像文件，我如何編碼它的內容然後將其轉換爲字符串？這些自定義字體服務是做同樣的事情嗎？

2012-07-13 loyalflow

+0

要知道，對圖像數據意味着圖像不會在被緩存訪客的瀏覽器，這可能會減慢頁面呈現。對於非常小的圖像（如圖標）而言，這並不是非常糟糕，但對於大型圖像（特別是在移動設備上）會造成問題。如果沒有緩存是你要去的，那就不要這麼做。 – kevin628 2012-07-13 16:21:31

+0

@ kevin628：你能詳細說明一下嗎？如果CSS文件被緩存，那麼base64數據也不會被緩存嗎？ – pixelistik 2012-07-13 16:28:49

+0

@pixelistik是的，儘管它仍然需要將base64數據解碼爲圖像數據，而不是簡單地從緩存中提取數據。最終可能不會有真正的性能損失，但過去我曾看到程序員和設計師過度使用base64編碼。 – kevin628 2012-07-13 16:31:31

A

回答

4

你可以利用這個網站您的圖像轉換：

http://www.greywyvern.com/code/php/binary2base64

，並用它喜歡：

（X）HTML圖像嵌入例

<img alt="Embedded Image" width="158" height="158" 
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A..." />

CSS圖片嵌入例

div.image { 
    width:158px; 
    height:158px; 
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...); 
}

XML圖像嵌入例

<image> 
    <title>An Image</title> 
    <link>http://www.your.domain</link> 
    <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4A...</url> 
</image>

嵌入其他的東西！

數據URI可以存儲任何類型的數據，而不僅僅是圖像！試穿尺寸爲這些例子：（X）HTML CSS嵌入例

<link rel="stylesheet" type="text/css" 
    href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

（X）HTML的JavaScript嵌入例

<script type="text/javascript" 
    src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

2012-07-13 16:24:19

相關問題