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

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

何為性能優(yōu)化

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

摘自百度百科

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

對(duì)軟件自身而言，能夠減少網(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)，開始碼字，帶上你的小板凳，前排擠擠：

1.選對(duì)格式

圖片格式多種多樣，其自身的優(yōu)缺點(diǎn)決定了使用場(chǎng)景及環(huán)境，在什么情況下采用何種的圖片格式，是我們作對(duì)的第一步，首先從了解他們?nèi)胧郑?/p>

JPEG是第一個(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è)透明層次。 適用于色彩簡(jiǎn)單，對(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í)處理。

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

2.一圖多用

以下介紹了一些小技巧，從而達(dá)到減少圖片的使用：

opacity，通過透明度的處理，且在不影響用戶體驗(yàn)和設(shè)計(jì)的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態(tài)，從而減少圖片的使用和網(wǎng)絡(luò)請(qǐng)求。

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

css sprite，俗稱雪碧圖，就是把網(wǎng)頁中一些圖片整合到一張圖片文件中，再利用CSS定位顯示所需要顯示圖片的位置。好處在于能夠在網(wǎng)頁加載圖片時(shí)減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，同時(shí)合并后的圖片應(yīng)用統(tǒng)一色表儲(chǔ)存，因此單獨(dú)的一張的雪碧圖在大小上可能比之前的多張小圖片總的尺寸還要小，降低服務(wù)器儲(chǔ)存和請(qǐng)求壓力，同時(shí)提高了頁面的加載速度。

3.無圖模式

拉上你的前端小伙伴，開啟無圖模式：

css，Web的諸多樣式其實(shí)都是可以都過css來實(shí)現(xiàn)，例如簡(jiǎn)單的幾何圖形、圓角、漸變、陰影等等(考慮IE 8 的還是有些雞肋)，代碼畢竟屬于文本模式，請(qǐng)求資源小，加載和渲染速度都是圖片不可比擬的，每一個(gè)圖片的加載都需要一個(gè)http的請(qǐng)求，而瀏覽器同一時(shí)間對(duì)同一域名下的請(qǐng)求是有一定數(shù)量限制，超過限制數(shù)目的請(qǐng)求會(huì)被阻塞，從而延長用戶的感知時(shí)間，因此減少請(qǐng)求次數(shù)，也就提高了頁面的呈現(xiàn)速度。 另外通過css實(shí)現(xiàn)，在任何屏幕上都可以顯示出良好視覺的效果，無需多分辨率、多端適配。若軟件具有的自定義外觀的功能，css的優(yōu)勢(shì)就更加的明顯強(qiáng)大，屬性修改一下就ok了。

iconfont，圖標(biāo)字體，其實(shí)字體就是圖形化的東西，把圖標(biāo)處理成字體來顯示在屏幕上，同樣瀏覽器也會(huì)將其視為字體進(jìn)行抗鋸齒處理，有時(shí)效果并沒有想象中的那么清晰銳利(相對(duì)與純圖片效果還是相當(dāng)可人的)。iconfont，作為字體，其位置和大小也會(huì)受css屬性的影響，同時(shí)為了得到大范圍的瀏覽器支持，需要生成TTF、WOFF、EOT、SVG四種字體格式，不過這些問題交給阿里UX矢量庫就好了。

感悟

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

作者：Wing Hu

本文標(biāo)題：關(guān)于圖片的性能優(yōu)化，作為設(shè)計(jì)師的你知道多少
分享路徑：http://www.bm7419.com/news/33237.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、ChatGPT、網(wǎng)站維護(hù)

廣告

聲明：本網(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)