資源描述:
《網(wǎng)頁設計中圖片該怎么排版》由會員上傳分享,免費在線閱讀,更多相關內(nèi)容在行業(yè)資料-天天文庫。
1、網(wǎng)頁設計中圖片該怎么排版 圖片優(yōu)化在提高產(chǎn)品質(zhì)量上也起到了舉足輕重的作用,而圖片的排版設計是很重要的,那么網(wǎng)頁設計中圖片該怎么排版呢?下面小編為大家解答一下,希望能幫到您! Win8和iOS7的出現(xiàn),將互聯(lián)網(wǎng)行業(yè)中很多產(chǎn)品設計帶回到原點,或許更是另一個新的起點。Win8的MetroUI、iOS7中圖標的扁平化設計、一直崇尚簡約的豆瓣網(wǎng)、還有頂著時代工匠稱號的老羅所設計的錘子ROM,無一不體現(xiàn)著簡約的風格。 言歸正傳,回到我們圖片優(yōu)化的主題上。在產(chǎn)品設計和UI設計階段,除了內(nèi)容圖片,其他的圖片都是起修飾的作用。也就是對于傳遞信息來說并非本質(zhì)性的。所以最大的優(yōu)化就是不要圖片。在
2、進入到研發(fā)階段之前,就要確認設計,設計本身是否需要用到那么多的圖片,還是說可以做到更簡潔! Chrome,F(xiàn)F等瀏覽器廠商為互聯(lián)網(wǎng)的發(fā)展做了這么多貢獻,為什么我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯(lián)網(wǎng)的發(fā)展呢。因此,讓我們直接使用CSS樣式代替圖片來實現(xiàn)修飾效果!例如:半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持,而對于那些低端瀏覽器,我們并不會完全拋棄他們,“漸進增強”則是一個很好的解決方案。至于什么是漸進增強,這里不再用過多篇幅去解釋,如果感興趣可以參考CSS“漸進增強”在web制作中常見應用舉例?! ∥覀兂R姷膱D片格式有JPEG、GIF、PNG
3、?! 』旧希瑑?nèi)容圖片多為照片之類或圖片構成較復雜的情況,適用于JPEG。如網(wǎng)站中的Banner圖、輪播圖、大尺寸背景圖等?! ⌒揎棃D片通常更適合用無損壓縮的PNG。而我們主要用到的PNG圖片又分為PNG-8和PNG-24兩種,PNG-8格式不支持半透明,也是IE6兼容的圖片存儲方式。如果對圖片質(zhì)量要求較高的半透明或全透明背景,保存成PNG-24更合適。有時候會遇到在IE6下應用PNG-24圖片的情況,關于IE6下PNGAlpha透明的解決方案可以參考IE6中PNGAlpha透明。我在項目中常用的方法是AlphaImageLoader篩選器?! 〕诉@些格式之外,Chrome、新
4、版Opera、Android4+支持WebP格式,IE9+、IEmobile10+支持JPEGXR。這兩個新格式都支持無損和有損壓縮,都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片,增加了開發(fā)成本,也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量,提升了用戶體驗。這就需要根據(jù)項目需求進行取舍了。 CSSSprites,將同類型的圖標或按鈕等背景圖合到一張大圖中,減少頁面請求。 IconFont,將圖標做成字體文件。優(yōu)點是圖標支持多個尺寸,兼容所有瀏覽器,減少頁面請求等。美中不足的是只支持純色的icon?! VG,對于絕大多數(shù)圖案、圖標等,矢量圖更小,
5、且可縮放而無需生成多套圖。現(xiàn)在主流瀏覽器都支持SVG了,所以可放心使用! 圖片壓縮工具,可以在圖片上線前使用壓縮工具進行壓縮,獲得更高的壓縮比。我常用的壓縮工具為Yahoo的。 dataurl Base64是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)的編碼方式之一,可用于在HTTP環(huán)境下傳遞較長的標示信息。將圖片轉(zhuǎn)化為base64編碼格式,資源內(nèi)嵌于CSS或HTML中,不必單獨請求?! ≡摲绞降膬?yōu)點是: 1.減少了HTTP請求 2.避免了圖片重新上傳,還要清理緩存的問題 不足之處是: 1.IE6,IE7不支持該類型編碼的圖片作為背景圖 2.增加了CSS文件的尺寸 3.維
6、護成本較高 按照HTTP協(xié)議設置合理的緩存 具體的緩存策略、部署策略這里就不展開了。