2012-09-18 180 views
0

今天看到網站的來源,我發現了一些讓我感到驚訝的東西。他們已經包含在CSS文件中的圖像(見http://static.a.gs-cdn.net/webincludes/css/production-uri.css?20120521.1在css中包含圖像

這讓我很吃驚,當然加載一個大文件嵌入將需要更長的時間在一個現代的瀏覽器(即鉻打完鬮內容的同時請求的所有圖像它需要),並且更難調試任何css問題。這是否正確,這種方法有沒有優勢?

+0

「這種方法有沒有什麼優勢」 - 我能想到的唯一一個就是圖像混淆,即使如此,它看起來並沒有什麼好處。 – j08691

+0

你可以Google for'SpriteSheet' –

回答

5

在CSS中包含圖像沒有任何問題,儘管使用CSS sprites可能更有效。

這是有道理的使用UI元素(但不內容元素)CSS精靈,因爲它減少HTTP請求的數量。

+0

+1提供更好的選擇 - CSS精靈。 –

0

This is a good article詳細介紹了這種方法的優點和缺點。

優點:

最大的原因是:它節省HTTP請求。除純文檔大小外,這是關於頁面加載速度的首要因素。更少=更好。

缺點:

很難保持與所有嵌入式數據URI網站。更新圖像並將其替換更容易。

你應該只在嚴重緩存的文檔中使用它,就像你的CSS應該一樣。如果CSS文件保存了6個HTTP請求,但只有該CSS文件緩存的時間和這些圖片的緩存時間一樣,才能使用300k而不是50k的CSS文件。

我個人從未使用過它。它節省了HTTP請求,但是用我認爲不適合的東西來擴大你的CSS。爲了清晰地分離問題,圖像應該只是圖像。

此外,您將難以緩存所有資源 - 如果您對CSS進行了一次更改,那麼所有圖像數據都會無緣無故地重新下載。

+0

你應該在你的答案中包含文章的重要部分。如果鏈接斷開,你的回答就變得毫無用處。 –

+0

@NikolaK。感謝 - 公平點,將添加一個簡短的總結。 –

+0

有問題的CSS或圖片有多頻繁?當用戶重新訪問您的網站時,他們的瀏覽器可能已將您的網站從緩存中清除(移動設備具有非常小的最大緩存)。指南針(Sass的擴展,CSS預處理器)具有生成圖像數據字符串的功能,因此無需每次更新時都使用它。似乎沒有很多缺點。 – cimmanon