css sprite 及圖片優化那些事
css sprite 及圖片優化那些事
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~~
相關文章
- 圖片優化的那些工具優化
- base64,雪碧圖CSS Sprite,直接使用圖片CSS
- Liferay前端效能調優(5)sprite圖片前端
- Android中記憶體優化的那些事 - 一個有關圖片的優化記錄Android記憶體優化
- Android中記憶體優化的那些事 – 一個有關圖片的優化記錄Android記憶體優化
- MySQL優化那些事兒MySql優化
- 【前端優化】js圖片懶載入及優化前端優化JS
- app 效能優化的那些事APP優化
- 圖片優化優化
- css spriteCSS
- webpack4.0優化那些事兒Web優化
- app 效能優化的那些事(二)APP優化
- 前端效能優化 --- 圖片優化前端優化
- Web效能優化:圖片優化Web優化
- 網站優化之路—圖片優化,圖片從模糊到清晰網站優化
- web前端優化之圖片優化Web前端優化
- 效能優化04-圖片優化優化
- Web效能優化之圖片優化Web優化
- 「前端那些事兒」② 極限效能優化前端優化
- 簡單說說PHP優化那些事PHP優化
- Android效能優化——圖片優化(二)Android優化
- HTML CSS SPRITE 工具HTMLCSS
- Android效能優化(六)之卡頓那些事Android優化
- 巧用 CSS 把圖片馬賽克化CSS
- 淺探前端圖片優化前端優化
- APP查詢圖片優化APP優化
- Android記憶體優化之圖片優化Android記憶體優化
- iOS效能優化 - 網路圖片載入優化iOS優化
- cocos2d-x_lua改變Sprite圖片
- css sprite雪碧圖製作,使用以及相關,圖文gif。CSS
- 如何處理 Web 圖片優化?Web優化
- iOS圖片記憶體優化iOS記憶體優化
- 前端效能優化之路——圖片篇。前端優化
- 載入GIF圖片優化方案優化
- 科技軟文營銷圖片優化不可忽視,圖片優化需要了解這些優化
- Android APP 記憶體優化之圖片優化AndroidAPP記憶體優化
- WEB前端優化:使用“漸進”圖片或“交錯”圖片Web前端優化
- 段合併優化及注意事項優化