本發(fā)明涉及網(wǎng)頁優(yōu)化技術(shù)領(lǐng)域，尤其涉及一種web網(wǎng)頁圖片優(yōu)化的方法。
背景技術(shù)：
圖片內(nèi)容已經(jīng)占到了互聯(lián)網(wǎng)內(nèi)容量的62％，因而對于web性能優(yōu)化來說，圖片是優(yōu)化的熱點和重點。圖片的格式選擇不正確，在瀏覽器上的兼容性不好；不同的設(shè)備下，圖片的尺寸沒有相應改變，導致顯示不清晰，用戶體驗不好的問題。
技術(shù)實現(xiàn)要素：
本發(fā)明要解決的技術(shù)問題，在于提供一種web網(wǎng)頁圖片優(yōu)化的方法，保證在各個web網(wǎng)頁瀏覽器下圖片的正常顯示，減少圖片加載的時間，在較低像素的移動端設(shè)備下加快加載速度、節(jié)省流量。
本發(fā)明是這樣實現(xiàn)的：一種web網(wǎng)頁圖片優(yōu)化的方法，所述方法為：根據(jù)不同設(shè)備的web網(wǎng)頁選擇不同格式的圖片和不同文件大小的圖片進行顯示，且對圖片響應和圖片顯示進行優(yōu)化。
進一步的，所述方法進一步具體為：web網(wǎng)頁判斷是否需要顯示動態(tài)圖片，是顯示動態(tài)圖片，則判斷web網(wǎng)頁是否只兼容OSX和IOS系統(tǒng)即可，是，則選擇APNG格式的圖片進行顯示；否，則選擇GIF格式的圖片進行顯示；不顯示動態(tài)圖片，則判斷是否需要精確保留圖片細節(jié)，否，則選擇JPEG格式的圖片進行顯示，是，判斷要選擇的圖片是否大于256色位圖，是，則選擇PNG-8格式的圖片進行顯示，否，則判斷是否需要多階透明顯示，是，則選擇PNG-32格式的圖片進行顯示，否，則選擇PNG-24格式的圖片進行顯示。
進一步的，所述圖片響應優(yōu)化具體為：對網(wǎng)頁圖片的標簽仍然使用img標簽；
通過javascript腳本語言獲取設(shè)備屏幕的視口viewport的尺寸，并將圖片的信息存儲在網(wǎng)頁cookie中，傳給一服務(wù)器；
服務(wù)器根據(jù)圖片的信息，改變網(wǎng)頁代碼中img標簽的src屬性，從而對圖片響應進行優(yōu)化。
進一步的，所述圖形顯示優(yōu)化具體為：使用CSS代替圖片，
用CSS的設(shè)置元素的背景顏色background-image和設(shè)置背景圖像的起始位置background-position屬性，將多個頁面上用到的背景圖片合并成一個大的圖片，將資源內(nèi)嵌于CSS或HTML中，而不必單獨請求，也不用加載多個圖片，從而對圖片顯示進行優(yōu)化。
本發(fā)明具有如下優(yōu)點：本發(fā)明根據(jù)不同設(shè)備的web網(wǎng)頁選擇不同格式的圖片和不同文件大小的圖片進行顯示，且對圖片響應和圖片顯示進行優(yōu)化，從而保證在各個web網(wǎng)頁瀏覽器下圖片的正常顯示，減少圖片加載的時間，在較低像素的移動端設(shè)備下加快加載速度、節(jié)省流量。
附圖說明
下面參照附圖結(jié)合實施例對本發(fā)明作進一步的說明。
圖1為本發(fā)明方法流程示意圖。
具體實施方式
請參閱圖1所示，一種web網(wǎng)頁圖片優(yōu)化的方法，所述方法為：根據(jù)不同設(shè)備的web網(wǎng)頁選擇不同格式的圖片和不同文件大小的圖片進行顯示，且對圖片響應和圖片顯示進行優(yōu)化。
根據(jù)各種圖片格式的特點(如下表格1)：
表格1
各個圖片格式的特點
顏色豐富的照片，JPG是通用的選擇：人眼的結(jié)構(gòu)很適合查看JPG壓縮后的照片，可以充分的忽略并在腦中補齊細節(jié)。
如果需要較通用的動畫，GIF是唯一可用的選擇：GIF支持的顏色范圍為256色，而且僅支持完全透明/完全不透明；GIF在顯示顏色豐富的動畫時可能出現(xiàn)顏色不全、邊緣鋸齒等問題。
如果圖片由標準的幾何圖形組成，或需要使用程序動態(tài)控制其顯示特效，可以考慮SVG格式：SVG是使用XML定義的矢量圖形，生成的圖片在各種分辨率下均可自由放縮；SVG中可以通過JavaScript等接口自由變換圖片特效，可以完成其中部分元素的自由旋轉(zhuǎn)、移動、變換顏色等
如果需要清晰的顯示顏色豐富的圖片，PNG比較好：PNG-8能夠顯示256種顏色，但能夠同時支持256階透明，因此顏色數(shù)較少但需要半透明的情景(如微信動畫大表情)可以考慮PNG-8；PNG-24可以顯示真彩色，但不支持透明，顏色豐富的圖片推薦使用(如屏幕截圖、界面設(shè)計圖)；PNG-32可以顯示真彩色，同時支持256階透明，效果最好但尺寸也最大。
其中，所述方法進一步具體為：web網(wǎng)頁判斷是否需要顯示動態(tài)圖片，是顯示動態(tài)圖片，則判斷web網(wǎng)頁是否只兼容OSX和IOS系統(tǒng)即可，是，則選擇APNG格式的圖片進行顯示；否，則選擇GIF格式的圖片進行顯示；不顯示動態(tài)圖片，則判斷是否需要精確保留圖片細節(jié)，否，則選擇JPEG格式的圖片進行顯示，是，判斷要選擇的圖片是否大于256色位圖，是，則選擇PNG-8格式的圖片進行顯示，否，則判斷是否需要多階透明顯示，是，則選擇PNG-32格式的圖片進行顯示，否，則選擇PNG-24格式的圖片進行顯示。
在本發(fā)明中，圖片尺寸的選擇，這里的圖片尺寸的選擇，是一種響應式圖片的實現(xiàn)方法。關(guān)于響應式圖片的實現(xiàn)原因和必要：在不同的移動設(shè)備中一個CSS像素包含的設(shè)備像素是不同的；在高DPI(每英寸的像素)上需要使用分辨率高的圖片；這使得圖片在低DPI下造成不必要的浪費，用戶要付出額外的帶寬和等待時間。所述圖片響應優(yōu)化具體為：對網(wǎng)頁圖片的標簽仍然使用img標簽；
通過javascript腳本語言獲取設(shè)備屏幕的視口viewport的尺寸，并將圖片的信息存儲在網(wǎng)頁cookie中，傳給一服務(wù)器；
服務(wù)器根據(jù)圖片的信息，改變網(wǎng)頁代碼中img標簽的src屬性，從而對圖片響應進行優(yōu)化。
所述圖形顯示優(yōu)化具體為：使用CSS代替圖片，
用CSS的設(shè)置元素的背景顏色background-image和設(shè)置背景圖像的起始位置background-position屬性，將多個頁面上用到的背景圖片合并成一個大的圖片，將資源內(nèi)嵌于CSS或HTML中，而不必單獨請求，也不用加載多個圖片，從而對圖片顯示進行優(yōu)化。
總之，本發(fā)明根據(jù)不同設(shè)備的web網(wǎng)頁選擇不同格式的圖片和不同文件大小的圖片進行顯示，且對圖片響應和圖片顯示進行優(yōu)化，從而保證在各個web網(wǎng)頁瀏覽器下圖片的正常顯示，減少圖片加載的時間，在較低像素的移動端設(shè)備下加快加載速度、節(jié)省流量。
雖然以上描述了本發(fā)明的具體實施方式，但是熟悉本技術(shù)領(lǐng)域的技術(shù)人員應當理解，我們所描述的具體的實施例只是說明性的，而不是用于對本發(fā)明的范圍的限定，熟悉本領(lǐng)域的技術(shù)人員在依照本發(fā)明的精神所作的等效的修飾以及變化，都應當涵蓋在本發(fā)明的權(quán)利要求所保護的范圍內(nèi)。