每個(gè)人都曾試圖在平淡的學(xué)習(xí)、工作和生活中寫一篇文章。寫作是培養(yǎng)人的觀察、聯(lián)想、想象、思維和記憶的重要手段。寫范文的時(shí)候需要注意什么呢？有哪些格式需要注意呢？這里我整理了一些優(yōu)秀的范文，希望對(duì)大家有所幫助，下面我們就來了解一下吧。
網(wǎng)頁設(shè)計(jì)中圖片該怎么排版好 網(wǎng)頁設(shè)計(jì)的圖片排版css篇一
現(xiàn)在的互聯(lián)網(wǎng)，是一個(gè)用戶體驗(yàn)至上的時(shí)代，大多數(shù)公司都會(huì)把如何提高產(chǎn)品的易用性放在首要位置。而圖片優(yōu)化在提高產(chǎn)品質(zhì)量上也起到了舉足輕重的作用，這也就是為什么越來越多的產(chǎn)品團(tuán)隊(duì)更加關(guān)注這個(gè)問題。網(wǎng)頁設(shè)計(jì)中圖片該怎么排版呢?下面是小編分享的方法，一起來看一下吧。
win8和ios7的出現(xiàn)，將互聯(lián)網(wǎng)行業(yè)中很多產(chǎn)品設(shè)計(jì)帶回到原點(diǎn)，或許更是另一個(gè)新的起點(diǎn)。win8的metro ui、ios7中圖標(biāo)的扁平化設(shè)計(jì)、一直崇尚簡(jiǎn)約的豆瓣網(wǎng)、還有頂著時(shí)代工匠稱號(hào)的老羅所設(shè)計(jì)的錘子rom，無一不體現(xiàn)著簡(jiǎn)約的風(fēng)格。
言歸正傳，回到我們圖片優(yōu)化的主題上。在產(chǎn)品設(shè)計(jì)和ui設(shè)計(jì)階段，除了內(nèi)容圖片，其他的圖片都是起修飾的作用。也就是對(duì)于傳遞信息來說并非本質(zhì)性的。所以最大的優(yōu)化就是不要圖片。在進(jìn)入到研發(fā)階段之前，就要確認(rèn)設(shè)計(jì)，設(shè)計(jì)本身是否需要用到那么多的圖片，還是說可以做到更簡(jiǎn)潔!
chrome，ff等瀏覽器廠商為互聯(lián)網(wǎng)的發(fā)展做了這么多貢獻(xiàn)，為什么我們還要讓那些不兼容css3的瀏覽器阻礙互聯(lián)網(wǎng)的發(fā)展呢。因此，讓我們直接使用css樣式代替圖片來實(shí)現(xiàn)修飾效果!例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對(duì)于那些低端瀏覽器，我們并不會(huì)完全拋棄他們，“漸進(jìn)增強(qiáng)”則是一個(gè)很好的解決方案。至于什么是漸進(jìn)增強(qiáng)，這里不再用過多篇幅去解釋，如果感興趣可以參考css“漸進(jìn)增強(qiáng)”在web制作中常見應(yīng)用舉例。
我們常見的圖片格式有jpeg、gif、png。
基本上，內(nèi)容圖片多為照片之類或圖片構(gòu)成較復(fù)雜的情況，適用于jpeg。如網(wǎng)站中的banner圖、輪播圖、大尺寸背景圖等。
。而我們主要用到的png圖片又分為png-8和png-24兩種，png-8格式不支持半透明，也是ie6兼容的圖片存儲(chǔ)方式。如果對(duì)圖片質(zhì)量要求較高的半透明或全透明背景，保存成png-24更合適。有時(shí)候會(huì)遇到在ie6下應(yīng)用png-24圖片的情況，關(guān)于ie6下png alpha透明的解決方案可以參考ie6中png alpha透明。我在項(xiàng)目中常用的方法是alphaimageloader篩選器。
gif基本上除了gif動(dòng)畫外不要使用。
除了這些格式之外，chrome、新版opera、android 4+支持webp格式，ie 9+、ie mobile 10+支持jpeg xr。這兩個(gè)新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當(dāng)然這需要為不同的瀏覽器返回不同的圖片，增加了開發(fā)成本，也增加存儲(chǔ)成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量，提升了用戶體驗(yàn)。這就需要根據(jù)項(xiàng)目需求進(jìn)行取舍了。
css sprites，將同類型的圖標(biāo)或按鈕等背景圖合到一張大圖中，減少頁面請(qǐng)求。
icon font，將圖標(biāo)做成字體文件。優(yōu)點(diǎn)是圖標(biāo)支持多個(gè)尺寸，兼容所有瀏覽器，減少頁面請(qǐng)求等。美中不足的是只支持純色的icon。
svg，對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖。現(xiàn)在主流瀏覽器都支持svg了，所以可放心使用!
圖片壓縮工具，可以在圖片上線前使用壓縮工具進(jìn)行壓縮，獲得更高的壓縮比。。
data url
base64是網(wǎng)絡(luò)上最常見的用于傳輸8bit字節(jié)的編碼方式之一，可用于在http環(huán)境下傳遞較長(zhǎng)的標(biāo)示信息。將圖片轉(zhuǎn)化為base64編碼格式，資源內(nèi)嵌于css或html中，不必單獨(dú)請(qǐng)求。
該方式的優(yōu)點(diǎn)是：
1. 減少了http請(qǐng)求
2. 避免了圖片重新上傳，還要清理緩存的問題
不足之處是：
1. ie6, ie7不支持該類型編碼的圖片作為背景圖
2. 增加了css文件的尺寸
3. 維護(hù)成本較高
按照http協(xié)議設(shè)置合理的緩存
具體的緩存策略(如永久緩存 + 重命名)、部署策略(如反向代理、cdn等)這里就不展開了。
s("content_relate");【網(wǎng)頁設(shè)計(jì)中圖片該怎么排版】相關(guān)文章：
網(wǎng)頁設(shè)計(jì)中圖片的排版方法
10-04
網(wǎng)頁設(shè)計(jì)文字排版
11-15
網(wǎng)頁設(shè)計(jì)文字排版技巧
09-12
網(wǎng)頁設(shè)計(jì)中怎么配色
09-29
網(wǎng)頁排版設(shè)計(jì)的技巧
09-05
網(wǎng)頁設(shè)計(jì)中該選哪種布局方式
09-29
網(wǎng)頁設(shè)計(jì)中css怎么學(xué)習(xí)
10-04
網(wǎng)頁設(shè)計(jì)中圖片常用的技巧
09-30
網(wǎng)頁設(shè)計(jì)中的圖片使用技巧
09-04
【本文地址：http://mlvmservice.com/zuowen/2747713.html】
