網站設計中對圖片的選用和處理

   今天有朋友咨詢一個問題,他的網站打開的速度越來越慢了,好像是在網頁中加載的圖片太多了。想尋找一些對圖片的處理方式。連云港久愛網絡公司(92網絡)對于這種情況,一般需要對網站做下分析,找出影響網速的真正原因。如果是僅是圖片問題,92網絡就說一說自己關于“網站設計中對圖片的選用和處理”的相關經驗。

        來說說幾種常見的圖片格式和在網站上的使用情況。

         PNG(Portable Networf Graphics)的原名稱為"可移植性網絡圖像",是網上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件。它同時提供 24位和48位真彩色圖像支持以及其他諸多技術性支持。由于PNG非常新,所以目前并不是所有的程序都可以用它來存儲圖像文件,但Photoshop可以 處理PNG圖像文件,同時在圖片保存方面,PNG可以保存背景為透明,目前背景可以透明的圖片格式有:*.tif,*.gif,*.png,他們生成的文 件都是比較大的。

   同時,因為PNG是矢量圖,一般圖片處理或網頁放大縮小上,不容易失真。但很多時候PNG圖片也很大,我們就需要考慮下其它的圖片格式了。

        PNG同時支持8位和24位的圖像。24位PNG,支持160萬種不同的像素顏色且支持Alpha透明效果,這就意味著,無論透明度設置為多少,PNG圖片均能夠與背景很好的融合在一起。


   GIF文件最突出的地方就是他支持動畫,同時GIF也是一種無損的圖片格式,也就是說你在修改圖片之后,圖片質量并沒有損失。再者GIF支持半透明(全透 明或是全不透明)。所以一般GIF圖會比較大些,但對于一些單像素,或小圖片,反而會比JPG文件要小,根據Google的說法,GIF適用于很小或是較 簡單的圖片(10×10以下或是3種顏色以下的圖片)。所以我們對于網頁上的小部件圖片和簡單動畫可以使用GIF來做。

        GIF是8位圖片格式。“無損”是指100%的保持原始圖片的像素數據信息。專業名詞“8位”是指,所能表現的顏色深度——一個8位圖像僅最多只能支持256種不同顏色(一個多余256種顏色的圖片若用gif圖片保存會出現失真)。樓主說的失真應該是指這方面吧?

      JPEG文件的擴展名為.jpg或.jpeg,其壓縮技術十分先進,它用有損壓縮方式去除冗余的圖像和彩色數據,獲取得極高的壓縮率的同時能展現十分豐富生動的圖像,換句話說,就是可以用最少的磁盤空間得到較好的圖像質量。

       你可以根據你網頁的需要,靈活運用好各種圖片格式。

     但對于有些GPG圖片我們壓縮后,還是覺得有些大,是因為圖片的像素比例比較高。

    連云港92網絡公司在這里再給你支幾個招,說一說網頁圖片的處理方式:

     首先,用一個簡單方法,就可以調整好。那就是——截圖。

        這一招真好不錯

    人的眼睛對圖片的分辨率在72dp以下,所以一般網頁的圖片基本為72dp。所以我們在上傳圖片的時候,不需要高精度的圖片。那么我們只需要用截圖工具在截取另存一下圖片,這樣保存的圖片就是72dp的圖了,適合在網頁上使用。

      第二招:我們我們如果是在Photoshop中制作的圖片或是網站素材,在保存圖片時,切記選擇”存儲為Web和設備所用格式”。因為這樣往往在同等質量下能獲得更小的圖片體積(相比直接”存儲為”)。

     第三招:使用Smush it工具

     Smush it包含在著名的著名插件YSlow之中,并確保已經安裝了Firebug.使用方法很簡單,只需要在YSlow中打開”tool”下的All Smush it! 將會跳轉到一個新頁面,對當前網頁的圖片進行壓縮,而這些壓縮都是在不損失圖片質量下進行的。所以你大可放心。

     第四招:技術處理

      如果網站需要更高精度的圖片,可以適應一下預載技術,就像百度圖片那樣,開始的時候先加載低精度的圖片,讓網頁盡快打開,后再顯示高精度的圖片。


     好了,內容不少,也在網上找了些文章來驗證一下,手打的也夠累了,相信以上的內容應該可以解決他的問題了。歡迎追問,在網站建設和優化上能有更多的交流。

手機用戶瀏覽,請掃描此二維碼:
国模吧双双大尺度炮交gogo