作為唐山網(wǎng)絡(luò)公司的設(shè)計(jì)師，今天就來說一下圖片的性能優(yōu)化

       由于大多數(shù)唐山網(wǎng)絡(luò)公司電腦設(shè)備更新?lián)Q代周期長，致使大多員工用的電腦老舊性能差，為了讓軟件運(yùn)行使用流暢，軟件自身性能的重要性不言而喻(想想你曾經(jīng)卸載狂拽炫酷吊炸天的360)，卡頓是大忌，作為一名網(wǎng)站設(shè)計(jì)師，如何兼得美麗與才華而又不失用戶體驗(yàn)?
何為性能優(yōu)化

  簡而言之，就是在不影響系統(tǒng)運(yùn)行正確性的前提下，使之運(yùn)行地更快，完成特定功能所需的時(shí)間更短。

  對(duì)網(wǎng)站自身而言，能夠減少網(wǎng)絡(luò)請(qǐng)求、節(jié)省寬帶資源和數(shù)據(jù)空間，從而提高軟件性能及自身的易用性;

  從用戶感知方面，頁面加載更流暢、操作響應(yīng)更及時(shí)，帶來良好的使用體驗(yàn)。

設(shè)計(jì)師能做什么

  性能優(yōu)化雖是程序員嘴中常常念叨且擅長的事情，其實(shí)設(shè)計(jì)師也能從自身角度-“圖片的優(yōu)化”來貢獻(xiàn)力量。 提高Web站點(diǎn)的用戶體驗(yàn)，一個(gè)很重要的方面就是保證網(wǎng)頁的呈現(xiàn)速度，

其中網(wǎng)站靜態(tài)資源-圖片通常占據(jù)了頁面下載的絕大部份，因此從性能優(yōu)化角度而言，圖片絕對(duì)是重點(diǎn)之一，優(yōu)化圖片能極大的節(jié)約寬帶提升性能。

  以下是一些個(gè)人的總結(jié)及工作經(jīng)驗(yàn)，開始碼字，帶上你的小板凳，前排擠擠：

  圖片格式多種多樣，其自身的優(yōu)缺點(diǎn)決定了使用場(chǎng)景及環(huán)境，在什么情況下采用何種的圖片格式，是我們作對(duì)的第一步，首先從了解他們?nèi)胧郑?br/>
  PEG是第一個(gè)國際圖像壓縮標(biāo)準(zhǔn)，.jpg和.jpeg是JPEG文件壓縮封存后常見的圖片格式，均為有損壓縮，且會(huì)產(chǎn)生迭代有損。JPEG可通過不同的壓縮比，去除圖像的部分信息和色彩數(shù)

據(jù)，來降低原有文件的大小，同樣設(shè)計(jì)師也可以根據(jù)具體情況在圖像質(zhì)量和文件大小之間找到平衡，特別適用于層次豐富，色彩較多的圖像。

  JPEG2000 ，作為JPEG的升級(jí)版，它具備更高壓縮率，同時(shí)支持有損、無損壓縮和漸進(jìn)傳輸?shù)墓δ芗捌渌绿匦?，必須是取代JPEG的節(jié)奏。

  PNG，是一種無損壓縮的位圖格式，支持索引、RGB、灰度和Alpha通道等特性，具有較高的壓縮空間，保真效果好，支持透明，且定義了 256 個(gè)透明層次。 適用于色彩簡單，對(duì)比

強(qiáng)烈的圖片，像圖標(biāo)icon等，PNG也可以被用來無失真的儲(chǔ)存照片，但文件較太大并不適合網(wǎng)絡(luò)呈現(xiàn)(像珍貴圖像等其他所需另當(dāng)別論)

  GIF，常用于圖像動(dòng)畫，具有高壓縮比的特性，占用空間小，保存的圖像只支持 256 色，會(huì)損失大量細(xì)節(jié)，但利于下載，組成的動(dòng)畫適合網(wǎng)絡(luò)傳播。

  SVG，矢量圖形格式，能夠清晰的顯示在任何分辨率設(shè)備，無需適配。SVG，是一種基于XML(可擴(kuò)張性標(biāo)記)的語言，采用文本傳輸且可被搜索，支持多種編輯(色彩變化，動(dòng)畫效果等)具有較強(qiáng)的交互和動(dòng)態(tài)性

  WebP， 2010 年由谷歌開發(fā)，文件壓縮方面比JPEG更加優(yōu)越，同時(shí)支持有損和無損壓縮，但解碼時(shí)間卻相對(duì)較慢。 此前有eBay團(tuán)隊(duì)的測(cè)試，同時(shí)顯示 50 張同質(zhì)量的WebP和jpg，WebP比jpg顯示快了 2 倍

多，WebP雖然會(huì)增加解碼的時(shí)長，但減少了文件體積，縮短了加載時(shí)間，以致實(shí)際渲染速度更快。谷歌家的產(chǎn)物，且未被Web標(biāo)準(zhǔn)采納，其他平臺(tái)及瀏覽器的支持性相對(duì)較差，但可以在不支持的環(huán)境中進(jìn)行的功

能降級(jí)處理。