關(guān)于圖片的性能優(yōu)化，作為設計師的你知道多少

做B端軟件產(chǎn)品，因為大多數企業(yè)電腦設備更新?lián)Q代周期長(cháng)，致使大多員工用的電腦老舊性能差，為了讓軟件運利用用流暢，軟件自身性能的緊張性不言而喻(想想你曾經(jīng)卸載狂拽炫酷吊炸天的360)，卡頓是大忌，作為一名產(chǎn)品設計師，如何兼得鮮艷與才華而又不失用戶(hù)體驗?

何為性能優(yōu)化

簡(jiǎn)而言之，就是在不影響體系運行精確性的前提下，使之運行地更快，完成特定功能所需的時(shí)間更短。

摘自百度百科

性能優(yōu)化的益處

對軟件自身而言，能夠削減網(wǎng)絡(luò )請求、節省寬帶資源和數據空間，從而進(jìn)步軟件性能及自身的易用性;

從用戶(hù)感知方面，頁(yè)面加載更流暢、操作相應更及時(shí)，帶來(lái)優(yōu)秀的使用體驗。

設計師能做什么

性能優(yōu)化雖是程序員嘴中常常念叨且擅長(cháng)的事情，其實(shí)設計師也能從自身角度-“圖片的優(yōu)化”來(lái)貢獻力量。 進(jìn)步Web站點(diǎn)的用戶(hù)體驗，一個(gè)很緊張的方面就是保證網(wǎng)頁(yè)的呈現速度，其中網(wǎng)站靜態(tài)資源-圖片通常占有了頁(yè)面下載的絕大部份，因此從性能優(yōu)化角度而言，圖片絕對是重點(diǎn)之一，優(yōu)化圖片能極大的節約寬帶提拔性能。

以下是一些小我的總結及工作經(jīng)驗，開(kāi)始碼字，帶上你的小板凳，前排擠擠：

1.選對格式

圖片格式多種多樣，其自身的優(yōu)瑕玷決定了使用場(chǎng)景及環(huán)境，在什么情況下采用何種的圖片格式，是我們尷尬刁難的第一步，首先從了解他們入手：

JPEG是第一個(gè)國際圖像壓縮標準，.jpg和.jpeg是JPEG文件壓縮封存后常見(jiàn)的圖片格式，均為有損壓縮，且會(huì )產(chǎn)生迭代有損。JPEG可通過(guò)不同的壓縮比，去除圖像的部分信息和色彩數據，來(lái)降低原有文件的大小，同樣設計師也可以根據詳細情況在圖像質(zhì)量和文件大小之間找到平衡，分外適用于條理雄厚，色彩較多的圖像。

JPEG2000 ，作為JPEG的升級版，它具備更高壓縮率，同時(shí)支撐有損、無(wú)損壓縮和漸進(jìn)傳輸的功能及其它新特征，必須是庖代JPEG的節奏。

PNG，是一種無(wú)損壓縮的位圖格式，支撐索引、RGB、灰度和Alpha通道等特征，具有較高的壓縮空間，保真結果好，支撐透明，且定義了 256 個(gè)透明條理。 適用于色彩簡(jiǎn)單，對比強烈的圖片，像圖標icon等，PNG也可以被用來(lái)無(wú)失真的儲存照片，但文件較太大并不適合網(wǎng)絡(luò )呈現(像寶貴圖像等其他所需另當別論)

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

SVG，矢量圖形格式，能夠清晰的表現在任何分辨率設備，無(wú)需適配。SVG，是一種基于XML(可擴張性標記)的語(yǔ)言，采用文本傳輸且可被搜索，支撐多種編輯(色彩轉變，動(dòng)畫(huà)結果等)具有較強的交互和動(dòng)態(tài)性 。

WebP， 2010 年由谷歌開(kāi)發(fā)，文件壓縮方面比JPEG更加優(yōu)勝，同時(shí)支撐有損和無(wú)損壓縮，但解碼時(shí)間卻相對較慢。 此前有eBay團隊的測試，同時(shí)表現 50 張同質(zhì)量的WebP和jpg，WebP比jpg表現快了 2 倍多，WebP雖然會(huì )增長(cháng)解碼的時(shí)長(cháng)，但削減了文件體積，縮短了加載時(shí)間，以致現實(shí)渲染速度更快。谷歌家的產(chǎn)物，且未被Web標準采納，其他平臺及欣賞器的支撐性相對較差，但可以在不支撐的環(huán)境中進(jìn)行的功能降級處理。

以下對上述常用的圖片格式做了簡(jiǎn)單的對比總結：

2.一圖多用

以下介紹了一些小技巧，從而達到削減圖片的使用：

opacity，通過(guò)透明度的處理，且在不影響用戶(hù)體驗和設計的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀況，從而削減圖片的使用和網(wǎng)絡(luò )請求。

SVG，可通過(guò)css樣式完成對圖片色彩的變換，從而也削減了多張圖片的使用。

css sprite，俗稱(chēng)雪碧圖，就是把網(wǎng)頁(yè)中一些圖片整合到一張圖片文件中，再行使CSS定位表現所必要表現圖片的位置。益處在于能夠在網(wǎng)頁(yè)加載圖片時(shí)削減對服務(wù)器的請求次數，同時(shí)合并后的圖片應用同一色表儲存，因此單獨的一張的雪碧圖在大小上可能比之前的多張小圖片總的尺寸還要小，降低服務(wù)器儲存和請求壓力，同時(shí)進(jìn)步了頁(yè)面的加載速度。

3.無(wú)圖模式

拉上你的前端小伙伴，開(kāi)啟無(wú)圖模式：

css，Web的諸多樣式其實(shí)都是可以都過(guò)css來(lái)實(shí)現，例如簡(jiǎn)單的幾何圖形、圓角、漸變、陰影等等(考慮IE 8 的照舊有些雞肋)，代碼畢竟屬于文本模式，請求資源小，加載和渲染速度都是圖片不可比擬的，每一個(gè)圖片的加載都必要一個(gè)http的請求，而欣賞器統一時(shí)間對統一域名下的請求是有肯定數量限定，超過(guò)限定數目的請求會(huì )被壅塞，從而延伸用戶(hù)的感知時(shí)間，因此削減請求次數，也就進(jìn)步了頁(yè)面的呈現速度。 另外通過(guò)css實(shí)現，在任何屏幕上都可以表現出優(yōu)秀視覺(jué)的結果，無(wú)需多分辨率、多端適配。若軟件具有的自定義表面的功能，css的上風(fēng)就更加的顯明壯大，屬性修改一下就ok了。

iconfont，圖標字體，其實(shí)字體就是圖形化的東西，把圖標處理成字體來(lái)表現在屏幕上，同樣欣賞器也會(huì )將其視為字體進(jìn)行抗鋸齒處理，偶然結果并沒(méi)有想象中的那么清晰銳利(相對與純圖片結果照舊相稱(chēng)可人的)。iconfont，作為字體，其位置和大小也會(huì )受css屬性的影響，同時(shí)為了得到最大范圍的欣賞器支撐，必要生成TTF、WOFF、EOT、SVG四種字體格式，不過(guò)這些題目交給阿里UX矢量庫就好了。

感悟

就像本身，也會(huì )在使用產(chǎn)品中，因長(cháng)時(shí)間的等待加載而煩躁不安，從而影響操作和心情，作為一名產(chǎn)品設計師你必要為用戶(hù)著(zhù)想，而不是看著(zhù)本身的設計稿覺(jué)得NB，你必要去真正用、去運行你的產(chǎn)品，才知道什么是產(chǎn)品設計。

作者：Wing Hu