[TOC] ## 前言 本篇主要介紹web中不同的圖片種類以及每種的特點，我們在什么情況下使用何種圖片的建議。有些圖片格式比如psd等不會出現在web應用中，不做說明。 ## 圖片分類 ### jpg * 基本介紹 JPEG是有損的、采用直接色的、點陣圖。JPEG圖片格式的設計目標，是在不影響人類可分辨的圖片質量的前提下，盡可能的壓縮文件大小。這意味著JPEG去掉了一部分圖片的原始信息，也即是進行了有損壓縮。JPEG的圖片的優點，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來存儲照片，用來表達更生動的圖像效果，比如顏色漸變。與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件較GIF更大。 * **使用建議** 色彩豐富的、大的圖片切成jpg的； ### png（png8 png24） * **PNG-8介紹** PNG全稱Portable Network Graphics，PNG-8是PNG的索引色版本，都最多只能展示256種顏色。PNG-8是無損的、使用索引色的、點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應該盡可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8還支持透明度的調節，而GIF并不支持。 現在，除非需要動畫的支持，否則我們沒有理由使用GIF而不是PNG-8。當然了，PNG-8本身也是支持動畫的，只是瀏覽器支持得不好，不像GIF那樣受到廣泛的支持。可以看到PNG-8具有更好的透明度支持。 結論：適合做圖標的格式，色彩較簡單的 * **PNG-24介紹** PNG-24是PNG的直接色版本，最多可展示的顏色數量多大1600萬。PNG-24是無損的、使用直接色的、點陣圖。無損的、使用直接色的點陣圖，聽起來非常像BMP，是的，從顯示效果上來看，PNG-24跟BMP沒有不同。PNG-24的優點在于，它壓縮了圖片的數據，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。雖然PNG-24的一個很大的目標，是替換JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而顯示效果則通常只能獲得一點點提升。所以，只有在你不在乎圖片的文件體積，而想要最好的顯示效果時，才應該使用PNG-24格式。另外，PNG-24跟PNG-8一樣，是支持圖片透明度的 * **8與24的核心區別** 1 存儲方式不同，一個是8位索引存儲，一個是24位索引存儲 2 8只能透明或者不透明，而24可以設置半透明，因為不二存儲通道里8只有1位，而24的有8位 * **使用建議** 尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的； 半透明的切成png24。 ### SVG * 基本介紹 SVG全稱Scalable Vector Graphics，是無損的、矢量圖。SVG跟上面這些圖片格式最大的不同，是SVG是矢量圖。這意味著SVG圖片由直線和曲線以及繪制它們的方法組成。當你放大一個SVG圖片的時候，你看到的還是線和曲線，而不會出現像素點。這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪制企業Logo、Icon等。SVG是很多種矢量圖中的一種，它的特點是使用XML來描述圖片。借助于前幾年XML技術的流行，SVG也流行了很多。使用XML的優點是，任何時候你都可以把它當做一個文本文件來對待，也就是說，你可以非常方便的修改SVG圖片，你所需要的只需要一個文本編輯器。SVG并非只能繪制簡單的Logo類的圖片，它可以繪制出精致的圖片的。 * **使用建議** 使用場景最多的還是使用svg可以生成批量的圖標字體或者說樣式 ### WebP * 基本介紹 WebPWebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖。從名字就可以看出來它是為Web而生的，什么叫為Web而生呢？就是說相同質量的圖片，WebP具有更小的文件體積。現在網站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那么將大大減少瀏覽器和服務器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。在無損壓縮的情況下，相同質量的WebP圖片，文件大小要比PNG小26%；在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。想象Web上的圖片之多，百分之幾十的提升，是非常非常大的優化。只可惜，目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，所以WebP的應用并不廣泛。為了使用更先進的技術，比如WebP圖片格式，來壓縮互聯網上傳輸的數據流量，谷歌甚至提供了Chrome Data Compression Proxy，設置了Chrome Data Compression Proxy作為Web代理之后，你訪問的所有網站中的圖片，在經過Proxy的時候，都會被轉換成WebP格式，以降低圖片文件的大小。 * **使用建議** 有一定的兼容問題 ，不建議大范圍使用 ### GIF * 基本介紹 全稱Graphics Interchange Format，采用LZW壓縮算法進行編碼。是無損的、采用索引色的、點陣圖。GIF是無損的，采用GIF格式保存圖片不會降低圖片質量。但得益于數據的壓縮，GIF格式的圖片，其文件大小要遠小于BMP格式的圖片。文件小，是GIF格式的優點，同時，GIF格式還具有支持動畫以及透明的優點。但，GIF格式僅支持8bit的索引色，即在整個圖片中，只能存在256種不同的顏色。 * **使用建議** 對色彩要求不高同時需要文件體積較小的場景，比如企業Logo、線框類的圖等。 支持動畫以及透明度要求的 ### BMP * 基本介紹 BMP（全稱Bitmap）是Windows操作系統中的標準圖像文件格式，可以分成兩類：設備相關位圖（DDB）和設備無關位圖（DIB），使用非常廣。它采用位映射存儲格式，除了圖像深度可選以外，不采用其他任何壓縮，因此，BMP文件所占用的空間很大。BMP文件的圖像深度可選lbit、4bit、8bit及24bit。BMP文件存儲數據時，圖像的掃描方式是按從左到右、從下到上的順序。由于BMP文件格式是Windows環境中交換與圖有關的數據的一種標準，因此在Windows環境中運行的圖形圖像軟件都支持BMP圖像格式。 * **使用建議** ## 參考資料 * [圖片的區別](https://www.zhihu.com/question/20028452/answer/142593276)