優化圖像/速度性能的CSS

我有一個背景圖像，1000x666px，只有93kb。我用它作爲背景圖像，使用此代碼：優化圖像/速度性能的CSS

url(/Optimized-image1.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

當我設置此圖片作爲背景，我的jQuery效果是很慢，不流暢的。我的谷歌地圖的東西也一樣。

當我將背景設置爲白色或任何其他顏色時，它都很流暢，所以我認爲我的CSS代碼不太好。

我試着用javascript預加載圖片，但那不太好。此外base64不起作用。

任何提示？

來源

2012-01-21 yesterday

看來background-size: cover;表現不佳，至少在鉻。

看到Poor performance of Chrome using background-size: cover

這裏的替代解決方案列表http://css-tricks.com/perfect-full-page-background-image/

來源

2012-01-21 20:35:57

當我刪除所有的東西（封面），它的工作很不錯！但接下來會出現另一個問題：當我上傳圖片時，它必須在不同的屏幕上「相同」。所以2000x1000的圖像必須「縮放」，我知道我的意思。它必須充滿整個背景。 – yesterday

添加鏈接到替代品 –

首先，您可以使用SMush It優化圖像。你也可以用Clean CSS來優化你所有的CSS文件。

如果你想'sm'你的圖像dinamically，你可以使用Smush It，仍然。

1）用戶將上傳的圖像
2）獲取新信息的上傳圖片的URL（$ imgUrl的）
3）主動要求 http://www.smushit.com/ysmush.it/ws.php?img=$imgurl並獲得它的內容（這是一個JSON）來$content
4）使用$ newimage = json_decode（$ content）解析JSON;
5）新增及優化的圖像的URL是$newimage->dest下載，並用它:)

來源

2012-01-21 20:33:22 Eray

感謝乾淨的CSS鏈接。圖像的問題是，它是一個動態圖像。訪問者/用戶可以上傳他們自己的圖像。我有一個400kb的上傳限制。 – yesterday

@昨天，我正在更新我的答案，只需一分鐘。 – Eray

@昨天，已更新。 – Eray

你試過分層圖像和DOM對象與Z-指標，以確保他們arent爭奪資源？

來源

2012-01-21 20:35:08

優化圖像/速度性能的CSS

回答

相關問題