網站圖片的優化技術研究

中國鐵路信息技術中心中鐵信計算機工程公司 謝玉潔

網站圖片的優化技術研究

中國鐵路信息技術中心中鐵信計算機工程公司 謝玉潔

本文在對常用的網絡圖片格式進行分析基礎上，集中討論了網絡圖片的優化問題。從網絡圖片格式的選擇與使用、圖片數據的預處理、網絡圖片的自適應加載顯示和動態壓縮傳輸等方面論述了圖片優化的方法。上述方法的綜合使用在實際網站的優化過程中表現出了良好的技術性能，顯著提高了網站的訪問速度和負載能力。

網頁；圖片格式；動態壓縮；自適應顯示

1.引言

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

為了提高用戶的網絡體驗、加快網絡傳輸速度、節約使用計算機資源。對網頁圖片的優化是一個非常重要的問題。國內外的大型網絡服務提供商均把網絡圖片的優化技術作為工作的重點，制定了一系列的圖片性能優化規范和措施，研究開發了一系列與圖片優化存儲、傳輸有關的程序框架、軟件工具；上述工作為優化網站性能、提高傳輸和處理速度、節約網絡和計算機資源做出了重要貢獻，提高了網絡用戶的體驗和感受。本文將在對網絡圖片數據格式進行簡要介紹和分析對比基礎上，對網絡圖片數據的處理、存儲、傳輸等優化技術進行介紹。

2.網絡圖片數據格式

網絡系統中常見的圖片格式主要包括JPEG、GIF、PNG、APNG、WebP、SVG等格式，BMP等格式圖片由于沒有采用任何壓縮技術，所需要存儲和傳輸的數據量特別大，所以在網絡圖片中一般不推薦使用。

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

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

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

PNG圖片也是一種在網絡上應用非常廣泛的圖片格式，它采用的也是無損壓縮的方式，所以其圖片數據量較大。PNG的優點是可以支持以比較高效的方式顯示透明圖片，但是不支持動畫顯示。所以在網絡上需要顯示大尺寸的透明圖片的時候一般優先選用PNG格式的圖片方式。

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

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

3.網絡圖片使用

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

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

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

在網頁布局和設計階段，對圖片數據的合理規劃是非常重要的一個環節。在良好規劃的網站中合理使用各種圖片數據，可以保證網站的簡潔、高效、可維護等特點。直接、大量地使用各種照片、圖片在網站建設過程中是非常不可取的，這將嚴重降低系統的性能。

此外，在不可避免或有必要使用圖片的情況下，應對圖片數據進行必要的預先處理，調整圖片內容和格式也是非常重要的一個環節。圖像的預處理包括圖像內容的調整和圖片裁剪、縮放、圖片壓縮格式和參數的調整等方面。在對圖片進行裁剪時，盡量貼合需要顯示的圖形區域，避免留下空白區域，否則將增加輸出圖片的實際