何爲圖片性能優化(huà)
簡而言之，就是在不影(yǐng)響系統運行正确性的(de)前提下(xià)，使之運行地更快(kuài)，完成特定功能所需的(de)時(shí)間更短。
性能優化(huà)的(de)好處
對(duì)軟件自身而言，能夠減少網絡請求、節省寬帶資源和(hé)數據空間，從而提高(gāo)軟件性能及自身的(de)易用(yòng)性;從用(yòng)戶感知方面，頁面加載更流暢、操作響應更及時(shí)，帶來(lái)良好的(de)使用(yòng)體驗。
設計師能做(zuò)什(shén)麽
1.選對(duì)格式
圖片格式多(duō)種多(duō)樣，其自身的(de)優缺點決定了(le)使用(yòng)場(chǎng)景及環境，在什(shén)麽情況下(xià)采用(yòng)何種的(de)圖片格式，是我們作對(duì)的(de)第一步，首先從了(le)解他(tā)們入手：
JPEG是第一個(gè)國際圖像壓縮标準，jpg和(hé)jpeg是JPEG文件壓縮封存後常見的(de)圖片格式，均爲有損壓縮，且會産生叠代有損。JPEG可(kě)通(tōng)過不同的(de)壓縮比，去除圖像的(de)部分(fēn)信息和(hé)色彩數據，來(lái)降低原有文件的(de)大(dà)小，同樣設計師也(yě)可(kě)以根據具體情況在圖像質量和(hé)文件大(dà)小之間找到平衡，特别适用(yòng)于層次豐富，色彩較多(duō)的(de)圖像。
JPEG2000 ，作爲JPEG的(de)升級版，它具備更高(gāo)壓縮率，同時(shí)支持有損、無損壓縮和(hé)漸進傳輸的(de)功能及其它新特性，必須是取代JPEG的(de)節奏。
PNG，是一種無損壓縮的(de)位圖格式，支持索引、RGB、灰度和(hé)Alpha通(tōng)道等特性，具有較高(gāo)的(de)壓縮空間，保真效果好，支持透明(míng)，且定義了(le)256個(gè)透明(míng)層次。 适用(yòng)于色彩簡單，對(duì)比強烈的(de)圖片，像圖标icon等，PNG也(yě)可(kě)以被用(yòng)來(lái)無失真的(de)儲存照(zhào)片，但文件較太大(dà)并不适合網絡呈現(像珍貴圖像等其他(tā)所需另當别論)
GIF，常用(yòng)于圖像動畫(huà)，具有高(gāo)壓縮比的(de)特性，占用(yòng)空間小，保存的(de)圖像隻支持256色，會損失大(dà)量細節，但利于下(xià)載，組成的(de)動畫(huà)适合網絡傳播。
SVG，矢量圖形格式，能夠清晰的(de)顯示在任何分(fēn)辨率設備，無需适配。SVG，是一種基于XML(可(kě)擴張性标記)的(de)語言，采用(yòng)文本傳輸且可(kě)被搜索，支持多(duō)種編輯(色彩變化(huà)，動畫(huà)效果等)具有較強的(de)交互和(hé)動态性。
WebP， 2010年由谷歌(gē)開發，文件壓縮方面比JPEG更加優越，同時(shí)支持有損和(hé)無損壓縮，但解碼時(shí)間卻相對(duì)較慢(màn)。 此前有eBay團隊的(de)測試，同時(shí)顯示50張同質量的(de)WebP和(hé)jpg，WebP比jpg顯示快(kuài)了(le)2倍多(duō)，WebP雖然會增加解碼的(de)時(shí)長(cháng)，但減少了(le)文件體積，縮短了(le)加載時(shí)間，以緻實際渲染速度更快(kuài)。谷歌(gē)家的(de)産物(wù)，且未被Web标準采納，其他(tā)平台及浏覽器的(de)支持性相對(duì)較差，但可(kě)以在不支持的(de)環境中進行的(de)功能降級處理(lǐ)。
2.一圖多(duō)用(yòng)
opacity，通(tōng)過透明(míng)度的(de)處理(lǐ)，且在不影(yǐng)響用(yòng)戶體驗和(hé)設計的(de)目的(de)情況下(xià)，我們便可(kě)以隻使用(yòng)一張圖片就能搞定控件的(de)多(duō)種狀态，從而減少圖片的(de)使用(yòng)和(hé)網絡請求。
SVG，可(kě)通(tōng)過css樣式完成對(duì)圖片色彩的(de)變換，從而也(yě)減少了(le)多(duō)張圖片的(de)使用(yòng)。
css sprite，俗稱雪(xuě)碧圖，就是把網頁中一些圖片整合到一張圖片文件中，再利用(yòng)CSS定位顯示所需要顯示圖片的(de)位置。好處在于能夠在網頁加載圖片時(shí)減少對(duì)服務器的(de)請求次數，同時(shí)合并後的(de)圖片應用(yòng)統一色表儲存，因此單獨的(de)一張的(de)雪(xuě)碧圖在大(dà)小上可(kě)能比之前的(de)多(duō)張小圖片總的(de)尺寸還(hái)要小，降低服務器儲存和(hé)請求壓力，同時(shí)提高(gāo)了(le)頁面的(de)加載速度。
3.無圖模式
css，Web的(de)諸多(duō)樣式其實都是可(kě)以都過css來(lái)實現，例如簡單的(de)幾何圖形、圓角、漸變、陰影(yǐng)等等(考慮IE 8 的(de)還(hái)是有些雞肋)，代碼畢竟屬于文本模式，請求資源小，加載和(hé)渲染速度都是圖片不可(kě)比拟的(de)，每一個(gè)圖片的(de)加載都需要一個(gè)http的(de)請求，而浏覽器同一時(shí)間對(duì)同一域名下(xià)的(de)請求是有一定數量限制，超過限制數目的(de)請求會被阻塞，從而延長(cháng)用(yòng)戶的(de)感知時(shí)間，因此減少請求次數，也(yě)就提高(gāo)了(le)頁面的(de)呈現速度。 另外通(tōng)過css實現，在任何屏幕上都可(kě)以顯示出良好視覺的(de)效果，無需多(duō)分(fēn)辨率、多(duō)端适配。若軟件具有的(de)自定義外觀的(de)功能，css的(de)優勢就更加的(de)明(míng)顯強大(dà)，屬性修改一下(xià)就ok了(le)。
iconfont，圖标字體，其實字體就是圖形化(huà)的(de)東西，把圖标處理(lǐ)成字體來(lái)顯示在屏幕上，同樣浏覽器也(yě)會将其視爲字體進行抗鋸齒處理(lǐ)，有時(shí)效果并沒有想象中的(de)那麽清晰銳利(相對(duì)與純圖片效果還(hái)是相當可(kě)人(rén)的(de))。iconfont，作爲字體，其位置和(hé)大(dà)小也(yě)會受css屬性的(de)影(yǐng)響，同時(shí)爲了(le)得(de)到最大(dà)範圍的(de)浏覽器支持，需要生成TTF、WOFF、EOT、SVG四種字體格式，不過這(zhè)些問題交給阿裏UX矢量庫就好了(le)。
