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