圖片格式與優化
阿新 • • 發佈：2018-05-28
alt .html 角度 hive int item 分享圖片 還原 相冊
圖片介紹
圖片作為網頁必不可少的一部分，在網頁中占據著非常重要地位。一般來說，有以下兩種方式來使用圖片：
- 通過 img 元素直接使用
- 通過 background-image（背景圖片）的形式使用
這兩種形式的區別在於，前者一般具有實際含義（如產品圖片，相冊圖片等），而後者一般用於裝飾效果。
圖片初步了解
目前網頁中常用的圖片大概有如下幾種格式，它們有著各自的顯著特點，被應用在各種不同的場景：
- jpg/jpeg：由於其色彩還原度比較好，所以一般色彩豐富的圖片均采用該格式，如宣傳圖、產品圖、相冊圖等等。（其實我們相機拍出來的照片就是該格式的）
- png：由於其對透明度的良好支持，所以一般用於透明圖片，如 logo 圖、圖標圖等
- gif：由於其對動畫的支持，所以一般用來實現動效圖片，如 loading 加載動畫、一些搞笑圖片等
除了這三種圖片格式外，還有 ico 格式和 webp 格式：
- ico 格式屬於圖標文件，主要用於網址前面的標識圖標，如騰訊課堂及 IMWeb 前端學院的圖標
- webp 格式是由 google 研發的圖片格式，它既具備高壓縮率，又具備透明度以及動畫的特性。目前各個大互聯網公司都有在使用該格式，其帶來的效果也非常顯著。但是該格式有個明顯的缺陷：目前瀏覽器端只有 google 瀏覽器支持。
參考資料
- JPEG 圖像
- GIF 圖像
- PNG 圖像
- WebP 探尋之路
- WebP相對於PNG、JPG有什麽優勢？
圖片優化
通過HTTP Archieve統計顯示，圖片內容已經占到了互聯網內容總量的65%左右。如下圖（時間為 2017-03-15）:
如此多的圖片，當然占用了很多流量及時間，所以從性能優化的角度看，圖片絕對是優化的熱點和重點之一。由於圖片優化篇幅太長，這裏就不再展開介紹了，下面推薦一些圖片優化的極佳資料以供參考：
- Web性能優化：圖片優化
- 前端圖片優化機制
- 圖片優化
圖片格式與優化