網(wǎng)頁設計中，圖片格式的選擇非常重要，未經(jīng)優(yōu)化的圖片和不當?shù)膱D片格式都會導致網(wǎng)頁加載時間過程和響應速度過慢——也就是打開很慢，這樣就會嚴重影響用戶的體驗，有時候甚至延遲幾秒就足以使許多新訪客離開。所以在設計網(wǎng)站時，設計師必須特別注意圖像格式和優(yōu)化，以便在圖片質量和加載時間之間找到平衡。
為了讓大家做出更好的網(wǎng)頁，秒秒學小編(www.miaomiaoxue.com）給大家介紹幾種常用的圖片格式，并詳解在不同情況下該使用哪種文件類型，各位網(wǎng)頁設計的小白一定要記住了!
1、JPEG
JPEG是迄今為止最常見的圖像格式，它是網(wǎng)絡上絕大多數(shù)圖像的選擇格式。默認情況下，大多數(shù)中低檔數(shù)碼相機還會以JPEG格式存儲圖像。雖然格式相同，但JPEG圖像可能使用.jpeg或.jpg文件擴展名。JPEG自1986年發(fā)明以來一直是壓縮圖像文件的行業(yè)標準。
JPEG有一點要清楚，它是有損的。換句話說，它犧牲了圖像質量來換取更小的文件空間，這也意味著在網(wǎng)站上有更快的加載時間。JPEG也具有各種級別的壓縮，壓縮越厲害圖像質量越低。Web圖像的最佳壓縮級別大約為60%，盡管高達75%的數(shù)據(jù)可能適用于視覺組件可能達到75%的數(shù)據(jù)，但質量不是最優(yōu)的，高于75%，原始圖像開始變得明顯扭曲和模糊。
所有互聯(lián)網(wǎng)設備，數(shù)碼相機，Web瀏覽器和現(xiàn)代操作系統(tǒng)都支持此種格式，JPEG是用于不需要大質量的靜止圖像的最常用格式。由于它可以顯示數(shù)百萬種不同的顏色，包括較淺和較深色調之間的明顯區(qū)別，因此適用于幾乎所有情況。然而，當需要專業(yè)和原始的圖像質量時，JPEG是不合適的。因此，絕大多數(shù)專業(yè)攝影師始終將其圖像的原始副本保留為未壓縮格式，如BMP或RAW。
2、GIF
GIF是在1987年發(fā)明的，GIF跟JPEG一樣，是為了突破早期撥號互聯(lián)網(wǎng)連接的局限性而節(jié)省帶寬發(fā)明的，同時也節(jié)省了當時相對較小的硬盤空間。
與JPEG不同，GIF支持動畫視覺效果，因此它一直用于渲染小動畫。因此，它在小圖標，按鈕和其他導航功能，社交網(wǎng)絡上的動畫表情符號中是用得最多的。從技術上講，GIF是一種無損壓縮格式，因為它不會刪除任何原始數(shù)據(jù)，而是使用完全不同的算法進行壓縮。但是，格式也受到8位調色板的限制，這意味著它每幀最多只顯示256種顏色。由于這個限制，它非常適合單色圖像，這是8位性質的。
雖然在線上接觸得非常多，但GIF在網(wǎng)頁設計中幾乎沒有實際應用。相反，大多數(shù)動畫內(nèi)容通過視頻流媒體格式傳送，而靜態(tài)圖像則使用JPEG或其他格式。盡管如此，盡管實際的動畫可能在設備上不起作用，GIF仍然像JPEG一樣得到廣泛支持。
3、PNG
與GIF不同的是，PNG只能使用靜態(tài)圖像，盡管有稱為APNG(基于PNG(Portable Network Graphics)的位圖動畫格式，擴展方法類似主要用于網(wǎng)頁的GIF 89a)的擴展存在，但不被廣泛支持。PNG使用無損壓縮算法來保留原始圖像的細節(jié)。
PNG分為兩種：PNG-8，支持256色的8位版本，與GIF類似;PNG-24，配有一個24位調色板，可顯示多達1600萬種顏色，如JPEG。最重要的是，這兩個版本都支持透明度，因此可以使用其他圖像來創(chuàng)建各種不同的背景和特殊效果。設計人員可以使用格式支持的Alpha通道更改透明度級別，例如淡入不同的背景圖像。換句話說，PNG圖像可以放置在任何顏色的背景上，同時保持其原始外觀。
PNG最適合用于設計和標志類的品牌元素，幾乎所有瀏覽器都支持此類格式。該格式也適用于諸如照片類的復雜圖像，但文件大小是個問題，因為PNG占用的空間大大超過JPEG。
4、SVG(可縮放矢量圖形)
與上面提到的位圖圖像格式不同，SVG是矢量圖形格式。矢量可以縮放到任何尺寸，而不會損失質量，因為每個矢量就已經(jīng)分配了顏色，形狀，曲線和線條的厚度。
SVG發(fā)明于2001年，SVG是基于可擴展標記語言最常見的矢量圖形格式。雖然不像JPEG，GIF或PNG一樣得到廣泛支持，但大多數(shù)瀏覽器(如最新版本的Google Chrome，Microsoft Edge和Mozilla Firefox)都支持它。盡管如此，SVG是復雜圖表中最合適的格式，例如藍圖，計劃和設計，因為它保留了所有原始信息，并且可以在不影響圖像質量的情況下進行放大。另一方面，SVG格式完全不適合照片。由于許多舊版瀏覽器，特別是移動設備不支持矢量圖形，如果不支持，網(wǎng)頁設計人員應始終提供替代的JPG來代替SVG文件。
在大多數(shù)情況下，網(wǎng)頁設計師只需在具有特定要求時，可使用GIF，PNG或SVG格式，沒有要求時最好使用JPEG格式，要注意的是選擇最佳的壓縮級別，以便在質量和性能之間找到一個很好的平衡。譬如說相冊這類設計，通常最好在網(wǎng)頁上顯示較低質量的縮略圖，當點擊時，打開全分辨率，高質量的版本比較好。
至于有關網(wǎng)頁設計更多的圖像處理和優(yōu)化，可參考以下推薦教程：
《AI網(wǎng)頁設計五部曲之圖像優(yōu)化》
http://www.miaomiaoxue.com/show/bookshow/aabe88fc59b9cb1e015a175fc7303378.html?tt
《AI網(wǎng)頁設計五部曲之SVG設計》
http://www.miaomiaoxue.com/show/bookshow/aabe88fc5aabdef8015aac1b1a7500f3.html?tt
等等相關的教程，在實際案例中學會不同情況下如何選擇合適的圖像格式。
聯(lián)系客服
