作為唐山網(wǎng)絡(luò)公司的設(shè)計(jì)師,今天就來(lái)說(shuō)一下圖片的性能優(yōu)化
發(fā)布時(shí)間:2017-12-16 發(fā)布者:唐山先創(chuàng)網(wǎng)絡(luò)有限公司 點(diǎn)擊:
由于大多數(shù)唐山網(wǎng)絡(luò)公司電腦設(shè)備更新?lián)Q代周期長(zhǎng),致使大多員工用的電腦老舊性能差,為了讓軟件運(yùn)行使用流暢,軟件自身性能的重要性不言而喻(想想你曾經(jīng)卸載狂拽炫酷吊炸天的360),卡頓是大忌,作為一名網(wǎng)站設(shè)計(jì)師,如何兼得美麗與才華而又不失用戶體驗(yàn)?
何為性能優(yōu)化
簡(jiǎn)而言之,就是在不影響系統(tǒng)運(yùn)行正確性的前提下,使之運(yùn)行地更快,完成特定功能所需的時(shí)間更短。
對(duì)網(wǎng)站自身而言,能夠減少網(wǎng)絡(luò)請(qǐng)求、節(jié)省寬帶資源和數(shù)據(jù)空間,從而提高軟件性能及自身的易用性;
從用戶感知方面,頁(yè)面加載更流暢、操作響應(yīng)更及時(shí),帶來(lái)良好的使用體驗(yàn)。
設(shè)計(jì)師能做什么
性能優(yōu)化雖是程序員嘴中常常念叨且擅長(zhǎng)的事情,其實(shí)設(shè)計(jì)師也能從自身角度-“圖片的優(yōu)化”來(lái)貢獻(xiàn)力量。 提高Web站點(diǎn)的用戶體驗(yàn),一個(gè)很重要的方面就是保證網(wǎng)頁(yè)的呈現(xiàn)速度,
其中網(wǎng)站靜態(tài)資源-圖片通常占據(jù)了頁(yè)面下載的絕大部份,因此從性能優(yōu)化角度而言,圖片絕對(duì)是重點(diǎn)之一,優(yōu)化圖片能極大的節(jié)約寬帶提升性能。
以下是一些個(gè)人的總結(jié)及工作經(jīng)驗(yàn),開(kāi)始碼字,帶上你的小板凳,前排擠擠:
圖片格式多種多樣,其自身的優(yōu)缺點(diǎn)決定了使用場(chǎng)景及環(huán)境,在什么情況下采用何種的圖片格式,是我們作對(duì)的第一步,首先從了解他們?nèi)胧郑?br/>
PEG是第一個(gè)國(guó)際圖像壓縮標(biāo)準(zhǔn),.jpg和.jpeg是JPEG文件壓縮封存后常見(jiàn)的圖片格式,均為有損壓縮,且會(huì)產(chǎn)生迭代有損。JPEG可通過(guò)不同的壓縮比,去除圖像的部分信息和色彩數(shù)
據(jù),來(lái)降低原有文件的大小,同樣設(shè)計(jì)師也可以根據(jù)具體情況在圖像質(zhì)量和文件大小之間找到平衡,特別適用于層次豐富,色彩較多的圖像。
JPEG2000 ,作為JPEG的升級(jí)版,它具備更高壓縮率,同時(shí)支持有損、無(wú)損壓縮和漸進(jìn)傳輸?shù)墓δ芗捌渌绿匦裕仨毷侨〈鶭PEG的節(jié)奏。
PNG,是一種無(wú)損壓縮的位圖格式,支持索引、RGB、灰度和Alpha通道等特性,具有較高的壓縮空間,保真效果好,支持透明,且定義了 256 個(gè)透明層次。 適用于色彩簡(jiǎn)單,對(duì)比
強(qiáng)烈的圖片,像圖標(biāo)icon等,PNG也可以被用來(lái)無(wú)失真的儲(chǔ)存照片,但文件較太大并不適合網(wǎng)絡(luò)呈現(xiàn)(像珍貴圖像等其他所需另當(dāng)別論)
GIF,常用于圖像動(dòng)畫(huà),具有高壓縮比的特性,占用空間小,保存的圖像只支持 256 色,會(huì)損失大量細(xì)節(jié),但利于下載,組成的動(dòng)畫(huà)適合網(wǎng)絡(luò)傳播。
SVG,矢量圖形格式,能夠清晰的顯示在任何分辨率設(shè)備,無(wú)需適配。SVG,是一種基于XML(可擴(kuò)張性標(biāo)記)的語(yǔ)言,采用文本傳輸且可被搜索,支持多種編輯(色彩變化,動(dòng)畫(huà)效果等)具有較強(qiáng)的交互和動(dòng)態(tài)性
WebP, 2010 年由谷歌開(kāi)發(fā),文件壓縮方面比JPEG更加優(yōu)越,同時(shí)支持有損和無(wú)損壓縮,但解碼時(shí)間卻相對(duì)較慢。 此前有eBay團(tuán)隊(duì)的測(cè)試,同時(shí)顯示 50 張同質(zhì)量的WebP和jpg,WebP比jpg顯示快了 2 倍
多,WebP雖然會(huì)增加解碼的時(shí)長(zhǎng),但減少了文件體積,縮短了加載時(shí)間,以致實(shí)際渲染速度更快。谷歌家的產(chǎn)物,且未被Web標(biāo)準(zhǔn)采納,其他平臺(tái)及瀏覽器的支持性相對(duì)較差,但可以在不支持的環(huán)境中進(jìn)行的功
能降級(jí)處理。