常用圖片格式匯總及區別

前言

本篇文章主要總結了，各種常用的圖片格式的特點以及它們之間的區別，

一、常見的圖片格式有哪些？

png，svg，jpeg（jpg），gif，tiff，webp，bmp

二、各種格式的特點

1、png格式

（360百科部分介紹）

??PNG，影像檔案存盤格式，其目的是試圖替代GIF和TIFF檔案格式，同時增加一些GIF檔案格式所不具備的特性，可移植網路圖形格式(Portable Network Graphic Format，PNG)名稱來源于非官方的"PNG’s Not GIF"，是一種位圖檔案(bitmap file)存盤格式，
讀成"ping"，PNG使用從LZ77派生的無損資料壓縮演算法，一般應用于JAVA程式中，或網頁或S60程式中是因為它壓縮比高，生成檔案容量小，
特點：
??一、體積小網路通訊中因受帶寬制約，在保證圖片清晰、逼真的前提下，網頁中不可能大范圍的使用檔案較大的bmp、jpg格式檔案，
??二、無損壓縮 PNG檔案采用LZ77演算法的派生演算法進行壓縮，其結果是獲得高的壓縮比，不損失資料，
??三、更優化的網路傳輸顯示 PNG影像在瀏覽器上采用流式瀏覽，即使經過交錯處理的影像會在完全下載之前提供瀏覽者一個基本的影像內容，然后再逐漸清晰起來，它允許連續讀出和寫入影像資料，這個特性很適合于在通信程序中顯示和生成影像，
??四、支持透明效果 PNG可以為原影像定義256個透明層次，使得彩色影像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣，這種功能是GIF和JPEG沒有的，
??五、PNG同時還支持真彩和灰度級影像的Alpha通道透明度，

2、SVG格式

??全稱Scalable Vector Graphics，是無損的、矢量圖，(例如用visio畫的流程圖就是矢量圖)
??SVG跟上面這些圖片格式最大的不同，是SVG是矢量圖，這意味著SVG圖片由直線和曲線以及繪制它們的方法組成，當你放大一個SVG圖片的時候，你看到的還是線和曲線，而不會出現像素點，這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪制企業Logo、Icon等，
??SVG是很多種矢量圖中的一種，它的特點是使用XML來描述圖片，借助于前幾年XML技術的流行，SVG也流行了很多，使用XML的優點是，任何時候你都可以把它當做一個文本檔案來對待，也就是說，你可以非常方便的修改SVG圖片，你所需要的只需要一個文本編輯器，
??SVG并非只能繪制簡單的Logo類的圖片，它可以繪制出精致的圖片的，
??SVG加載速度會快于PNG，但渲染速度會慢于PNG，畢竟PNG有硬體加速，但平均下來，加載速度的提升彌補了繪制的速度缺陷，

3、jpeg格式

優點：
??攝影作品或寫實作品支持高級壓縮，
??利用可變的壓縮比可以控制檔案大小，
??JPEG 廣泛支持 Internet 標準，
缺點：
??有損耗壓碩訓使原始圖片資料質量下降，
??當您編輯和重新保存 JPEG 檔案時，JPEG 會混合原始圖片資料的質量下降，這種下降是累積性的，
??PEG 不適用于所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片，

3、gif格式

優點：
??GIF 廣泛支持 Internet 標準，
??支持無損耗壓縮和透明度，
??影片 GIF 很流行，易于使用許多 GIF 影片程式創建，
缺點：
??GIF 只支持 256 色調色板，因此，詳細的圖片和寫實攝影影像會丟失顏色資訊，而看起來卻是經過調色的，
??在大多數情況下，無損耗壓縮效果不如 JPEG 格式或 PNG 格式，
??GIF 支持有限的透明度，沒有半透明效果或褪色效果（例如，alpha 通道透明度提供的效果）

4、tiff格式

優點：
??TIFF 是廣泛支持的格式，尤其是在 Macintosh 計算機和基于 Windows 的計算機之間，
??支持可選壓縮，
??可擴展格式支持許多可選功能，
缺點：
??TIFF 不受 Web 瀏覽器支持，
??可擴展性會導致許多不同型別的 TIFF 圖片，并不是所有 TIFF 檔案都與所有支持基本 TIFF 標準的程式兼容，

5、WebP格式

??WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖，
　　從名字的簡單直白，就可以知道它的出現就是為了web，現在各種各樣的網站上有著大量的圖片，但是如果圖片的大小可以大大減小，那么將大大較小瀏覽器和服務器之間的資料傳輸對的速度以及提升用戶訪問網站的體驗，
　　在無損壓縮的情況下，相同質量的WebP圖片，檔案大小要比PNG小，
　　在有損壓縮的情況下，具有相同圖片精度的WebP圖片，檔案大小要比JPEG小，
　　WebP圖片格式支持圖片透明度
　　想象Web上的圖片之多，百分之幾十的提升，是非常非常大的優化，目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，所以WebP的應用并不廣泛，為了使用更先進的技術，比如WebP圖片格式，來壓碩訓聯網上傳輸的資料流量，谷歌甚至提供了Chrome Data Compression Proxy，設定了Chrome Data Compression Proxy作為Web代理之后，你訪問的所有網站中的圖片，在經過Proxy的時候，都會被轉換成WebP格式，以降低圖片檔案的大小，
　　下面是一個更加直觀的例子：
　　

6、BMP格式

??BMP(全稱Bitmap)是Windows作業系統中的標準影像檔案格式，
??它采用位映射存盤格式，除了影像深度可選以外，不采用其他任何壓縮，因此，BMP檔案所占用的空間很大，由于BMP檔案格式是Windows環境中交換與圖有關的資料的一種標準，因此在Windows環境中運行的圖形影像軟體都支持BMP影像格式，
??是一種與硬體設備無關的影像檔案格式，使用非常廣，
??BMP檔案存盤資料時，影像的掃描方式是按從左到右、從下到上的順序，
??由于BMP檔案格式是Windows環境中交換與圖有關的資料的一種標準，因此在Windows環境中運行的圖形影像軟體都支持BMP影像格式，
特點：
??BMP 是（Windows 位圖） Windows 位圖可以用任何顏色深度（從黑白到 24 位顏色）存盤單個光柵影像，
??Windows 位圖檔案格式與其他 Microsoft Windows 程式兼容，
??它不支持檔案壓縮，也不適用于 Web 頁，
從總體上看，Windows 位圖檔案格式的缺點超過了它的優點，為了保證照片影像的質量，請使用 PNG 、JPEG、TIFF 檔案，BMP 檔案適用于 Windows 中的墻紙，
如果你是用過eclipse你就會發現打開eclipse的首頁圖片就是Bmp格式的，

7、ico格式

??ico是Icon file的縮寫，是Windows的圖示檔案格式的一種，可以存盤單個圖案、多尺寸、多色板的圖示檔案，
圖示是具有明確指代含義的計算機圖形，其中桌面圖示是軟體標識，界面中的圖示是功能標識，
就是我們在打開網頁的時候標題旁邊的就是ico圖片，

8、格式轉換的方法

當然這些圖片之間是可以相互轉換的，但是如果你說可以改圖片的后綴名，這樣確實改了，但是治標不治本，圖片內在的處理格式還是沒變，
網上的在線圖片格式轉換器有很多，也有很多的轉換圖片格式的軟體，（基本都是要付費的，你懂的，，，）
這款還是比較好用的：

補充知識點：

1、有損vs無損

在上面的圖片格式中有提到有損和無損壓縮圖片下面就了解一下：

圖片檔案格式有可能會對圖片的檔案大小進行不同程度的壓縮，圖片的壓縮分為有損壓縮和無損壓縮兩種，
??有損壓縮：指在壓縮檔案大小的程序中，損失了一部分圖片的資訊，也即降低了圖片的質量，并且這種損失是不可逆的，我們不可能從有一個有損壓縮過的圖片中恢復出全來的圖片，常見的有損壓縮手段，是按照一定的演算法將臨近的像素點進行合并，
??無損壓縮：只在壓縮檔案大小的程序中，圖片的質量沒有任何損耗，我們任何時候都可以從無損壓縮過的圖片中恢復出原來的資訊，

2、點陣圖vs矢量圖

??點陣圖，也叫做位圖，像素圖，構成點陣圖的最小單位是象素，位圖就是由象素陣列的排列來實作其顯示效果的，每個象素有自己的顏色資訊，在對位圖影像進行編輯操作的時候，可操作的物件是每個象素，我們可以改變影像的色相、飽和度、明度，從而改變影像的顯示效果，既然是像素圖，那么只要放大，你就會看到圖片每一個像素點，（失真）
??矢量圖，也叫做向量圖，矢量圖并不紀錄畫面上每一點的資訊，而是紀錄了元素形狀及顏色的演算法，即運算圖片的運算結果，不管你放大或者縮小其顯示效果仍然相同(不失真)，

總結

對于一個前端開發者，來說知道了解這些就夠了，細節實作原理不必深究，本文是從很多文章中總結出來需要了解并提取出的知識點也加入了自己的一些內容和理解，如有問題，虛心接受，改正，