文章出處

　　GIF/PNG/JPG/WEBP/APNG都是屬于位圖（位圖 ,務必區別于矢量圖）；

　　GIF/PNG和JPG這三種格式的圖片被廣泛應用在現今的互聯網中,gif曾在過去互聯網初期慢速的情況下幾乎是做到了大一統的地位,而現如今隨著互聯網技術應用和硬件條件的提高,png和jpg格式的圖片越來越多的被應用,gif昔日的輝煌一去不復, webp圖片格式現在還不普及：

　 GIF（Graphics Interchange Format）

　　GIF圖形交換格式是一種位圖圖形文件格式,以8位色（即256種顏色）重現真彩色的圖像。它實際上是一種壓縮文檔,采用LZW壓縮算法進行編碼,有效地減少了圖像文件在網絡上傳輸的時間。它是目前廣泛應用于網絡傳輸的圖像格式之一。

優點

　　1. 優秀的壓縮算法使其在一定程度上保證圖像質量的同時將體積變得很小。
　　2. 可插入多幀,從而實現動畫效果。
　　3. 可設置透明色以產生對象浮現于背景之上的效果。

缺點

　　由于采用了8位壓縮,最多只能處理256種顏色（2的8次方）,故不宜應用于真彩圖像。

　　PNG（Portable Network Graphics）

　　便攜式網絡圖片（Portable Network Graphics）,簡稱PNG,是一種無損數據壓縮位圖圖形文件格式。PNG格式是無損數據壓縮的,PNG格式有8位、24位、32位三種形式,其中8位PNG支持兩種不同的透明形式（索引透明和alpha透明）,24位PNG不支持透明,32位 PNG 在24位基礎上增加了8位透明通道（32-24===8）,因此可展現256級透明程度。

　　PNG這種類型的圖片就是為了取代GIF圖片而生的, 除了GIF不支持動畫的優勢, 能用PNG的地方就用PNG, 原因是壓縮比高,色彩好；

優點

　　* 支持256色調色板技術以產生小體積文件
　　* 最高支持48位真彩色圖像以及16位灰度圖像。
　　* 支持Alpha通道的半透明特性。
　　* 支持圖像亮度的gamma校正信息。
　　* 支持存儲附加文本信息,以保留圖像名稱、作者、版權、創作時間、注釋等信息。
　　* 使用無損壓縮。
　　* 漸近顯示和流式讀寫,適合在網絡傳輸中快速顯示預覽效果后再展示全貌。
　　* 使用CRC循環冗余編碼防止文件出錯。
　　* 最新的PNG標準允許在一個文件內存儲多幅圖像。

缺點

　　但也有一些軟件不能使用適合的預測,而造成過分臃腫的PNG文件。

讓IE6透明的小技巧：

　　如上圖所示, IE6支持全透明,不支持半透明, 所以我們在PS到處透明圖片的時候可以把圖片設置為png8,在PS的生成圖片是記得把png透明的選項勾選上,測試代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
    <style>
        body{
            background:#eee;
        }
        p{
            position:absolute;
        }
        p.p1{
            left:200px;
            top:140px;
        }
        p.p2{
            left:500px;
            top:140px;
        }
        img{
            position:relative;
        }
    </style>
    <p class="p1">
        text
    </p>
    <p class="p2">
        text
    </p>
    <img src="http://images.cnitblog.com/blog2015/497865/201505/022343328802481.png" />
</body>
</html>

View Code

效果圖：

JPG（Joint Photographic Experts Group）

　　JPEG是一種針對相片影像而廣泛使用的一種失真壓縮標準方法。JPEG的壓縮方式通常是破壞性資料壓縮（lossy compression）,意即在壓縮過程中圖像的品質會遭受到可見的破壞。

優點

　　JPEG/JFIF是最普遍在萬維網（World Wide Web）上被用來儲存和傳輸照片的格式。JPEG在色調及顏色平滑變化的相片或是寫實繪畫（painting）上可以達到它最佳的效果。在這種情況下,它通常比完全無失真方法作得更好,仍然可以產生非常好看的影像（事實上它會比其他一般的方法像是GIF產生更高品質的影像,因為GIF對于線條繪畫（drawing）和圖示的圖形是無失真,但針對全彩影像則需要極困難的量化）。

缺點

　　它并不適合于線條繪圖（drawing）和其他文字或圖示（iconic）的圖形,因為它的壓縮方法用在這些圖形的型態上,會得到不適當的結果；

　　給個活生生的例子：一張照片在Instagram反復上傳下載90次之后....(在博客園找了半小時,link), 在最后jpg圖片完全變樣了;

WEBP圖片格式：

　　2010年谷歌推遲的圖片格式,專門用來在web中使用, 壓縮率只有jpg的2/3或者更低；第一個版本的webp圖片格式是有損的, 新版本中webp圖片是無損的。

　　相對于png圖片,webp比png小了45%,但是缺點是你壓縮的時候需要的時間更久了；

優點：

　　體積小巧；

缺點：

　　兼容性不太好, 只有opera,和chrome支持;

　　但是有個插件可以讓所有瀏覽器都支持webp格式, 利用了flash把webp圖片轉換為瀏覽器可以識別的圖片格式;
　　WebP插件打包下載：http://www.etherdream.com/WebP/WebP.zip
　　WebP插件在線Demo：http://www.etherdream.com/WebP/
　　WebP插件源碼下載：http://code.google.com/intl/zh-CN/speed/webp

額外的信息：

