使我的背景圖片加載速度更快

http://www.leona-anderson.com 使我的背景圖片加載速度更快

body { 
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed; 
background-size:100% auto; 
}

我對每個站點的不同的背景圖像，因爲它們是1080，他們需要一點加載。

我使用wordpress 4.0.5與minamaze主題。

我發現我使用預加載的JavaScript函數，但在我的情況下，在FrontPage中我沒有關於其他網站的背景圖片的信息，所以我希望有人可以提供給我不同的解決方案。

我的圖像是一個大約1mb大小的png，也許我也可以嘗試將它們壓縮一些？

在此先感謝

來源

2014-10-19 Jakob Abfalter

你不應該對這樣的圖像使用.png。作爲一般規則，照片應該是.jpg和圖形（例如徽標）應該編入索引.png

我將文件大小從1.3MB減少到139KB，視覺差異幾乎沒有引人注意。

下面是優化的圖像：Optimized

這裏是你的：Original

來源

2014-10-19 16:16:25

你用什麼方法壓縮它？ – 2015-08-01 00:14:59

我使用Photoshop導出爲jpg，質量爲100％。幾乎任何圖書館，API或在線服務都應該達到相同的結果。 – 2015-08-02 12:19:39

下來就可以減哪個網站巨大的優勢，如果你使用CSS3背景漸變，而不是大背景圖像需要在加載的時間。談到比如您的主頁背景圖片，你可以創建一個後臺=梯度這樣，使用的女士爲背景圖像，並將其位置在右邊的圖像：

#content { 
 
    display: block; 
 
    height: 1500px; 
 
} 
 
body { 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff); 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff); 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff); 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff); 
 
}

<body> 
 
    <div id="content"></div> 
 
</body>

來源

2014-10-19 16:13:00

我想要走的路是壓縮到JPEG文件。你可以選擇大多數軟件的壓縮程度（我使用GIMP）。 1Mb對於背景圖像而言實際上意味着太大。

來源

2014-10-19 16:13:43 Memophysic

您是否考慮將背景緩存到用戶設備，以便重複使用的用戶具有更快的加載時間link？

來源

2014-10-19 16:15:56 Oliver

既然你只使用一個梯度和女人，你可以用CSS3實現顏色漸變，只加載女人爲圖像：

CSS：

body { 
    background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #B200FF , white); /* Standard syntax */ 
}

小提琴：http://jsfiddle.net/n4anrzk8/1/

或者您嘗試使用https://tinypng.com/以獲得更小的PNG文件，如果它必須是圖像。

另一種很不好的方法是在第一頁加載所有寬度爲0的圖像。它們不可見，但瀏覽器將它們保存在緩存中（如果訪問者使用其瀏覽器的緩存）。我不推薦這種方法，它只是爲了完整性。

來源

2014-10-19 16:24:44

使我的背景圖片加載速度更快

回答

相關問題