圖片格式與優化
阿新 • • 發佈: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性能優化:圖片優化
- 前端圖片優化機制
- 圖片優化
圖片格式與優化