公司官網的圖片用什麼格式比較好？

01-02

jpg、svg、webp、png？
有的格式不兼容低版本瀏覽器吧，給個提示升級就可以了？

先用未壓縮的jpg，然後第二年用壓縮過品質的jpg，替公司節約30%流量費，KPI滿分。

然後第三年用webp，替公司節約20%的流量費，KPI滿分。

然後第四年添加IEwebp兼容性檢測代碼，解決10%客戶看不見圖片的問題，KPI滿分。

調研一下網站目標客戶所使用的瀏覽器，看每多支持一個百分比的客戶能帶來多少潛在收益，再來決定支持哪些瀏覽器。

沒辦法估計訪客增加與收益之間的關係，那就保證95%用戶的瀏覽器里網站內容正常呈現，80%用戶的瀏覽器里網站交互功能正常使用，不支持的瀏覽器要提示升級瀏覽器。

當你選定目標瀏覽器後，用什麼圖片就很好作決定了。

兼容ie6及以上:

顏色色數較小的圖片、尺寸較小圖片用gif，如圖標如按鈕如縮略圖
動圖用gif
帶透明的圖用gif，並仔細處理好gif圖雜邊色與圖片所在頁面位置背景色之間的關係
需要盡量銳利的圖片用gif，如按鈕如有文字的圖片
尺寸較大的圖片用jpg，如橫幅廣告如正文插圖
顏色平滑過渡的圖片用jpg，如漸變背景圖

兼容ie8及以上:

顏色色數較小的圖片、尺寸較小圖片用png8，如圖標如按鈕如縮略圖
動圖用gif
帶透明的圖用png
需要盡量銳利的圖片用png，如按鈕如形象廣告如有文字的圖片
尺寸較大的圖片用jpg，如橫幅廣告如正文插圖
顏色平滑過渡的圖片用jpg，如漸變背景圖

兼容ie9及以上:

單色圖標用iconfont
動圖用gif
帶透明的圖用png
顏色色數較小的圖片用svg，如圖標如按鈕
顏色色數較小的圖片、尺寸較小圖片用png8，如圖標如按鈕如縮略圖
需要盡量銳利的圖片用png，如按鈕如形象廣告如有文字的圖片
尺寸較大的圖片用jpg，如橫幅廣告如正文插圖
顏色平滑過渡的圖片用jpg，如漸變背景圖

僅需支持chrome:

單色圖標用iconfont
動畫用video
帶透明的圖用png
顏色色數較小的圖標用svg，如扁平風格彩色圖標
顏色色數較小的圖片、尺寸較小圖片用png8，如圖標如按鈕如縮略圖
需要盡量銳利的圖片用png，如按鈕如如形象廣告有文字的圖片
尺寸較大的圖片用webp，如橫幅廣告如正文插圖
顏色平滑過渡的圖片用webp，如漸變背景圖

至於在ie6下用js批量開啟濾鏡支持透明度png，在ie8下用js批量將svg轉vml，在ie下用js批量使用flash顯示webp……，這些hack手段就不要用了好嗎？都是坑！！！

影響性能影響體驗。頁面打開還要跑js遍歷一次圖片並處理，明顯卡頓。
會帶來一些其他bug。如ie6下開透明圖濾鏡的鏈接無法點擊……
增加處理例外的工作量。js向頁面添加了圖片，還要執行一次圖片轉換工作，萬一哪位新加入的開發人員用添加圖片後沒有調用圖片轉換方法，就讓這些不兼容的圖片露餡了。

要支持ie6嗎，不要的話，靜態圖片用jpg或者png都可以，簡單的也可以用svg畫，如果有動圖或者帶交互的，可以用優雅降級的方法，新版瀏覽器用svg，老版用gif或者乾脆用靜態圖片。其實不管用什麼格式的圖片，關鍵點在於優化帶寬，減少等待，保證網頁的載入體驗。

官網，面子還是比較重要的，在新版瀏覽器呈現好一些的效果，老版的保證內容排版沒問題。

把每個需要的格式都存了。然後盡量不同尺寸的也每個格式存一遍。

做了2年前端，這個圖片這個還是具體看需求，比如你是icon就用iconfont比較好，用字體代替，容易調整大小和顏色，兼容也好，如果你圖片不多那就兩個思路，需要透明就png轉base64，如果不需要透明就jpg轉base64，當然使用base64過多會增加html的頁面大小，這個自己考慮考慮，平時基本都是jpg然後大小控制在清晰不模糊，如果是首屏的整頁輪播圖圖片，最好就是控制在100k~200k，不然如果圖片多了就會載入很慢而且是首屏會空缺一大塊，也是要考慮一下懶載入的問題了，除首屏的要解決，下面的用懶載入就可以了，提前500像素載入，不行就700像素，主要還是第一次進來的首屏載入問題

我一般還是三倍 png，這個兼容性靠譜，又足夠清晰，至於大小問題，看項目吧，我這裡是必須三倍圖，清晰度最重要。

一切按公司的驗收標準來定而不是我們的回答，至於圖片格式的優劣，其實掘金，百度都查得到，看你們的驗收標準。比如要兼容到ie6，那麼png可能就不能用24位了。

目前在www頁面使用的最多的圖片格式是JPEG(*.jpg *.jpeg)格式和GIF(*.gif)格式，兩者實際上已經成為HTML規範中要求的標準格式了！