DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css(html)背景圖優化合並技巧詳解
css(html)背景圖優化合並技巧詳解
編輯:CSS詳解     
css背景圖優化合並包括圖片本身的優化,使用多張圖片的合並:CSS Sprites技術或者是分類合並等等,都可以,下面一一為大家介紹下 圖片本身的優化

圖像質量要求和圖像文件大小決定你用什麼格式的圖片,用較小的圖片文件呈現較好的圖像質量。
當圖片色彩過於豐富且無透明要求時,建議采用jpg格式並保存為較高質量。
當圖片色彩過於豐富又有透明或半透明要求或陰影效果時,建議采用png24格式,並對IE6進行png8退化(或在不得已情況下使用濾鏡)。
當圖片色彩不太豐富時無論有無透明要求,請采用png8格式,大多數情況下建議采用這種格式。
當圖片有動畫時,只能使用gif格式。
你可以使用工具對圖片進行再次壓縮,但前提是不會影響色彩和透明。

多張圖片的合並:CSS Sprites技術

單個圖標之間必須保留空隙,空隙大小由容器大小及顯示方式決定。這樣做的好處是既考慮了“容錯性”又提高了圖片的可維護性。
圖標的排列方式,也由容器大小及顯示方式決定。排列方式分為以下幾種:橫向排列(容器寬度有限)、縱向排列(容器高度有限)、斜線排列(容器寬高不限),靠左排列(容器背景居左)、靠右排列(容器背景居右)、水平居中排列(容器背景水平居中)、垂直居中排列(容器背景垂直居中)。
合並後圖片大小不宜超過50K,建議大小在20K-50K之間。
為保證多次修改後的圖片質量,請保留一份PSD原始圖,修改和添加都在PSD中進行,最後導出png。

分類合並:

並不是把所有的圖標都合並在一張圖片裡就是最好的,除了要控制圖片大小之外還要注意以下方法。

按照圖片排列方式,把排列方式一樣的圖片進行合並,便於樣式控制。
按照模塊或元件,把同屬於一個模塊或元件的圖片進行合並,方便模塊或元件的維護。
按照圖片大小,把大小一致或差不多的圖片進行合並,可充分利用圖片空間。
按照圖片色彩,把色彩一致或差不多的圖片進行合並,保證合並後圖片的色彩不過於豐富,可防止色彩失真。
綜合以上方法進行合並。 Tag:背景圖 優化合並
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved