網(wǎng)站圖片的優(yōu)化技術(shù)研究

中國鐵路信息技術(shù)中心中鐵信計(jì)算機(jī)工程公司 謝玉潔

網(wǎng)站圖片的優(yōu)化技術(shù)研究

中國鐵路信息技術(shù)中心中鐵信計(jì)算機(jī)工程公司 謝玉潔

本文在對常用的網(wǎng)絡(luò)圖片格式進(jìn)行分析基礎(chǔ)上，集中討論了網(wǎng)絡(luò)圖片的優(yōu)化問題。從網(wǎng)絡(luò)圖片格式的選擇與使用、圖片數(shù)據(jù)的預(yù)處理、網(wǎng)絡(luò)圖片的自適應(yīng)加載顯示和動態(tài)壓縮傳輸?shù)确矫嬲撌隽藞D片優(yōu)化的方法。上述方法的綜合使用在實(shí)際網(wǎng)站的優(yōu)化過程中表現(xiàn)出了良好的技術(shù)性能，顯著提高了網(wǎng)站的訪問速度和負(fù)載能力。

網(wǎng)頁；圖片格式；動態(tài)壓縮；自適應(yīng)顯示

1.引言

隨著信息網(wǎng)絡(luò)技術(shù)的快速發(fā)展，各種圖片在網(wǎng)絡(luò)上大量傳輸和顯示。由于圖片表現(xiàn)的信息和內(nèi)容非常豐富，所以在各種網(wǎng)絡(luò)應(yīng)用、網(wǎng)站、數(shù)據(jù)庫中都有大量的使用[1,2]。根據(jù)針對國內(nèi)外網(wǎng)絡(luò)信息的統(tǒng)計(jì)，圖片內(nèi)容所表示的信息和容量占到了當(dāng)今網(wǎng)絡(luò)數(shù)據(jù)的60%以上；網(wǎng)絡(luò)圖片在為網(wǎng)絡(luò)用戶帶來非常直觀、愉悅體驗(yàn)的同時也消耗了大量的網(wǎng)絡(luò)傳輸、存儲和計(jì)算機(jī)運(yùn)算處理能力。

為了提高用戶的網(wǎng)絡(luò)體驗(yàn)、加快網(wǎng)絡(luò)傳輸速度、節(jié)約使用計(jì)算機(jī)資源。對網(wǎng)頁圖片的優(yōu)化是一個非常重要的問題。國內(nèi)外的大型網(wǎng)絡(luò)服務(wù)提供商均把網(wǎng)絡(luò)圖片的優(yōu)化技術(shù)作為工作的重點(diǎn)，制定了一系列的圖片性能優(yōu)化規(guī)范和措施，研究開發(fā)了一系列與圖片優(yōu)化存儲、傳輸有關(guān)的程序框架、軟件工具；上述工作為優(yōu)化網(wǎng)站性能、提高傳輸和處理速度、節(jié)約網(wǎng)絡(luò)和計(jì)算機(jī)資源做出了重要貢獻(xiàn)，提高了網(wǎng)絡(luò)用戶的體驗(yàn)和感受。本文將在對網(wǎng)絡(luò)圖片數(shù)據(jù)格式進(jìn)行簡要介紹和分析對比基礎(chǔ)上，對網(wǎng)絡(luò)圖片數(shù)據(jù)的處理、存儲、傳輸?shù)葍?yōu)化技術(shù)進(jìn)行介紹。

2.網(wǎng)絡(luò)圖片數(shù)據(jù)格式

網(wǎng)絡(luò)系統(tǒng)中常見的圖片格式主要包括JPEG、GIF、PNG、APNG、WebP、SVG等格式，BMP等格式圖片由于沒有采用任何壓縮技術(shù)，所需要存儲和傳輸?shù)臄?shù)據(jù)量特別大，所以在網(wǎng)絡(luò)圖片中一般不推薦使用。

各種常用的圖片格式可以分為標(biāo)量圖和矢量圖兩種格式。標(biāo)量圖表現(xiàn)的內(nèi)容豐富、以圖像的像素為基礎(chǔ)通過壓縮得到，傳輸效率高，不直接支持動態(tài)縮放顯示。矢量圖以基本的圖形元素（點(diǎn)、線等）和色彩為基礎(chǔ)，可以任意縮放顯示，在工程圖中具有特別重要的地位。

JPEG圖像是在網(wǎng)絡(luò)圖片中使用最為廣泛的一種圖片數(shù)據(jù)格式，它把原始圖片數(shù)據(jù)根據(jù)標(biāo)準(zhǔn)算法和設(shè)定的壓縮參數(shù)有損壓縮（壓縮后的圖片不可能完全還原為原來的位圖數(shù)據(jù)圖片）的方式得到目標(biāo)圖片，在顯示時再解壓顯示。JPEG可以支持顯示任意復(fù)雜的圖片，對圖片的顏色及形狀等沒有任何特殊要求，與所有的瀏覽器均具有良好的兼容性。JPEG圖像格式不支持顯示透明圖片、也不支持顯示動畫。所以其使用也具有一定的限制。

GIF圖片是另外一種使用非常廣泛的圖片格式，它采用的是無損壓縮算法，與目前所有的瀏覽器可以良好兼容。GIF圖片支持顯示動畫和透明圖片，所以在網(wǎng)絡(luò)上被大量使用。由于GIF圖片壓縮后圖片數(shù)據(jù)較大，采用較為簡單的顏色搭配和圖像元素可以部分彌補(bǔ)其壓縮率不高的特點(diǎn)。GIF圖片一般被用于顯示小尺寸的各種動畫。

PNG圖片也是一種在網(wǎng)絡(luò)上應(yīng)用非常廣泛的圖片格式，它采用的也是無損壓縮的方式，所以其圖片數(shù)據(jù)量較大。PNG的優(yōu)點(diǎn)是可以支持以比較高效的方式顯示透明圖片，但是不支持動畫顯示。所以在網(wǎng)絡(luò)上需要顯示大尺寸的透明圖片的時候一般優(yōu)先選用PNG格式的圖片方式。

此外，對于新版本的瀏覽器（Firefox、Chrome、Safari等），支持一些新型的圖片格式的顯示，例如APNG、WebP等格式。APNG是一種無損壓縮格式的圖片，支持半透明效果的動畫。WebP是一種有損的壓縮方式，可以支持復(fù)雜的圖像和顏色的顯示。上述圖像格式由于支持的瀏覽器有限制，所以一般被用于某些瀏覽器平臺可預(yù)知的場合。如果網(wǎng)頁需要在不同的瀏覽器環(huán)境下正常顯示，并不建議采用上述格式存儲和傳輸圖片。但是隨著瀏覽器的發(fā)展和網(wǎng)絡(luò)終端設(shè)備的不斷更新，APNG、WebP等格式的應(yīng)用也會逐漸增加。

SVG是一種無損壓縮的矢量圖格式，一般用于圖形簡單，同時又需要良好的縮放體驗(yàn)的場合，可以實(shí)現(xiàn)動態(tài)控制的圖片顯示特效。SVG對瀏覽器也有一些要求，一般應(yīng)在IE8及其兼容的瀏覽器上才能正常顯示。

3.網(wǎng)絡(luò)圖片使用

針對特定的網(wǎng)絡(luò)應(yīng)用，網(wǎng)絡(luò)圖片數(shù)據(jù)的優(yōu)化首先需要考慮的問題是是否需要使用圖片的方式來表示必要信息，合理使用圖片可以優(yōu)化網(wǎng)站的整體性能和顯示效果，大量不合理使用圖片，同時不采取必要的針對圖片的優(yōu)化顯示技術(shù)，將使網(wǎng)站整體性能嚴(yán)重降低，同時也不利于提高用戶的使用體驗(yàn)。在某些未經(jīng)過優(yōu)化的網(wǎng)站中，把需要而且可以用文字方式顯示的信息在服務(wù)器上通過軟件生成圖片并緩存起來或者直接將可用文字顯示的信息用圖片方式顯示。這種網(wǎng)頁不但無法被基于文字的搜索引擎檢索，也嚴(yán)重增加了網(wǎng)絡(luò)負(fù)擔(dān)。

合理使用外部的圖片數(shù)據(jù)處理庫，也可以降低網(wǎng)絡(luò)圖片數(shù)據(jù)量，在各種網(wǎng)站上經(jīng)常需要顯示一些圖片的特效（例如：漸變、陰影、圓角等），這些都可以用HTML、CSS、SVG代碼實(shí)現(xiàn)，所使用的程序代碼非常簡潔，雖然使用了額外加載的圖片處理庫，但是在整體上可以顯著降低數(shù)據(jù)量的大小和網(wǎng)頁刷新顯示速度。一般而言，額外加載的圖片處理庫在數(shù)據(jù)量上比圖片要小很多，而一個庫文件可以處理多張圖片，所以效果非常顯著。圖像特效庫的表現(xiàn)效果非常豐富，而且所需要的存儲空間很小，傳輸方便，可以在分辨率不同的多種終端設(shè)備上展現(xiàn)出良好的效果。國內(nèi)外很多的大型網(wǎng)站都通過使用 CSS效果、CSS動畫等技術(shù)進(jìn)行了優(yōu)化，取得了較好的效果，實(shí)現(xiàn)了與分辨率無關(guān)的顯示效果，可在任何分辨率和縮放級別上清晰顯示圖像，占用空間極小，運(yùn)算處理速度快。

此外，網(wǎng)絡(luò)字體的合理使用也可以起到降低圖片使用量的效果。網(wǎng)絡(luò)字體的使用在保持較好的顯示效果的同時還可以保持文字的可搜索性，擴(kuò)展了顯示的樣式，所以被大量使用于網(wǎng)頁優(yōu)化過程中。

在網(wǎng)頁布局和設(shè)計(jì)階段，對圖片數(shù)據(jù)的合理規(guī)劃是非常重要的一個環(huán)節(jié)。在良好規(guī)劃的網(wǎng)站中合理使用各種圖片數(shù)據(jù)，可以保證網(wǎng)站的簡潔、高效、可維護(hù)等特點(diǎn)。直接、大量地使用各種照片、圖片在網(wǎng)站建設(shè)過程中是非常不可取的，這將嚴(yán)重降低系統(tǒng)的性能。

此外，在不可避免或有必要使用圖片的情況下，應(yīng)對圖片數(shù)據(jù)進(jìn)行必要的預(yù)先處理，調(diào)整圖片內(nèi)容和格式也是非常重要的一個環(huán)節(jié)。圖像的預(yù)處理包括圖像內(nèi)容的調(diào)整和圖片裁剪、縮放、圖片壓縮格式和參數(shù)的調(diào)整等方面。在對圖片進(jìn)行裁剪時，盡量貼合需要顯示的圖形區(qū)域，避免留下空白區(qū)域，否則將增加輸出圖片的實(shí)際