前臺開發中關於圖片的使用
在頁面開發中涉及到很多關於圖片的使用情況，目前先粗略的做個總結，以便之後的修改。
1、gif
先簡單說一下GIF吧，GIF是一種正在逐漸被拋棄的圖片格式。PNG格式的出現就是為了替代它。PNG 8除了不支持動畫外，PNG8有GIF所有的特點，但是比GIF更加具有優勢的是它支持alpha透明和更優的壓縮（GIF僅支持索引透明）。
但是gif在網上還是有一席之地的，比如在貼吧或者qq群裏常看到的動畫圖片，用的都是gif。
當圖片顏色簡單到一定程度，大小小到一定程度的時候，gif格式圖片大小要小於png8。比如一個1*1像素的純黑色點，在PNG8下是124byte，在GIF下是43byte。
2、jpg優缺點：
支持攝影圖像或寫實圖像的高級壓縮，並且可利用壓縮比例控制圖像文件大小。
有損壓縮會使圖像數據質量下降，並且在編輯和重新保存JPG格式圖像時，這種下降損失會累積。
JPG和PNG8都適合顏色較少的圖片，因為JPG在柵格化時精確記錄少數點，其它點用差值補齊。但是當圖像顏色數少於一定值比如256的時候，PNG8可能更合適
JPG不適合具有大塊顏色相近的區域或亮度("銳度")差異十分明顯的較簡單的圖片。
JPG在存儲攝影或寫實圖像一般能達到最佳的壓縮效果，比如網站的背景圖，輪播圖，用戶頭像等等。
3、pngPNG可以細分為三種格式:PNG8，PNG24，PNG32。
後面的數字代表這種PNG格式最多可以索引和存儲的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。
關於透明：
PNG8支持索引透明和alpha透明
PNG24不支持透明;
而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明，也就是說可以存儲從完全透明到完全不透明一共256個層級的透明度（即所謂的半透明）。
你可能要問了，我保存是PNG-24格式，為什麽還有透明呢？
其實在你勾選了透明度選項之後，你保存的格式就是PNG-32了，只是ps沒有提示你罷了。
優缺點：
能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。
對於需要高保真的較復雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。
CSS雪碧 即CSS Sprites，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
優點：
1，減少加載網頁圖片時對服務器的請求次數
可以合並多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
2，提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
3，減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
不足：1，CSS雪碧的最大問題是內存使用
除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。一個例子是來自於WHIT TV的網站。註意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好--實際下載大小只有大概26K - 但是瀏覽器並不會渲染壓縮後的圖片數據。當這個圖片被下載並被解壓縮之後，它將占用差不多75MB的內存 (1299 * 15000 * 4)。如果這個圖片並沒有使用alpha透明，它將會被優化至1299 * 15000 * 3，但是要在損失渲染速度的情況下。即使那樣，我們也會討論55MB。這張圖片的大部分其實就是空白，那裏什麽都沒有，沒有任何有用的內容。只是加載 WHIT主頁 就會導致你的瀏覽器的內存占用上升到至少75+MB，僅僅是因為那一張圖片。(PS:遺憾的是，該網站最近已經改版，文中提到的圖片已經不存在了)
2，影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為--基本上來說，是為了避免雪碧中相鄰的圖片被"露進來"。這對於小圖片沒有什麽問題，但是對於大圖片會是一個性能下降。
3，拼圖維護比較麻煩
拼合這麽多圖片，需要耐心。同時還要時刻思考如何在使用這個圖片是不會產生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放到一起時，不容易操作。如果要修改雪碧中的一個圖片，你就要修改整張圖片，這無疑會增大工作量。
4，使CSS的編寫變得困難
如果CSS雪碧足夠復雜，則大大增加了CSS的代碼量和難度，讓維護和修改變得困難起來。
5，CSS雪碧調用的圖片不能被打印
CSS 雪碧調用的圖片不能被打印，[email protected] print聲明。
6，錯誤得使用Sprites影響可訪問性
一些剛入門的開發人員會為了節省 HTTP 請求數(這是使用 CSS Sprite 一直強調的好處)而把所有的圖片都當背景圖片來處理 – 甚至是那些傳達重要信息的圖片。結果會導致一個缺乏可訪問性的網站，也會降低 HTML 中 title 和 alt 的潛在益處。
因此，CSS sprite 本身沒錯，而且也不會引發可訪問性問題(事實上，正確得使用會提高可訪問性)。但是不分對錯的過度使用 sprite 會阻礙具有可訪問性和生產率方面的網頁建設進程。
5，svg
可縮放矢量圖形是基於可擴展標記語言(標準通用標記語言的子集)，用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。
SVG可縮放矢量圖形(Scalable Vector Graphics)是基於svg logo可擴展標記語言(XML)，用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。
SVG比較優勢
首先簡要解釋一下矢量圖像格式和位圖圖像格式的區別。矢量圖像用點和線來描述物體，所以文件會比較小，同時也能提供高清晰的畫面，適合於直接打印或輸出。而位圖圖像的存儲單位是圖像上每一點的像素值，因此一般的圖像文件都很大，會占用大量的網絡帶寬。SVG是一種矢量圖形格式，GIF、JPEG是光柵文件格式。有了兩者的概念後，SVG較GIF、JPEG的優勢顯而易見。
1.任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2.文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
3.較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4.超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
5.超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。
6.交互X和智能化。SVG面臨的主要問題一個是如何和已經占有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
（未完，待續。。。）
前臺開發中關於圖片的使用