2016-12-04 分類: 網(wǎng)站建設(shè)
現(xiàn)在的互聯(lián)網(wǎng),是一個(gè)用戶體驗(yàn)至上的年代,大多數(shù)公司都會(huì)把怎么進(jìn)步產(chǎn)品的易用性放在首要位置。怎么進(jìn)步產(chǎn)品的質(zhì)量則體現(xiàn)在項(xiàng)目開發(fā)的許多階段,例如產(chǎn)品規(guī)劃、UI規(guī)劃和前端開發(fā)等。而圖片優(yōu)化在進(jìn)步產(chǎn)品質(zhì)量上也起到了無足輕重的作用,這也便是為什么越來越多的產(chǎn)品團(tuán)隊(duì)愈加重視這個(gè)問題。
本文關(guān)于圖片優(yōu)化的內(nèi)容首要由兩部分構(gòu)成:
1. 收拾總結(jié)網(wǎng)上關(guān)于圖片優(yōu)化的一些辦法辦法。
2. 自己在項(xiàng)目開發(fā)過程中實(shí)際遇到的問題以及用到的圖片優(yōu)化計(jì)劃。
如有不足之處,歡迎咱們指出并補(bǔ)充。
1. 精約而不簡單
Win8和iOS7的出現(xiàn),將互聯(lián)網(wǎng)職業(yè)中許多產(chǎn)品規(guī)劃帶回到原點(diǎn),或許更是另一個(gè)新的起點(diǎn)。Win8的Metro UI、iOS7中圖標(biāo)的扁平化規(guī)劃、一直崇尚精約的豆瓣網(wǎng)、還有頂著年代工匠稱號(hào)的老羅所規(guī)劃的錘子ROM,無一不體現(xiàn)著精約的風(fēng)格。
言歸正傳,回到咱們圖片優(yōu)化的主題上。在產(chǎn)品規(guī)劃和UI規(guī)劃階段,除了內(nèi)容圖片,其他的圖片都是起潤飾的作用。也便是關(guān)于傳遞信息來說并非實(shí)質(zhì)性的。所以大的優(yōu)化便是不要圖片。在進(jìn)入到研制階段之前,就要承認(rèn)規(guī)劃,規(guī)劃本身是否需求用到那么多的圖片,還是說能夠做到更簡練!
2. 款式替代圖片
Chrome,F(xiàn)F等瀏覽器廠商為互聯(lián)網(wǎng)的開展做了這么多奉獻(xiàn),為什么咱們還要讓那些不兼容CSS3的瀏覽器阻止互聯(lián)網(wǎng)的開展呢。因而,讓咱們直接運(yùn)用CSS款式替代圖片來實(shí)現(xiàn)潤飾作用!例如:半通明、圓角、暗影、高光、突變等。這些作用主流的瀏覽器都能夠好支撐,而關(guān)于那些低端瀏覽器,咱們并不會(huì)完全拋棄他們,“漸進(jìn)增強(qiáng)”則是一個(gè)很好的解決計(jì)劃。至于什么是漸進(jìn)增強(qiáng),這兒不再用過多篇幅去解說,假如感興趣能夠參考CSS“漸進(jìn)增強(qiáng)”在web制造中常見運(yùn)用舉例。
3. 挑選最合適的圖片
咱們常見的圖片格局有JPEG、GIF、PNG。
基本上,內(nèi)容圖片多為照片之類或圖片構(gòu)成較復(fù)雜的狀況,適用于JPEG。如網(wǎng)站中的Banner圖、輪播圖、大尺度背景圖等。
潤飾圖片通常更適合用無損緊縮的PNG。而咱們首要用到的PNG圖片又分為PNG-8和PNG-24兩種,PNG-8格局不支撐半通明,也是IE6兼容的圖片存儲(chǔ)辦法。假如對(duì)圖片質(zhì)量要求較高的半通明或全通明背景,保存成PNG-24更合適。有時(shí)候會(huì)遇到在IE6下運(yùn)用PNG-24圖片的狀況,關(guān)于IE6下PNG Alpha通明的解決計(jì)劃能夠參考IE6中PNG Alpha通明。我在項(xiàng)目中常用的辦法是AlphaImageLoader挑選器。
GIF基本上除了GIF動(dòng)畫外不要運(yùn)用。
除了這些格局之外,Chrome、新版Opera、Android 4+支撐WebP格局,IE 9+、IE mobile 10+支撐JPEG XR。這兩個(gè)新格局都支撐無損和有損緊縮,都具有更良好的緊縮比。當(dāng)然這需求為不同的瀏覽器回來不同的圖片,添加了開發(fā)本錢,也添加存儲(chǔ)本錢。不過你省了流量或者相同流量下改進(jìn)了圖片質(zhì)量,提升了用戶體驗(yàn)。這就需求依據(jù)項(xiàng)目需求進(jìn)行取舍了。
4. 常用的圖片優(yōu)化技巧
CSS Sprites,將同類型的圖標(biāo)或按鈕等背景圖合到一張大圖中,削減頁面懇求。
Icon Font,將圖標(biāo)做成字體文件。長處是圖標(biāo)支撐多個(gè)尺度,兼容所有瀏覽器,削減頁面懇求等。美中不足的是只支撐純色的icon。
SVG,關(guān)于絕大多數(shù)圖案、圖標(biāo)等,矢量圖更小,且可縮放而無需生成多套圖?,F(xiàn)在主流瀏覽器都支撐SVG了,所以可放心運(yùn)用!
圖片緊縮工具,能夠在圖片上線前運(yùn)用緊縮工具進(jìn)行緊縮,獲得更高的緊縮比。我常用的緊縮工具為Yahoo的Smush.it。
5. 適用各種資源而不限于圖片的優(yōu)化
data url
Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)的編碼辦法之一,可用于在HTTP環(huán)境下傳遞較長的標(biāo)明信息。將圖片轉(zhuǎn)化為base64編碼格局,資源內(nèi)嵌于CSS或HTML中,不用獨(dú)自懇求。
該辦法的長處是:
1. 削減了HTTP懇求
2. 避免了圖片從頭上傳,還要整理緩存的問題
不足之處是:
1. IE6, IE7不支撐該類型編碼的圖片作為背景圖
2. 添加了CSS文件的尺度
3. 保護(hù)本錢較高
按照HTTP協(xié)議設(shè)置合理的緩存
詳細(xì)的緩存策略(如永久緩存 + 重命名)、布置策略(如反向署理、CDN等)這兒就不展開了。
Responsive規(guī)劃
為了習(xí)慣現(xiàn)在眾多分辨率和設(shè)備像素比的移動(dòng)設(shè)備,要發(fā)生多套不同大小和分辨率的圖片,然后配合Media Query進(jìn)行開發(fā)。這兒推薦在進(jìn)行移動(dòng)端頁面開發(fā)時(shí)運(yùn)用SVG或Icon Font等技能。這些技能能夠好支撐Retina設(shè)備。
以上為項(xiàng)目中常用的圖片優(yōu)化技能,只有更多地重視細(xì)節(jié),才干做出優(yōu)秀的產(chǎn)品。
當(dāng)前題目:前端開發(fā)中的圖片優(yōu)化
本文路徑:http://m.rwnh.cn/news49/71099.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、面包屑導(dǎo)航、微信公眾號(hào)、網(wǎng)站導(dǎo)航、App開發(fā)、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容