CSS圖片優(yōu)化的相關(guān)建議有哪些，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
CSS圖片優(yōu)化就是盡量壓縮圖片的大小，加快頁面加載速度，這對于大型網(wǎng)站是很有用的。不要小看它，它可以大大提高網(wǎng)頁加載速度。通常大家用到的方法就是css sprites。
CSS Sprites(圖片整合技術(shù)) 的目的就是通過整合圖片，減少對服務(wù)器的請求數(shù)量，從而加快頁面加載速度。想必很多人已經(jīng)在用這個(gè)技術(shù)，我給大家簡單介紹一下，總結(jié)一下我使用css sprite時(shí)的一些技巧。
CSS Sprites實(shí)現(xiàn)方法：
首先將小圖片整合到一張大的圖片上，然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。
CSS Sprites技術(shù)要點(diǎn)總結(jié)：
1. 小圖片整合時(shí)，按照從上到下的順序，而不要一個(gè)圖片挨著一個(gè)圖片從左到右排列。這樣排列background-position的值一目了然，寫css時(shí)方便許多。同時(shí)也是為了后期維護(hù)著想。想象一下，如果后期維護(hù)時(shí)，改動(dòng)其中某個(gè)圖片的尺寸，那么周圍的所有元素的background-position就會隨之改變，這將會是一件很頭疼的事情。
2. 小圖片整合時(shí)盡量靠最左邊或者最右邊。這兩個(gè)位置很靈活，非常適合擺放文本前的icon，再寫樣式時(shí)不會受到其它CSS Sprites圖片干預(yù)。綜合第1點(diǎn)，我們可以沿著最左邊和最右邊的兩側(cè)開始由上至下整合圖片。
3. 不建議在不同小圖片上下留間隔。因?yàn)檫@樣會導(dǎo)致圖片size增大從而增加文件的大小。這些間隔是沒有必要存在的。
4. 把圖片中顏色較近或相同的組合在一起可以降低顏色數(shù)，因?yàn)樯偕珨?shù)的圖片文件體積會相對的小。
圖片優(yōu)化：
當(dāng)我們把所有小圖片都整合到一張大圖中后，就要開始考慮圖片優(yōu)化的問題。你可以看一下現(xiàn)在圖片的文件大小。是不是有些不盡人意呢，沒關(guān)系，下面的步驟可以解決它。
因?yàn)橐话阏铣龅拇髨D背景基本上都是全透明的，所以我們會存為png格式。大家可能會說gif比png文件大小要小，我們不是要優(yōu)化嗎，為什么不是gif？因?yàn)間if圖片在處理圓角等曲線、或斜線的地方會出現(xiàn)很多鋸齒，這是我們不希望看到的。而且可能會丟失一些接近于白色的小圖片像素。況且我們還能找到比gif更小尺寸的格式，那就是我今天要介紹的PNG8格式。
對于非動(dòng)畫的GIF更建議都使用PNG8因?yàn)樗茏龅礁璸ng圖片一樣的效果，而且能為你節(jié)省10%-30%的文件大小，甚至比gif圖片還節(jié)省。
如何將圖片轉(zhuǎn)成png8格式
1. 圖片準(zhǔn)備：無論你是用什么繪圖軟件繪的圖，只要按常規(guī)操作保存為png格式就可以了。photoshop中沒有轉(zhuǎn)png8的操作，所以我們需要求助于fireworks。
2. 在fireworks中打開整合好的大圖。
3. 選擇 文件—圖像預(yù)覽。
4.在“格式”下拉框中選擇PNG8，其他什么都不用選，直接點(diǎn)擊“導(dǎo)出”按鈕選擇路徑就可以了。
看完上述內(nèi)容，你們掌握CSS圖片優(yōu)化的相關(guān)建議有哪些的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