　　前面如果有看清楚的有寫png和gif是無損壓縮,但是實際上通過作圖工具導出的png或者gif圖片明明很模糊的啊, 為什么呢？

    因為gif是8位的壓縮,"8位"是指圖片所能表現的顏色深度, 一個8位圖像僅最多只能支持256種不同顏色(一個多余256種顏色的圖片若用gif圖片保存會出現失真, 相對于jpg圖片來講, gif有他所能表示色彩的極限, 如果原圖中色彩太多了就悲劇了, 所以所謂的無損是相對于jpg格式會對圖片進行壓縮的一種說法);
    png的圖片有8為有24為有32位, 當然實際上24位和32位的png圖片顏色看起來更加鮮艷自然;

base64

　　Base64是網絡上最常見的用于傳輸8Bit字節代碼的編碼方式之一。Base64編碼可用于在HTTP環境下傳遞較長的標識信息, 直接把base64當成是字符串方式的數據就好了

　　利用Base64的不可讀性，可以加密字符串，標準瀏覽器的window下有兩個方法，分別是window.btoa和window.atob，（IE67下雖然不支持，但是可以用vbscript模擬，參考司徒正美大牛（簡稱司牛）的地址，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
    <script>
        var str = "nono::::";
        var result = "";
        console.log( result = window.btoa(str) );    //bm9ubzo6Ojo=
        console.warn( window.atob( result ) ); //nono::::
    </script>
</body>
</html>

優點：

　　1：減少了http請求；

　　2：數據就是圖片；

缺點：

　　1：如果圖片稍微有點大，這個字符串會很長很長；

　　2：IE6,7 你懂得；

　　如何獲取圖片對應的base64字符串呢？

　　　　1：使用代碼獲取：

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
    htmlImage = '<img src="'+ e.target.result +'" />';    // 這里e.target.result就是base64編碼
}
reader.readAsDataURL(file);

　　　　2：在webkit內核瀏覽器有個挺方便的技巧，你打開發者工具，選中圖片，那么右側就會出現對應圖片的base64 ，你把這個字符串復制一下，在字符串前面加上data:images/gif;base64,然后直接復制到瀏覽器的地址欄，打開就會顯示這副圖片;

：

　　base64圖片的DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
    <img src="data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM4RjcyMUE5NEFDNzExRTA5RjMxODI4RjU2OTNEMzNCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM4RjcyMUFBNEFDNzExRTA5RjMxODI4RjU2OTNEMzNCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzhGNzIxQTc0QUM3MTFFMDlGMzE4MjhGNTY5M0QzM0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzhGNzIxQTg0QUM3MTFFMDlGMzE4MjhGNTY5M0QzM0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5fTzGYAAADg0lEQVR42mJgAAIlRY3/TMryegp3VX8xAAQQg76BlQFIlOG9Fv9/TXmt/wABBOa4uwX8BwF9Q4v9DCC1n798+//r95//B9rN/wMEEFiFtpbxf1l5BQcwR0VRux+kXEle9T+Iz9htqP2/WEuQ4e2jZwy2L/kdGTZ3WYANvPXk7X8pcVkFgAACa5OXVxOwtA75DwOKQO2yCooKIDkWEDFf/P/7Jw92MjAcEGFguPmJof4fO4O4iOR9zwcMjAxqSob7KzLj/z81V/7/7dv3/79///7/7efv/5G2Wv/lZVT2M4JM+H8n6P+1tR8Y7muXMvD/fc2gz17BcHk/F4N15x1GgABigAEbW8/16iq6/xUV1fbDxIDOgTDMzD3fHz245z8zM/N/EK0or/IfpoAJxHj78rEAAxJgROZUMTA47OAX+P+rm/3//zUs/392sP5fJCb2fzoPQwPIBEZjY8f/256fZeA1lGfgBHr6/4d3DNeeMjNEsEsyXL5yghEU+v9/Pnv2/0mg0/8fP37+//fv3/8X7778l5VS/g9zg+Ctr38ZxFbuZGBjY2P4/O0Xw4/P7xn+/v0lCA7JGYb3DbQ/mDEcORzHwK4dxiD7rJVBXpeBYbn9e1DUHwAIUCa5+zIUgFH8tLf1qFZvQ1yVktvWo14VJBLEIwYxSCqWRmJobV2kEf+A2CwVIRbhDiYiGEjEwILFwCAS8ahHRGl6tW7r3roPbRMN8S3f9J2c73fOH8OO2pahCtq5GWUjYMNPEL94KJDTD0OlUiAqovfh/pb5xyk9dmudp87RrvR0DWQCTTPzT81n9k/ANrpKqax0rPwWyDoYJ/XsDkmTR74bUP0prLkVgBADIiGEX+MovhHhXLahMfqKLiFq9XEIZgW6zXb/tIkPdAdZXNRYsE7lwBIMQ9YmoZZzYCTUoD4VOAUJSyYzdiNx5uDx2psRaKzvCEiS5C8vNWBh1A1uZhIaXT7K6HJoKTOSNc34stih0NUg7LVoa2oDodWgoNDAnJ+deDUJjksX93C0j+ql3SNQrc8ikmuEafMoyycVHWIJAUk+geHBFqxtHR/ynx9ktjZznXqyw02zRcU2hBoCoC0lKNTlQZJl8Ekxc/x8dwnzxQTeYgIu966tY/tc8A/EDZfeU++QXakekBIrv59eEdu+4ziz2K7ztFoll4okSIMO76EX9XbPKsf8pPANFgKR/lchulcAAAAASUVORK5CYIIvKiAgfHhHdjAwfGIyZTA0ZTk5NjI2MWI5OWRkOTRkZjNlZjg2YWMzM2ZiICov" />
</body>
</html>