一、常見的圖片格式 BMP 是無損的、既支持索引色也支持直接色的點陣圖。這種圖片格式幾乎沒有對數據進行壓縮，所以BMP格式的圖片通常是較大的文件。 GIF 是無損的、採用索引色的點陣圖。採用LZW壓縮演算法進行編碼。文件小，是GIF格式的優點，同時，GIF格式還具有支持動畫以及透明的優點。但是GIF格 ...
一、常見的圖片格式
- BMP
- 是無損的、既支持索引色也支持直接色的點陣圖。這種圖片格式幾乎沒有對數據進行壓縮，所以BMP格式的圖片通常是較大的文件。
- GIF
- 是無損的、採用索引色的點陣圖。採用LZW壓縮演算法進行編碼。文件小，是GIF格式的優點，同時，GIF格式還具有支持動畫以及透明的優點。但是GIF格式僅支持8bit的索引色，所以GIF格式適用於對色彩要求不高同時需要文件體積較小的場景。
- JPEG
- 是有損的、採用直接色的點陣圖。JPEG的圖片的優點是採用了直接色，得益於更豐富的色彩，JPEG非常適合用來存儲照片，與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件較GIF更大。
- PNG-8
- 是無損的、使用索引色的點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應該儘可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8還支持透明度的調節，而GIF並不支持。除非需要動畫的支持，否則沒有理由使用GIF而不是PNG-8。
- PNG-24
- 是無損的、使用直接色的點陣圖。PNG-24的優點在於它壓縮了圖片的數據，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。
- SVG
- SVG是無損的矢量圖。SVG是矢量圖意味著SVG圖片由直線和曲線以及繪製它們的方法組成。當放大SVG圖片時，看到的還是線和曲線，而不會出現像素點。這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪製Logo、Icon等。
- WebP
- WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的點陣圖。從名字就可以看出來它是為Web而生的，什麼叫為Web而生呢？就是說相同質量的圖片，WebP具有更小的文件體積。現在網站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那麼將大大減少瀏覽器和伺服器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，相容性不太好。
- 在無損壓縮的情況下，相同質量的WebP圖片，文件大小要比PNG小26%。
- 在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%。
- WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。
- WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的點陣圖。從名字就可以看出來它是為Web而生的，什麼叫為Web而生呢？就是說相同質量的圖片，WebP具有更小的文件體積。現在網站上充滿了大量的圖片，如果能夠降低每一個圖片的文件大小，那麼將大大減少瀏覽器和伺服器之間的數據傳輸量，進而降低訪問延遲，提升訪問體驗。目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，相容性不太好。
二、進行圖片優化
- 不用圖片，很多時候會使用到很多修飾類圖片，其實這類修飾圖片完全可以用 CSS 去代替。
- 對於移動端來說，屏幕寬度就那麼點，完全沒有必要去載入原圖浪費帶寬。一般圖片都用 CDN 載入，可以計算出適配屏幕的寬度，然後去請求相應裁剪好的圖片。
- 小圖使用 base64 格式。
- 將多個圖標文件整合到一張圖片中（精靈圖）。
- 選擇正確的圖片格式：
- 對於能夠顯示 WebP 格式的瀏覽器儘量使用 WebP 格式。因為 WebP 格式具有更好的圖像數據壓縮演算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量，缺點就是相容性並不好。
- 小圖使用 PNG，其實對於大部分圖標這類圖片，完全可以使用 SVG 代替。
- 照片使用 JPEG。
