A. web前端圖片處理。請求大神。。。。。。
如果你說的是我理解的，用css就可以實現
手機打字不方便，給你看看以前回答別人相似的問題
http://..com/question/170087636.html?oldq=1
也就是說該鏈接寬度和 圖片中第一個圖標寬度相同，然後通過背景圖方式載入成為默認樣式。再通過:hover 改變同一個背景圖的x軸位置就可以實現
仍有問題的話追問吧
B. 2020-05-09 前端圖片太多，圖片太大怎麼優化
1、小圖多可以用圖標，例如阿里巴巴iconfont庫 https://www.iconfont.cn/home/index 。
2、使用精靈圖。
3、大圖可以進行壓縮，壓縮網站eg: https://tinypng.com/ 。
4、圖片懶載入，像淘寶或者京東這樣的APP頁面上有很多圖片,當我們滑到下一屏時下一屏的圖片才會載入,這就採用了圖片懶載入的方式.圖片懶載入,簡單來說就是在頁面渲染過程中,圖片不會一次性全部載入,會在需要的時候載入,比如當滾動條滾動到某一個位置時觸發事件載入圖片,通過js將img標簽的data-src屬性賦值給src屬性。
5、使用webp格式，缺點：瀏覽器支持度不夠
C. 淺談前端的圖片優化
近期一直在和朋友討論前端性能優化的問題，著重聊到了圖片相關的優化，就想著總結記錄一下。
說到圖片優化主要從兩個點入手，分別是優化體積和合並請求，下面我分別展開說下這兩點。
就優化體積來說，方法還是比較有限，無外乎壓縮圖片大小，根據視圖需要選擇合適的圖片尺寸。
我們知道圖片是有很多格式的，包括jpg、png、gif等，單就大小來說有損壓縮的jpg格式一般是會比無損壓縮的png要小的多的，但是它不支持透明；且單就png來說還區分png8、png24、png32，我們需要根據自身業務使用場景選擇最優的格式，當然如果支持webp的話webp一定是最優解。
選擇尺寸就更好理解了，比如視圖是一個固定400*300的區域，你肯定不需要放一個4000*3000的圖片上去，當然現代的前端項目或多或少都需要考慮不同端的適配，我這邊的處理方式是通過公司私有的圖片伺服器處理，你只需要上傳一張原圖，獲取圖片時根據需要帶長寬參數即可獲得相應大小的圖片。
請求合並是前端優化的必要手段，不止是針對圖片，這里我只列舉針對圖片優化的方案，當然每種方案都有他的弊端。
用雪碧圖來合並多張小圖片的方案已經有很多年了，它成本低兼容好，確實能解決不少問題，但是使用雪碧圖同時會帶來一些副作用需要我們解決。
首先就是內存問題，由於我們把多張圖片合並成一張大圖，所以渲染時每次都會載入整張雪碧圖，這樣對於內存的開銷來說實際上是更大的，解決的辦法就是盡量減少圖片間的留白，以及控制一張雪碧圖的內容不要太多。
還有就是縮放的問題，我們都知道background-size是針對整張圖片的縮放，在移動端適配多尺寸時再使用固定的px定位就會出現偏差，一般這個時候我們都會使用百分比或者rem的方式來處理，不過在部分機型上還是會出現邊緣的情況，一個朋友提出了transform的解決方案，不過筆者目前還沒有驗證。
toDataUrl的方案相比於雪碧圖晚了些，它可以通過base64字元串來描述圖片本身從而減少圖片的請求；它所帶來的問題是會增大體積頁面本身文件大小，而且由於是內聯字元串會導致圖片無法緩存。
最後就是通過iconfont/svg/CSS等方式來模擬圖片展示，這個方案可以算是是最通用的兼容最好的方案，但是也不是絕對的完美方案；就iconfont來說只能是純色的，不能像圖片那樣顏色豐富，而svg和css或多或少都有一些兼容性問題。
我們在優化圖片的時候還可以設置一些緩存策略以及根據業務場景使用一些懶載入的策略，因為這兩條屬於所有請求通用的方案，這里就不展開說了。最後說一句我們在進行前端優化時需要根據自身需要定製優化方案，切不可為了優化而盲目優化。