加載高分辨率背景圖像

我有一個2000像素×1500像素的彩色背景圖像，由於細節我將它保存爲一個以1.1 MB渲染的jpeg。我正在使用CSS背景屬性來渲染圖像。因此，對於Web開發人員來說相對較新，並且與在此過程中不打算改變設計的客戶端/設計師一起工作，我應該如何幫助此映像快速加載。我不知道它是否有所作爲，但該網站正在使用Joomla 1.5.9。這是我一直想了解的東西，但遇到麻煩，無法找到解決方案...我希望有人能幫助！加載高分辨率背景圖像

謝謝大家！

來源

2011-06-01 art_wired

沒有任何東西可以讓圖像自己更快下載。我會說1.1MB的背景圖片是不可接受的。 – alex 2011-06-01 02:15:01

您可能認爲這是不可接受的，但該網站about.me是一個相當流行的社交網絡使用關於這個尺寸的圖像。 – mcbeav 2011-06-01 02:19:09

我在about.me上看不到任何1.1MB圖片，也許你可以提供一個例子嗎？考慮到你除了背景之外沒有加載任何東西，並且你已經超過了MB，那真的是可以接受的。對於那些不是快速寬帶的網頁來說，這個頁面將會令人難以置信地變慢。讓圖像再次啓動並不會改變頁面加載速度慢的事實。 – 2011-06-01 03:55:25

沒有辦法讓圖像神奇地加載更快。但是，有時候，將圖像分成較小的圖像可以獲得驚人的尺寸增益;所以如果你的CSS佈局沒有問題（通常是這樣），你可以試試這個。

您的另一種可能性是使用progressive JPEG圖像。它們的編碼方式使瀏覽器能夠在加載時顯示逐漸更精確的圖像。這意味着，首先，圖像看起來模糊（或不完整），但具有全維度，則逐漸變得更清晰和更好。它非常適合意圖加載緩慢的圖像（或至少，圖像被確認加載緩慢）。

來源

2011-06-01 05:10:50 zneak

我發現了一個名爲Image Optim for Mac OSX machines（http://imageoptim.pornel.net/）的工具...對於減小圖像文件大小非常有效......對此應用程序有任何想法？ – 2011-06-02 08:21:33

@art_wired那麼，看看截圖，它似乎每個圖像節省6-7％。我認爲它不會受到傷害，但我不認爲這是解決所有圖像尺寸問題的「通用」解決方案。 – zneak 2011-06-02 13:46:46

你可以immediatley使用

<script> 
(new Image()).src = "IMAGE PATH"; 
</script>

調用的頭部圖像，並確保你對圖像進行壓縮，就像你可以用不同的程序，或者如果你有Photoshop CS5的，你可以將它保存爲一個網絡設備去掉所有多餘的垃圾，你可以試試雅虎的smush.it

http://www.smushit.com/ysmush.it/

，或者你可能會推遲的網站加載完全幾秒鐘，直到你可以肯定的是，圖像正在加載，你不能RY類似像

* CSS隱藏所有的元素和衰落他們在一個setTimeout的東西

body{ 
opacity:0; 
}

* jQuery的

setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);

儘管這可能不是所有的實用。

來源

2011-06-01 02:13:03 mcbeav

腳本將以與CSS大致相同的優先級執行，因此它不會預加載任何內容。 – zneak 2011-06-01 02:17:05

通過使用不透明度，您可以確定圖像仍然會加載，而不是使用display：none; – mcbeav 2011-06-01 02:17:36

是的，這是真的，但在調用css文件之前堅持它，讓它開始跳躍。 – mcbeav 2011-06-01 02:20:24

你可以做的最好的事情就是儘量縮小文件的大小。讓這個使用某種類型的優化器，例如smush.it。如果您創建了背景圖片，請嘗試先將其保存爲漸進圖片，然後先加載較低的res版本，然後完成加載。但最好的辦法是嘗試縮小圖像寬度和高度的大小，方法是找到重複的圖案，然後裁剪出該部分並使用它。大多數about.me圖像的大小不超過100kb，寬度超過1200px。

來源

2011-06-01 05:12:34

會在頁面的其餘部分加載後爲您加載背景圖片嗎？至少這樣，訪問者將能夠使用您的網站的其餘部分，直到1.1MB已經加載。

在onload函數中，將<body>的style屬性設置爲background: url(image.jpg)的一些內容？

來源

2011-06-01 05:18:51 Marty

背景已經異步加載到頁面的內容。 – zneak 2011-06-01 05:27:44

好的信息，我會牢記在心。 – Marty 2011-06-01 05:28:49

通過CDN傳遞圖像可能會加快速度;更好的通常會進行優化，以便爲各種各樣的客戶端提供適當的TCP數據包大小/ MTU，並且通常在快速交付內容方面做了大量工作。像手機這樣的緩慢連接仍然會令你憎恨，但像正確分組的大小可以充分利用可用的帶寬。

來源

2012-05-08 23:33:01

加載高分辨率背景圖像

回答

相關問題