1. 程式人生 > >圖片格式與優化

圖片格式與優化

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性能優化:圖片優化
  • 前端圖片優化機制
  • 圖片優化

圖片格式與優化