GIF/PNG/JPG和WEBP/base64/apng圖片優勢和缺點整理

時間 2019-11-08

標籤 gif png jpg webp base64 base apng 圖片優勢缺點整理欄目 HTML 简体版

原文原文鏈接

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

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

　 GIF（Graphics Interchange Format）

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

優勢算法

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

缺點瀏覽器

　　因爲採用了8位壓縮,最多隻能處理256種顏色（2的8次方）,故不宜應用於真彩圖像。ruby

　　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, 緣由是壓縮比高,色彩好；ide

優勢wordpress

　　* 支持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="https://images0.cnblogs.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>