中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

前端開發(fā)中,對(duì)圖片的優(yōu)化技巧有哪些?

2020-09-07    分類: 網(wǎng)站建設(shè)

鏈接:https://www.zhihu.com/question/21815101/answer/19410993

1. 去掉無意義的修飾。嗯,我會(huì)瞎說嗎?除了內(nèi)容圖片,其他的圖片的作用是修飾,也就是對(duì)于傳達(dá)信息來說并非本質(zhì)性的。大的優(yōu)化就是壓根不要圖片!所以在優(yōu)化之前要做的,首先是確認(rèn)設(shè)計(jì),設(shè)計(jì)本身是否需要用那么多圖片?還是說可以更簡(jiǎn)潔?

2. 不用圖片。嗯,切圖是一件扯淡的事情!不要隔靴搔癢了少年,直接使用CSS替代圖片來實(shí)現(xiàn)修飾效果吧!如半透明、邊框、圓角、陰影、漸變等,在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成。將來CSS濾鏡得到廣泛支持后,還可以做到alpha混合、正片疊底等各種效果。

3. 使用矢量圖替代位圖。對(duì)于絕大多數(shù)圖案、圖標(biāo)等,矢量圖更小,且可縮放而無需生成多套圖?,F(xiàn)在主流瀏覽器都支持SVG了,所以可放心使用!

4. 使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG、GIF、PNG?;旧?,內(nèi)容圖片多為照片之類的,適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。而GIF基本上除了GIF動(dòng)畫外不要使用。且動(dòng)畫的話,也更建議用video元素和視頻格式,或用SVG動(dòng)畫取代。除了這些格式之外,Chrome、新版Opera、Android 4+支持WebP格式,IE 9+、IE mobile 10+支持JPEG XR。這兩個(gè)新格式都支持無損和有損壓縮,都具有更良好的壓縮比。當(dāng)然這需要為不同的瀏覽器返回不同的圖片,增加了開發(fā)成本,也增加存儲(chǔ)成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量,提升了用戶體驗(yàn)。你會(huì)如何取舍呢?對(duì)了,別忘了使用優(yōu)秀的圖片編碼器及合適的參數(shù)。好的圖片編碼器,尤其是有損圖片格式的編碼器,能通過算法或手動(dòng)調(diào)整,獲得更高的壓縮比。

以下是普遍適用各種資源而不限于圖片的優(yōu)化手段:

5. 使用data url。資源內(nèi)嵌于CSS或HTML中,而不必單獨(dú)請(qǐng)求。注意,多個(gè)地方都要使用的資源不一定適合用此優(yōu)化方式,因?yàn)閳D片數(shù)據(jù)重復(fù)多了,增加流量。另外許多瀏覽器對(duì)data url有長度限制,注意資源的大小。

6. 按照HTTP協(xié)議設(shè)置合理的緩存。具體的緩存策略(如永久緩存+重命名)、部署策略(如反向代理、CDN等)這里就不展開了。

7. 使用支持SPDY的服務(wù)器。SPDY可認(rèn)為是未來的HTTP 2.0的早期實(shí)現(xiàn),Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可參考此中文演講:http://www.youtube.com/watch?v=r74RAcrc1ZA(請(qǐng)自備梯子),這里就不展開了。

8. 資源的lazyload或postpone。(lazyload:延遲到其他資源下載完成后再加載,postpone:延遲到元素可見再加載。)目前基本上都要用腳本控制。未來HTML和CSS會(huì)增加相關(guān)的控制屬性,見:Resource Priorities。

9. 資源的prefetch。可用,見http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。注意prefetch只是hint,F(xiàn)irefox會(huì)預(yù)取資源(如果網(wǎng)絡(luò)空閑的話),而IE 9則是對(duì)該資源的hostname進(jìn)行DNS預(yù)解析。如果你真的需要更強(qiáng)的控制,則得用腳本。注意:Chrome支持與prefetch相近但更進(jìn)一步的,另外SPDY加入了與prefetch相近但語義不同的subresource link支持,這兩個(gè)新特性我也沒用過,有興趣的可以嘗試。

圖片的其他優(yōu)化技巧如字體圖標(biāo)、CSS Sprites等,不過我不推薦。用字體圖標(biāo)不如用SVG。使用了SPDY和data url后,CSS Sprites完全沒有必要用了。

再有各種特定的圖片問題,超出了一般優(yōu)化的范疇。如許多手機(jī)瀏覽器有黑夜模式,其中有的瀏覽器允許定制黑夜模式;有的手機(jī)瀏覽器允許在用戶開啟不加載圖片選項(xiàng)的情況下讓開發(fā)者設(shè)置必須加載的圖片(有點(diǎn)繞);又如許多手機(jī)瀏覽器有所謂云加速模式,即在服務(wù)器端對(duì)圖片進(jìn)行處理后再發(fā)送給客戶端,應(yīng)該返回怎樣的圖片給這些服務(wù)器有待研究和實(shí)踐。

10. 最后是responsive設(shè)計(jì)所需的圖片優(yōu)化,可能要產(chǎn)生多套不同大小和分辨率的圖片,配合media query、以及srcset屬性、picture元素、src-N等標(biāo)準(zhǔn)提案,這個(gè)話題比較大,尚未形成普遍認(rèn)可的好實(shí)踐,這里也不多展開了。

以上。

本文名稱:前端開發(fā)中,對(duì)圖片的優(yōu)化技巧有哪些?
URL網(wǎng)址:http://m.rwnh.cn/news45/86045.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、標(biāo)簽優(yōu)化、定制網(wǎng)站、網(wǎng)站收錄、建站公司品牌網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
余姚市| 武城县| 卓资县| 平塘县| 墨竹工卡县| 准格尔旗| 澄迈县| 博白县| 临城县| 九台市| 茌平县| 离岛区| 平远县| 六安市| 桑植县| 文安县| 石屏县| 兴隆县| 方城县| 安达市| 讷河市| 乌恰县| 东丽区| 张家川| 沙湾县| 紫阳县| 汉阴县| 大理市| 徐汇区| 光泽县| 尼勒克县| 翁牛特旗| 准格尔旗| 六安市| 广昌县| 富民县| 阜阳市| 廉江市| 唐山市| 枣强县| 曲麻莱县|