關於CSS圖片的優化建議

這篇文章主要介紹了CSS圖片優化的一些相關建議,主要針對Sprites圖片整合技術來作簡單介紹,需要的朋友可以參考下

　　CSS圖片優化就是盡量壓縮圖片的大小，加快頁面載入速度，這對於大型網站是很有用的。不要小看它，它可以大大提高網頁載入速度。通常大家用到的方法就是css sprites。

　　CSS Sprites(圖片整合技術) 的目的是透過整合圖片，減少對伺服器的請求數量，從而加快頁面載入速度。想必很多人已經在用這個技術，我跟大家簡單介紹一下，總結一下我使用css sprite時的一些技巧。
　　CSS Sprites實作方法：

　　先將小圖片整合到一張大的圖片上，然後根據特定圖示在大圖上的位置，將背景定位。
　　CSS Sprites技術要點總結：

　　1. 小圖片整合時，按照從上到下的順序，而不要一個圖片挨著一個圖片從左到右排列。這樣排列background-position的值一目了然，寫css時方便許多。同時也是為了後製維護著想。想像一下，如果後期維護時，改動其中某個圖片的尺寸，那麼周圍的所有元素的background-position就會隨之改變，這將會是一件很頭痛的事情。

　　2. 小圖片整合時盡量靠最左邊或最右邊。這兩個位置很靈活，非常適合擺放文字前的icon，再寫樣式時不會受到其它CSS Sprites圖片幹預。綜合第1點，我們可以沿著最左邊和最右邊的兩側開始從上到下整合圖片。

　　3. 不建議在不同小圖片上​​下留間隔。因為這樣會導致圖片size增大從而增加檔案的大小。這些間隔是沒有必要存在的。

　　4. 把圖片中顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片檔案體積會相對的小。
　　圖片優化：

　　當我們把所有小圖片都整合到一張大圖中後，就要開始考慮圖片優化的問題。你可以看一下現在圖片的檔案大小。是不是有些不盡人意呢，沒關係，下面的步驟可以解決它。

　　因為一般整合出的大圖背景基本上都是全透明的，所以我們會存為png格式。大家可能會說gif比png檔案大小小，我們不是要優化嗎，為什麼不是gif？因為gif圖片在處理圓角等曲線、或斜線的地方會出現很多鋸齒，這是我們不希望看到的。而且可能會失去一些接近白色的小圖片像素。況且我們還能找到比gif更小尺寸的格式，那就是我今天要介紹的PNG8格式。

　對於非動畫的GIF更建議都使用PNG8因為它能做到跟原png圖片一樣的效果，而且能為你節省10%-30%的檔案大小，甚至比gif圖片還節省。
　　如何將圖片轉換成png8格式

　　1. 圖片準備：無論你是用什麼繪圖軟體繪的圖，只要按常規操作儲存為png格式就可以了。 photoshop中沒有轉png8的操作，所以我們需要求助於fireworks。

　　2. 在fireworks中開啟整合好的大圖。

　　3. 選擇 檔案—影像預覽。

　　4.在「格式」下拉方塊中選擇PNG8，其他什麼都不用選，直接點選「匯出」按鈕選擇路徑就可以了。

　　很簡單吧~趕快看看你的png8圖片的大小吧，跟之前的圖片比較一下。你會有驚喜的！ ~~在看圖片質量，簡直是perfect~~

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

使用CSS3點擊按鈕實現背景漸層動畫的效果

以上是關於CSS圖片的優化建議的詳細內容。更多資訊請關注PHP中文網其他相關文章！