最近工作上因緣際會知道了圖片格式的新世界(咦？)
原來除了我熟悉常用的PNG、JPEG以外，還有這麼多不同的圖片格式。藉著這次機會做了一些功課研究了一下，順便寫下來當作筆記。
我們開始囉！
JPEG/JPG
靜態影像壓縮格式，一種針對相片影像而廣泛使用的一種失真壓縮標準方法。由於是採用失真壓縮演算法，因此壓縮率比 PNG 還要大。
優點
- 色彩層次表現細膩，適合用於色彩豐富的攝影圖
- 可以把檔案壓縮到最小的格式，網頁加載速度較快
- 各種瀏覽器支援度佳
缺點
- 因為使用有損壓縮來減少圖片的大小，可能會導致圖片品質降低
- 不適合用來儲存企業LOGO、線框類的圖片
- 不適合用來儲存色彩重複度高、單色的圖片
PNG
靜態影像格式，是以非破壞性壓縮進行壓縮，導致 PNG 的檔案大小相較於 JPG大了一些。
優點
- 支援透明度
- 適合用於存取色彩重複度高、企業LOGO、線框類的圖片
- 無損壓縮圖片，盡量在不失真的情況下壓縮圖片檔案大小
缺點
- 檔案大小較JPG大，可能會導致網頁加載速度變慢
- 不適合用於色彩豐富的圖片
SVG
一種可縮放式向量圖形，是W3C所制定的開放性網路標準之一，此圖片格式能讓網頁設計師在網頁中以向量格式呈現圖片。由 W3C 所制定的開放標準，老早就成為網頁標準，只是一直以來因為瀏覽器的不支援，導致無法廣泛被利用。
優點
- 不會因尺寸的改變而失真
- 大多數的情況下 SVG 佔用的容量比 PNG 或 JPEG 少非常多
- 適合用於存取色彩重複度高、企業LOGO、線框類的圖片
- 可支援動畫圖、透明度
缺點
- 不適合用於色彩豐富的圖片
- 資料採用未壓縮的方式存放
- dom形式，涉及到動畫時候需要更新dom，效能較低
JPEG2000
基於小波變換的圖像壓縮標準，由聯合圖像專家小組創建和維護。在非破壞性壓縮下仍然能有比較好的壓縮率，在圖像品質要求比較高的醫學圖像的分析和處理中已經有了一定程度的廣泛應用。
優點
- 圖片較不失真，而且有更佳的圖片色彩調節
- 沒有JPEG壓縮中的馬賽克失真效果
缺點
- 增加硬體暫存空間的需求
- 存在版權和專利的風險
- 網頁支援度低，較少人實際使用
JPEG XR
一種連續色調靜止圖像壓縮算法和文件格式，由Microsoft開發，用於替換JPEG2000，增加HDR支援。
支援有損數據壓縮以及無損數據壓縮，並且是微軟的XPS文檔的首選圖像格式。目前支援的軟體包括.NET Framework（3.0 or newer），Windows Vista/Windows 7、Internet Explorer 9，Flashplayer 11等。
優點
- JPEG XR的壓縮能力為現有JPEG的兩倍，在同樣的高圖像品質下，檔案大小只有JPEG的一半
- 圖片較不失真，而且有更佳的圖片色彩調節
缺點
- 網頁支援度低，較少人實際使用(目前只有Edge和IE11以上版本才看的到)
WebP
Google 推出的一種圖檔規格，跟相當普級的 JPEG 同樣採用失真壓縮(Lossy Compression)的技術，讓圖片檔案能變小，在相同品質的情況下，可以比 JPEG 再小 25%~34%。
優點
- 在失真壓縮的模式下，檔案比 JPEG 格式還小
- 支援透明度、動畫， 並分為失真、無失真壓縮模式
缺點
- 編碼、解碼實作的處理速度還沒有最佳化
- 網頁支援度不夠大
稍微為針對上面所提到的所有圖片格式來一下簡單的比較
另外也實際運用了一下照片讓大家看看在同一張照片/圖象，用不同格式存檔的效果。
在同一環境下，攝影照片中以Webp的格式壓縮效果最佳，但JPEG/PNG的網頁支援度最佳，在所有瀏覽器中都能顯示。
若是以簡單線條圖的部分，同一環境下SVG格式呈現最佳，WebP、PNG格式次之，而JPEG則模糊度最高。
檔案尺寸大小則是WebP最小、JPEG 2000最大。
以上就是這次的分享啦，喜歡的話請拍手給我點支持唷~
參考資料
你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！
【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂
